Introducing React Native Screens 4.0.0

Hey! Recently we’ve released a new major version of react-native-screens — 4.0.0!

While you typically interact with this library indirectly — via full-blown navigation libraries, e.g. react-navigation or expo-router, this major version brings changes that might reach you anyway. So let’s fasten the seatbelts and take a quick look at the highlights of version 4.0.0.

Sheets API

The main highlight is the support for ‘formSheet’ presentation on Android and custom detents on iOS.

Sneak peak at `formSheet` presentation. There are four detents set via `sheetAllowedDetents` property of the screen, but notice that the Android is limited to three.

On Android, you can now specify up to three detents (snap points) and control sheets corner radius, dimming view, initial detent, elevation, etc. Check out our types to learn more.

At the same time, iOS now supports an unlimited number of detents, along with a few extra configuration options, like ‘sheetExpandsWhenScrolledToEdge’ or ‘sheetLargestUndimmedDetentIndex’, which determine the sheet interaction with nested scrollview or content underneath.

`sheetLargestUndimmedDetentIndex` property allows you to control the dimming view behind the sheet. Notice, when dimming view is present, the interaction with underneath content is disabled.

Please note that this API is not a standalone API — it is meant to be used with native-stack only.

We’re waiting for your feedback!

Warning: this API comes with temporary limitations due to implementation trade-offs. For a detailed description, please check the release notes.

Preload support for native-stack screens

We’ve made it possible to retain screens detached from HostTree, which allowed us to add preload support for native-stack v7, which you can utilize through react-navigation!

The preload allows you to load the screen in advance, anticipating user flow within your application. This means React Native will render the screen and create the native views, but they won’t be shown (mounted) until the user navigates to the preloaded destination. This should be particularly useful for screens with long loading times.

Improvements to iOS animations

We did some math and aligned our `simple_push` iOS animations to closely match the native defaults. This improves not only the `simple_push` stack animation itself but, more importantly, the completion animation after a gesture cancels on interactive swipes!

iOS `simple_push` animation after 4.0.0

Drop support for native-stack v5 & support for react-navigation v7

react-native-screens 4.0.0 comes with support for react-navigation v7 and, on demand, powers most available navigators, with a particular focus on native-stack v7.

There are also plans to reintroduce compatibility for native-stack v6. In light of this, we’ve decided to drop support for native-stack v5 entirely. It has been marked as deprecated and is slated for removal in one of the upcoming minor versions of the library.

If you’re still actively using native-stack v5, we’ll be continuing to ship the code for now. However, we highly recommend sticking to the 3.x line of the library or migrating to react-navigation v7 and react-native-screens v4.

Other notable changes

This release also includes several smaller (breaking) changes, such as prop renaming, hiding raw native components from the public API, updates to the API for direct library consumers (authors of navigation libraries), changes in default values, and more. Unless you were already doing something very unusual, these should not impact you directly, as these changes were handled on the level of your navigation library.

Most notably, 4.0.0 introduces support for react-native 0.76 and includes numerous fixes to improve support for the new architecture. We’ve also resolved some longstanding issues, such as the long title truncation in the native-header component. For the full list of changes, please refer to our release notes https://github.com/software-mansion/react-native-screens/releases/tag/4.0.0.

We want to give huge thanks and shoutout to all the external contributors and issue reporters. Thank you!

In the end, I want to thank @tboba @maciekstosio @alduzy who worked in react-native-screens team and had an immense impact on the project.

We’re waiting for your feedback, enjoy!

We’re Software Mansion: React Native core contributors, New architecture experts, community builders, multimedia experts, and software development consultants. We helped build the best Google Play app in 2024.

Do you want your project to be the next best app? Hire us: [email protected].