Kategorie: ReactNative

Fehler in react-native-gesture-handler

Posted on by amoerke

NUR beim Ausführen der nativen App kommt es zu dem Fehler. Während der Entwicklung fällt der Fehler nicht auf.

Nachvollziehen kann man den Fehler, bevor man einen Releasbuild in der Expo-Cloud macht, auch schon durch einen lokalen Build. So spart man sich Zeit und vorallem Buildkontingent im Free-Plan von Expo.

Dafür macht man den Prebuild, startet das Projekt (.workspace-Datei !) in XCode und führt es am besten im Simulator aus. Dabei kommt es zu folgendem Fehler:

ERROR TypeError: Cannot read property 'dropGestureHandler' of nullCode-Sprache: JavaScript (javascript)

Der Stack in dem Fall dazu war:

This error is located at:
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View
in Unknown (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by StackNavigator)
in StackNavigator (created by AppNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by AppNavigator)
in RCTView (created by View)
in View (created by AppNavigator)
in AppNavigator (created by Connect(AppNavigator))
in Connect(AppNavigator) (created by App)
in Provider (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

Das Problem ist, dass die Expo-Mitinstallierte Version des Packages sich offensichtlich von der offiziellen Version unterscheidet. In dem Fall ist die Bibliothek React Navigation auch von dem Package abhängig und kommt mit der Expo-Version nicht klar.

LÖSUNG:

Unter node_modules den Ordner react-native-gesture-handler löschen und mit bspw. Yarn als Dependency hinzufügen:

yarn add react-native-gesture-handler

Expo – Tooling für lokal Build

Posted on by amoerke

Fastlane installieren

sudo gem install fastlane -NV

Fastlane in PATH für die jeweilige Shell aufnehmen

export PATH="/usr/local/bin/fastlane:$PATH"Code-Sprache: JavaScript (javascript)

iOS Plattform für XCode Kommandozeile installieren

xcodebuild -downloadPlatform iOS

Bauen der App über EAS

eas build --local --platform ios

Um einen Prebuild der App zu bauen (XCode Projekt) folgendes ausführen

npx expo prebuild --platform ios --clean

Expo – Debuggen von Releasebuilds

Posted on by amoerke

Das Problem mit der Fehlernachvollziehbarkeit bei Releasebuild ist, die Logs dazu auszulesen.
Dafür kann man aber unter iOS:

  • Das Device an den Mac anschließen
  • Die App Konsole öffnen
  • Das Device auswählen
  • Über die Suche den Namen der App für Prozesse eingeben
  • Die App starten und die Logs einsehen

Für Android

  • Das Device an den PC anschließen
  • Android Studio öffnen
  • Die App starten
  • Nach dem Namen der App filtern
  • Über LogCat die Logs auslesen

Expo Artikel dazu.

Expo JS EAS Workflow – Kompakt erklärt

Posted on by amoerke

In der EAS – Konfiguration eas.json im Projektverzeichnis werden grundlegend die Channels und deren
Eigenschaften festgelegt. Es werden die Profile „stage“ und „production“ festgelegt und welchen
Channels diese zuzuordnen sind. (Bspw. stage gehört zum Channel staging)

Wenn man nun ein Release in der EAS-Cloud bauen lässt, wird dieses automatisch dem jeweiligen Channel
zugeordnet.

Man kann Branches anlegen, diese einem Channel zuweisen, wiederum Updates einspielen und diese einem
Branch zuweisen. (Kette)

Somit ist man in der Lage einen Build, bspw. Production schnell auf einen vorigen Branch zurückzustellen.

Updates werden über den Branch in den zugewiesen Channels übertragen und OHNE neues Release
im Store sofort per Over The Air Update ausgerollt. Nutzer bekommen dieses Update automatisch
ausgeliefert.

Beispiel eas.json

{
  "cli": {
    "version": ">= 0.52.0"
  },
  "build": {
    "development": {
      "env": {
        "ENV": "development"
      },
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "env": {
        "ENV": "development"
      },
      "distribution": "internal"
    },
    "stage": {
      "env": {
        "ENV": "production"
      },
      "distribution": "internal",
      "channel": "staging"
    },
    "production": {
      "env": {
        "ENV": "production"
      },
      "channel": "production"
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "APPLE_ID",
        "appleTeamId": "APPLE_TEAM_ID"
      }
    }
  }
}Code-Sprache: JSON / JSON mit Kommentaren (json)

EAS – Cheatsheet

Stage Release für Plattformen

eas build –profile stage –platform ios
eas build –profile stage –platform android

Production Release für Plattformen bauen

eas build –profile production –platform ios
eas build –profile production –platform android

Production Release für Plattformen veröffentlichen

eas submit –platform ios
eas submit –platform android

Over the air Update für alle Apps in Release-Channel „staging“

expo publish –release-channel staging

Ein neues Update mit einem neuen Branch erstellen

eas update –branch Campaignadvertisement –message „Kampagnenwerbung integriert“

Einem Channel einen Branch zuweisen

eas channel:edit production –branch version-2.0

DOC https://docs.expo.dev/eas-update/eas-cli/ und https://docs.expo.dev/eas-update/how-it-works/

Expo SDK 49 Update

Posted on by amoerke

Für das Upgrade eines bestehenden Projektes sollte man folgendem Guide folgen ExpoBlog

Wenn man die ReactNavigation implementiert hat, muss man die Bibliothek react-native-gesture-handler entfernen, da Expo diese selbst integriert hat und sonst mit folgender Fehlermeldung quittiert:

Tried to register two views with the same name RNGestureHandlerButtonCode-Sprache: JavaScript (javascript)

Deshalb folgende Vorgehensweise:

  • Alle laufenden Instanzen der App schließen
  • node_modules – Ordner löschen
  • package-lock.json löschen
  • react-native-gesture-handler aus package.json entfernen
  • npm i oder yarn ausführen
  • yarn start

Quelle Stackoverflow

ViewPropTypes has been removed from React Native

Posted on by amoerke

Steps

  1. Install patch-package, this will later be used to make the changes more persistent.
  2. Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types
  3. Now you have to hack the node_modules. Go to node_modules/react-native/index.js starting around line 436 and change this:
// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
  invariant(
    false,
    "ColorPropType has been removed from React Native. Migrate to " +
      "ColorPropType exported from 'deprecated-react-native-prop-types'.",
 );
},
get EdgeInsetsPropType(): $FlowFixMe {
  invariant(
    false,
    "EdgeInsetsPropType has been removed from React Native. Migrate to " +
      "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
  );
},
get PointPropType(): $FlowFixMe {
  invariant(
    false,
    "PointPropType has been removed from React Native. Migrate to " +
     "PointPropType exported from 'deprecated-react-native-prop-types'.",
 );
},
get ViewPropTypes(): $FlowFixMe {
 invariant(
   false,
   "ViewPropTypes has been removed from React Native. Migrate to " +
     "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
 );
},Code-Sprache: JavaScript (javascript)

to this:

  // Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    return require("deprecated-react-native-prop-types").ColorPropType
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    return require("deprecated-react-native-prop-types").EdgeInsetsPropType
  },
  get PointPropType(): $FlowFixMe {
    return require("deprecated-react-native-prop-types").PointPropType
  },
  get ViewPropTypes(): $FlowFixMe {
    return require("deprecated-react-native-prop-types").ViewPropTypes
  },
Code-Sprache: JavaScript (javascript)
  1. Run npx patch-package react-native to save the patch.
  2. Rebuild the app.

Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.

https://stackoverflow.com/questions/72755476/invariant-violation-viewproptypes-has-been-removed-from-react-native-migrate-t