iOS- und Android-Apps mit React Native

Wir von Nix-wie-weg haben seit Kurzem auch eine App für iOS und Android am Start.

Wir haben uns entschieden, die App mit React Native zu entwickeln. In diesem Aritkel werde ich zeigen, warum wir uns so entschieden haben und auf welche Besonderheiten und Probleme wir beim Entwickeln der App gestoßen sind.

Warum React Native?

React Native ist ein Javascript-Framework von Facebook zum Entwickeln nativer Apps, das auf React aufbaut.

Der große Vorteil ist, dass man mit nur einer Codebasis mehrere Plattformen bedienen kann. React Native unterstützt von Haus aus iOS und Android. Bei Bedarf kann das auch per Plugin von Microsoft auf Windows-Plattformen (z. B. Windows 10 Mobile und Xbox One) erweitert werden.

React Native hat eine große Community in der man schnell Hilfe zu Problemen findet, wird sehr aktiv entwickelt und hat seit Dezember 2016 einen festen monatlichen Release-Zyklus.

Zum Platzieren der Komponenten verwendet man bei React die HTML-ähnliche JSX-Syntax und Stylesheets mit CSS-ähnlichen Attributen (Ein Code-Beispiel).

Für die verwendeten Komponenten und APIs gibt es von React Native entsprechende Gegenstücke in nativem Code, die dann per Javascript angesprochen werden können. Das reicht von allgemeinen (Webview, Button, Kamera, …) bis hin zu plattformspezifischen Komponenten/APIs (wie der Hardware-Zurück-Button bei Android) und kann natürlich auch mit Paketen erweitern werden.

Da man als Entwickler im Web-Bereich nicht um Javascript herum kommt, ist damit von uns zumindest jeder etwas vertraut und muss somit nichts komplett Neues lernen. Dadurch können wir für die App-Logik und das Styling unser bereits vorhandenes Know-How nutzen.

Tooling

React Native liefert auch ein Tooling mit, das während der Entwicklung der App unterstützt.

Zum einen gibt es da die CLI, mit der man die App ganz einfach auf den beiden Plattformen im entsprechenden Simulator (sofern diese vorher installiert wurden) starten kann oder auch Pakete installieren kann.

Will man ein React Native-Paket installieren, reicht es nicht einfach aus, das Paket per NPM zu installieren. Die Pakete enthalten noch nativen Code, der zusätzlich in die Projekte gelinkt werden muss. Installiert man diese Pakete aber über das React Native CLI wird das alles automatisch für einen erledigt.

Sehr hilfreich während dem Entwickeln sind auch die Debug-Möglichkeiten. Mit einer bestimmten Tastenkombination lässt sich ein Debug-Menü öffnen mit dem man LiveReload oder Profiling aktivieren kann. Man kann einen Inspector öffnen, mit dem man sich die angezeigten Elemente genauer anschauen kann (ähnlich den Developer Tools im Browser) oder auch den Chrome-Debugger anhängen und Breakpoints im Javascript-Code setzen.

Der Javascript-Code wird automatisch mit Babel kompiliert, wodurch man bedenkenlos ES6/7 Features sowie die JSX-Syntax verwenden kann. Der Code läuft dann auf allen Geräten mit der JavascriptCore-Engine, die auch der Safari-Browser nutzt.

Stolpersteine

Es gab auch einige Schwierigkeiten während der Entwicklung der App, die allerdings nicht alle auf React Native zurückzuführen sind, sondern schlicht und einfach darauf, dass es eben zwei unterschiedliche Plattformen sind, die wieder ihre Besonderheiten haben:

  • Gegen welche SDK-Version soll die native App kompiliert werden? Das kann diverse Auswirkungen auf Geräte haben, die eine andere OS-Version installiert haben. Zum Beispiel hatten wir den Fall, dass unter Android bis zu einer bestimmten OS-Version das Recht auf externen Speicher zuzugreifen erforderlich war, wenn gegen eine höhere Version kompiliert wird. (Details)
  • Bei Android muss beachtet werden, dass es sehr viele Geräte mit unterschiedlichen Gerätefeatures, Displaygrößen und Leistung gibt.
  • Es sind ggf. plattformspezifische Views/Komponenten nötig, da es je Plattform eine unterschiedliche Erwartungshaltung an die Benutzeroberfläche gibt. Als Beispiele:
    • Das Zurücknavigieren per Gerätetaste (Android) statt nur einem Button in der View (iOS)
    • Anders gewohnte Anordnung von Tabs, Toolbars, usw.
  • Manche Komponenten können auf beiden Plattformen verwendet werden, haben aber unterschiedliche Events und Attribute je Plattform (z. B. RefreshControl), was durchaus für Verwirrungen sorgen kann.

Fazit

Man kann mit React Native recht schnell und einfach eine App für beide Plattformen erstellen und sich - auch als Webentwickler - sein Wissen in Javascript und CSS zunutze machen.

Will man jedoch speziellere Komponenten oder APIs verwenden (wie Background-Jobs, Google Cloud Messaging vs. Apple Push Notification Service, GPS, …) muss man sich - trotz schon vorhandener Pakete dafür - dennoch genauer mit den beiden Plattformen auseinandersetzen und teils auch am nativen Code Anpassungen machen.

Alles in allem erleichtert React Native aber einiges.