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

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

Advertisement

Inconsistent innovation at the bottom

The release includes some significant changes. For example, touchable objects in TypeScript can no longer be used as types in generic expressions because TouchablesOpacity And TouchableHighlights were converted to functional components. So the following code is no longer valid:

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

Instead, developers can use the types built into React React.ElementRef or he View-Usage Type:

import {TouchableHighlight} from 'react-native';
const ref1 =
  useRef>();
// or
const ref2 = useRef();

Layout update with Yoga 3.1

React Native 0.75 has been released with it New Yoga version 3.1. Embeddable layout engine targeting web standards is a Meta Open Source Project And it can be used in UI frameworks like React Native. Yoga is written in C++, has a public C API and can handle CSS subsets – notably flexbox.

The online conference will be presented on October 17, 2024 Feedback 19 days New features of the popular JavaScript library from dpunkt.verlag and iX. Theme day as part of EnterJS Shows participants how they can make the most of the new version and how modern web development with React 19 improves their applications. Excerpt from the event:

early bird tickets Available till 25th September.

Smart Garden with Water Irrigation Control from Konyks

With Yoga 3.1, React Native benefits from new layout options. The development team particularly highlights the performance of %-Values ​​in different places such as gaps And translation out. Using the new React Native architecture is required to use this feature.

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. Like on GitHub The beta announcement can be found inThe stable version is expected to be released this year. The new architecture is designed to use Expo SDK 51, which the React Native team also recommends. However, it can also be done Without using open source frameworks,

The expo serves this very purposeTo create native apps that run on Android, iOS and the web and in addition to the open source version, is also available in a paid version with cloud services. The framework includes a universal runtime and libraries that enable developing native apps with React and JavaScript.

React Native 0.75 fixes some bugs in the new architecture to make it more stable. Among other things, you can now adjustsFontSizeToFit Use on Android and has difficulties textAlign The upward shifted baseline of text on Android as well as on iOS has been fixed.

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

Developers can share their experiences with the new architecture Share a survey with the Meta and Expo teams,

More information about the new release can be found in the React Native blog,

(May)