React Native 0.75 bringt Updates für neue Architektur und Layout

React Native ist in Version 0.75 erschienen. Das quelloffene Cross-Plattform-UI-Framework aus dem Hause Meta zum Entwickeln nativer Android- und iOS-Anwendungen mit React bringt einige neue Features – darunter Yoga 3.1, eine ebenfalls von Meta entwickelte Layout-Engine. An der seit Mai als Beta bestehenden neuen Architektur von React Native hat das Entwicklungsteam ebenfalls gearbeitet. Sie soll demnächst in stabiler Form erscheinen und zum Standard werden.

Abwärtsinkompatible Neuerungen

Im Release sind einige Breaking Changes enthalten. Beispielsweise lassen sich Touchables in TypeScript nicht mehr als Typen in Generic-Ausdrücken verwenden, denn TouchablesOpacity und TouchableHighlights wurden zu funktionalen Komponenten konvertiert. Der folgende Code ist somit nicht mehr gültig:

import {TouchableHighlight} from 'react-native';
const ref = useRef<TouchableHighlight>();
//                ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here.
//                            Did you mean typeof TouchableHighlight?

Stattdessen können Entwicklerinnen und Entwickler den in React integrierten Typ React.ElementRef oder den View-Typ verwenden:

import {TouchableHighlight} from 'react-native';
const ref1 =
  useRef<React.ElementRef<typeof TouchableHighlight>>();
// or
const ref2 = useRef<View>();

Layout-Updates mit Yoga 3.1

React Native 0.75 erscheint mitsamt der neuen Yoga-Version 3.1. Die embeddable Layout-Engine, die auf Web-Standards abzielt, ist ein Open-Source-Projekt von Meta und lässt sich in UI-Frameworks wie React Native verwenden. Yoga ist in C++ geschrieben, besitzt eine öffentliche C-API und kann mit CSS-Subsets – insbesondere Flexbox – umgehen.

Online-Konferenz zu React

Am 17. Oktober 2024 präsentiert die Online-Konferenz React 19 Day von dpunkt.verlag und iX die neuen Features der beliebten JavaScript-Bibliothek. Der Thementag im Rahmen der enterJS zeigt Teilnehmenden, wie sie das Optimum aus der neuen Version herausholen können und wie moderne Webentwicklung mit React 19 ihre Anwendungen besser macht. Auszug aus dem Programm:

• Wie Fullstack-React unser Leben verändert
• React 19 glänzt! So schön neu! Wirklich alles?
• React Compiler: Enhancing Developer Experience Without Compromising Performance

Frühbuchertickets sind bis zum 25. September verfügbar.

Durch Yoga 3.1 profitiert React Native von neuen Layout-Möglichkeiten. Besonders hebt das Entwicklungsteam die Anzeige von %-Werten an verschiedenen Stellen wie gaps und translation hervor. Um dieses Feature zu nutzen, ist es notwendig, die neue React-Native-Architektur zu verwenden.

Bugfixes für die neue Architektur

In Version 0.68 führte React Native eine neue Architektur ein, die im Mai 2024 den Beta-Status erreichte und künftiger Standard werden soll. Wie auf GitHub in der Ankündigung der Beta nachzulesen ist, soll die stabile Version noch in diesem Jahr erscheinen. Die neue Architektur ist auf die Verwendung von Expo SDK 51 ausgelegt, was das React-Native-Team auch so empfiehlt. Sie lässt sich jedoch auch ohne das Open-Source-Framework nutzen.

Expo dient dazu, native Apps zu erstellen, die unter Android, iOS und im Web laufen und ist neben der Open-Source-Version in einer kostenpflichtigen Variante mit Cloud-Services verfügbar. Das Framework enthält eine universelle Runtime sowie Bibliotheken, die das Entwickeln nativer Apps mit React und JavaScript ermöglichen.

React Native 0.75 behebt einige Bugs in der neuen Architektur, um diese weiter zu stabilisieren. Unter anderem lässt sich nun adjustsFontSizeToFit unter Android verwenden und Schwierigkeiten mit textAlign unter Android sowie mit einer nach oben verschobenen Baseline von Text unter iOS wurden gelöst.

Gemeinsam mit dem Expo-Team hat das React-Native-Team zudem Informationen im React Native Directory hinzugefügt. Damit lässt sich unmittelbar feststellen, ob eine Bibliothek mit der neuen Architektur umgehen kann:

Entwicklerinnen und Entwickler können ihre Erfahrungen mit der neuen Architektur in einer Umfrage mit den Teams von Meta und Expo teilen.

Weitere Infos zum neuen Release finden sich im React-Native-Blog.

(mai)