Inmitten der Pandemie legt uns Facebook das neue Update des Open-Source-Frameworks React Native in die Wiege. Wer hätte mit diesen Neuerungen gerechnet?
Die Hauptrolle im Release des neuen Updates von React Native spielt die Integration von Flipper. Das Entwickler-Tool zum Debuggen mobiler Apps gab es bereits unter dem Namen Sonar. Das Untersuchen, Visualisieren, und Kontrollieren von mobilen Apps aus einem Desktop-Interface heraus ist mit dem sowohl in der Android wie in der iOS Community beliebten Tool kein Problem . Durch die mitgelieferten APIs ist Flipper zusätzlich um eigene Plug-ins erweiterbar. Flippers neuste Funktionen sind :
| Metro-Aktionen | Lädt die die App neu und triggert das Dev-Menü direkt aus der Toolbar |
| Crash Reporter | Zeigt Absturzberichte von Android- und iOS-Geräten an |
| React DevTools | Verwendt die neueste Version von React DevTools direkt neben allen anderen Tools |
| Netzwerkinspektor | Zeigt alle Netzwerk Requests an, die von Geräteanwendungen gestellt wurden |
| Metro- und Geräteprotokolle | Zeigt, sucht und filtert alle Protokolle vom Metro und dem Gerät |
| Native Layout Inspector | Zeigt und bearbeitet den ausgegebenen native Layout-Output durch den React Native-Renderer |
| Database- und Preference Inspector | Zeigt und bearbeitet die Gerätedatenbanken und -einstellungen |
| Flippers Marketplace | Viele Plug-ins können von npm bezogen werden |
Mehr Informationen zu Flippers Plug-Ins findet ihr hier.
Die neuen Dark Mode Features
Das neue Appearence-Modul verhilft dem User zum Zugriff auf die Darstellungseinstellungen in neuen Dimensionen, bspw. auf das präferierte Farbschemata hell oder dunkel.
Die Darstellungs-API ist an das Vorbild der Medienabfragen aus W3C und das Farbschema an das von CSS-Medien Feature „prefers-color-scheme“ angelehnt.
Das Darstellungsmodul ermöglicht es sich daran anzupassen, sollte der Benutzer ein dunkles Farbschema bevorzugen.
Das Farbschema steht direkt zur Verfügbar, und beinhaltet beabsichtigte Farbschemaänderung bspw. bei Sonnenauf- und Untergängen. Anstatt den Wert zwischenzuspeichern sind die Renderlogiken oder -stile darauf ausgelegt diese Funktion bei jedem Rendern aufzurufen. Dabei ist sie auf das vom Benutzer bevorzugten Farbschema abhängig. Der useColorScheme React-Hook, der Farbschema-Updates bereitstellt und abonniert, kann dazu verwendet werden oder man verwendet Inline-Styles , statt die Daten in einem StyleSheet anzulegen.
static getColorScheme() gibt das vom Benutzer präferierte Farbschema an. Die Daten können später mittels direkter Benutzeraktion (bspw. Einstellungen in den Geräteeinstellungen) oder nach einem vorgegebenen Zeitenablauf angepasst werden.
Die bereitstehenden Farbschemata beschränken sich auf light, dark und null, wobei null kein präferiertes Farbschemata angibt. Beim Debuggen mit Chrome wird getColorScheme () immer light zurückgeben wird.
Breaking Changes von React Native
propTypes wurde aus den Kern-Komponenten entfernt, um die App-Größe zu verkleinern und statische Typ-Systeme in den Vordergrund zu stellen, die sich nach der Kompilierungszeit und nicht nach der Laufzeit richten. Nicht entfernt, sondern eher erstetzt wurde die veraltete accessibilityStates-Eigenschaft zugunsten der neuen accessibilityState. Mit ihr können Komponenten Daten zu ihrem Status für Accessibility-Services semantisch besser beschreiben. Bezüglich TextInput kam es zu einigen Ertferungen. So fliegt onTextInput aus TextInput raus, da es nicht W3C-kompatibel ist und sich in Fabric zu problematisch implementieren lässt. Von den undokumentierten Eigenschaften inputView und selectionState hat man sich ebenso getrennt.
Und das Schönste daran ist..
Im Angesicht der Lean Core-Bemühungen, deren Hauptmotivation darin besteht Module aus React Native in separate Repositories zu splitten, damit sie besser gewartet werden können, und um Apple TV mit anderen Plattformen wie React Native Windows und React Native MacOS vereinbar zu machen, wurde damit begonnen Apple TV-spezifischen Code aus dem Kern zu entfernen. Die Apple TV-Unterstützung für React Native findet ihr unter: react-native-community/react-native-tvos und die entsprechenden npm-Paket mit react-native-tvos. Damit hat man eine vollständige Übersicht über die Haupt-Repository mit den Änderungen, die zur Unterstützung von Apple TV erforderlich sind.
Der Start des npm-Pakets react-native-tvos basiert auf dem offiziellen Start von React Native. Die Apple TV-Projekte müssen nur aktualisiert werden, um react-native-tvos 0.62 zu verwenden. Hilfestellung zu den Anpassungen an React Native 0.62 bekommt ihr über den GitHub Issue Tracker namens Upgrade-Support oder über die React-Native-Community.
