React Native

Das Entwicklungsmuster von React wird durch React Native auf mobile Geräte (iOS oder Android) übertragen.

Das meist verbreitete Entwicklungstool dazu ist Expo. Mit Expo Snack gibt es auch eine Entwicklungsumgebung, die nur einen Browser benötigt.

Alternativen zu dieser plattformübergreifenden Entwicklung mit React Native sind

• retool
• flutter

Aspekte

Styling

React Native unterstützt nur einen CSS-ähnlichen Ansatz, aber nicht CSS direkt.

Ähnlicher wird es mit Libraries, z.B. styled oder NativeWind.

Auch UniStyles ist eine solche Library, die das Styling von React Native Apps vereinfachen soll. Siehe dazu auch

• https://dev.to/ajmal_hasan/streamlining-styling-in-react-native-with-unistyles-2fp2

Unabhängig von der eingesetzteh Bibliothek gibt es verschiedene Tipps:

• Style-Konstanten an einem zentralen Ort im Source-Code
• Wiederverwendbare Komponenten

Siehe auch

• https://medium.com/@tusharkumar27864/best-practices-for-styling-mobile-apps-in-react-native-1fcf8eac649e
• https://blog.logrocket.com/react-native-styling-tutorial-examples/
• https://kodaschool.com/blog/styling-in-react-native-flexbox-and-stylesheet
• https://infinum.com/handbook/frontend/react-native/styling
• https://www.digitalocean.com/community/tutorials/react-styling-react-native

Komponenten

Standardkomponenten

• https://reactnative.dev/docs/components-and-apis

Navigation, Layout etc.

• https://reactnavigation.org/

Icons

• expo/vectoricons fasst viele Icons-Sammlungen zusammen.
  • Über icons.expo.fyi kann man die Icons raussuchen.

Gesamtframeworks

• UI Kitten
• https://callstack.github.io/react-native-paper/
• https://gluestack.io/

Anzeige verwendeter Open Source Lizenzen

• https://www.callstack.com/blog/react-native-legal-acknowledge-open-source-libraries-in-your-app

Expo

Expo ist eine umfassende Entwicklungsumgebung. Mit dem EAS Build-Service ist auch möglich, eine APK in der Cloud erstellen zu lassen, ohne dass lokal ein Android Studio oder Android SDK verfügbar sein muss.

Expo kann neben Android-Apps auch eine Web-Anwendung erstellen, was den Entwicklungsprozess beschleunigen kann.

Expo und Environment-Variablen

Die Umgebungsvariablen in .env - Dateien können - wenn sie mit EXPO_PUBLIC_ beginnen - mittels process.env.EXPO_PUBLIC_XXX zugegriffen werden.

In den Web-Anwendungen funktioniert das nur, wenn der Bundler "metro" gesetzt ist. Dazu muss expo.web.bundler="metro" in der Datei app.json gesetzt werden.

Expo Go lädt alte App-Version

Manchmal funktioniert das Aktualisieren der App in Expo Go nicht. Dann muss man in den App-Einstellungen von Expo Go die "Daten löschen" und den "Cache löschen".

---