Cross-platform: React Native 0.75 updates beta architecture and layout

React Native has been released in version 0.75. The open-source cross-platform UI framework from Meta for developing native Android and iOS applications with React brings several new features – including Yoga 3.1, a layout engine also developed by Meta. The development team has also been working on the new React Native architecture, which has been in beta since May. It will soon be released in a stable form and become the standard.

Backwards incompatible innovations

The release contains some breaking changes. For example, touchables in TypeScript can no longer be used as types in generic expressions, as TouchablesOpacity and TouchableHighlights have been converted to functional components. The following code is therefore no longer valid:

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?

Instead, developers can use the React.ElementRef or View type integrated in React:

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

Layout updates with Yoga 3.1

React Native 0.75 comes with the new Yoga version 3.1. The embeddable layout engine, which is aimed at web standards, is an open-source project from Meta and can be used in UI frameworks such as React Native. Yoga is written in C++, has a public C API and can handle CSS subsets –, in particular Flexbox –.

Online conference on React

On October 17, 2024, the online conference React 19 Day by dpunkt.verlag and iX will present the new features of the popular JavaScript library. The theme day as part of enterJS will show participants how they can get the most out of the new version and how modern web development with React 19 makes their applications better. Excerpt from the program:

• How fullstack React is changing our lives
• React 19 shines! So beautifully new! Really everything?
• React Compiler: Enhancing Developer Experience Without Compromising Performance

Early bird tickets are available until September 25.

With Yoga 3.1, React Native benefits from new layout options. The development team particularly emphasizes the display of % values in various places such as gaps and translation. To use this feature, it is necessary to use the new React Native architecture.

Bug fixes for the new architecture

In version 0.68, React Native introduced a new architecture that reached beta status in May 2024 and is set to become the future standard. As can be read in the beta announcement on GitHub, the stable version is due to be released later this year. The new architecture is designed for use with Expo SDK 51, as recommended by the React Native team. However, it can also be used without the open-source framework.

Expo is used to create native apps that run on Android, iOS and the web and is available in a paid version with cloud services in addition to the open-source version. The framework contains a universal runtime and libraries that enable the development of native apps with React and JavaScript.

React Native 0.75 fixes some bugs in the new architecture to further stabilize it. Among other things, adjustsFontSizeToFit can now be used on Android and difficulties with textAlign on Android and with an upwardly shifted baseline of text on iOS have been resolved.

Together with the Expo team, the React Native team has also added information to the React Native Directory. This makes it possible to immediately determine whether a library can handle the new architecture:

Developers can share their experiences with the new architecture in a survey with the Meta and Expo teams.

Further information on the new release can be found on the React Native blog.

(mai)