feat: add support for react-native 0.81#3114
Merged
Merged
Conversation
This change was necessary due to react/metro#1530.
…mport for ios paper to fix build error
kligarski
force-pushed
the
@kligarski/bump-to-0.81.0-rc.2
branch
2 times, most recently
from
7b1b029 to
a0a5cff
Compare
Contributor
Author
|
Not sure if we can satifly linter without using new imports for |
…ops` by setting `RN_SERIALIZABLE_STATE` compile flag (#3117) ## Description The function has been introduced with RN 0.80 and later modified in react/react-native@c059ae1b77. The #c059ae1b77 added RN_SERIALIZABLE_STATE compile time definition, which helps to resolve an ridiculous crash / hang we had. To give some context - the crash occured in codegened C++ code in `RNSScreenProps::~RNSScreenProps` (yes, this is a compiler generated default dtor) or in other dtors, depending on exact timing. It is still unknown exactly what was the error mechanism, but most likely due to some timing / concurrency related issues dtor attempted to free some memory that was no longer mapped to a process or something. Anyway, setting this flag resolves the problem. Additionally, this is also a way-to-go in terms of setting compile options required by RN since 0.80. ## Test code and steps to reproduce <details> <summary>Crash reproduction setup</summary> ```tsx import React from 'react'; import { useState } from 'react'; import { Button } from 'react-native'; import { ScreenStack, ScreenStackItem } from 'react-native-screens'; export default function BasicBareScreens() { const [secondShown, setSecondShown] = useState(false); return ( <ScreenStack> <ScreenStackItem screenId="1" activityState={2}> <Button title="Go to screen 2" onPress={() => setSecondShown(true)} /> </ScreenStackItem> {secondShown && ( <ScreenStackItem screenId="2" activityState={2}> <Button title="Go back" onPress={() => setSecondShown(false)} /> </ScreenStackItem> )} </ScreenStack> ); } ``` </details> ## Checklist - [x] Included code example that can be used to test this change - [ ] Ensured that CI passes
kkafar
reviewed
Aug 11, 2025
kkafar
left a comment
kkafar
left a comment
Member
There was a problem hiding this comment.
I have single question regarding new edgeToEdge option.
Comment on lines
+46
to
+49
| # Use this property to enable edge-to-edge display support. | ||
| # This allows your app to draw behind system bars for an immersive UI. | ||
| # Note: Only works with ReactActivity and should not be used with custom Activity. | ||
| edgeToEdgeEnabled=true |
Member
There was a problem hiding this comment.
We need to check what this is doing.
Currently we detect whether the edgeToEdge is enabled or not by using react-native-is-edge-to-edge package. Will this conflict? What if we set edgeToEdgeEnabled=false here & we have react-native-edge-to-edge installed? What happens? What is the interaction here?
Member
There was a problem hiding this comment.
Let's add comment here, that we do not support this yet.
Contributor
Author
There was a problem hiding this comment.
created a separate PR with changes related to new edge to edge API: #3121
## Description This resolves linter issues in native component specs, which we can not really fix. Basically the issue is as follows: <img width="1764" height="107" alt="image" src="https://github.com/user-attachments/assets/efe3f8dc-c205-40ba-af4f-904dd6a8b59a" /> ## Test code and steps to reproduce Lint CI should pass. ## Checklist - [ ] Ensured that CI passes
Member
|
We did a quick research together with @kligarski about current situation with edge to edge support. react/react-native@09ef774 introduced support for detecting whether app is in edge to edge in RN core. This API is available since 0.81. Therefore, while we support older versions we should keep support for |
kkafar
reviewed
Aug 11, 2025
kkafar
left a comment
kkafar
left a comment
Member
There was a problem hiding this comment.
Nice! I've added single request to add comment & we will want to land the solution for https://github.com/software-mansion/react-native-screens-labs/issues/357
Comment on lines
+46
to
+49
| # Use this property to enable edge-to-edge display support. | ||
| # This allows your app to draw behind system bars for an immersive UI. | ||
| # Note: Only works with ReactActivity and should not be used with custom Activity. | ||
| edgeToEdgeEnabled=true |
Member
There was a problem hiding this comment.
Let's add comment here, that we do not support this yet.
## Description Adds support for `react-native`'s `edgeToEdgeEnabled` property. Closes software-mansion/react-native-screens-labs#357. ## Changes - rename `EdgeToEdgePackageDetector` to `EdgeToEdgeDetector` - make `EdgeToEdgeDetector` use different implementation for RN < 0.81 and RN >= 0.81 - use new edgeToEdgeEnabled and isEdgeToEdgeFeatureFlagOn - add clarifying comments ## Test code and steps to reproduce N/A ## Checklist - [ ] Ensured that CI passes
…faceView` (#3122) ## Description `TabsHost.id` collied with `ReactSurfaceView.id`, because RN 0.81 started to number the root views from 1, instead of 11 as it was before. This caused issues, becuase `FragmentTransaction.add(containerViewId: Int, ...)` requires us to pass the `containerViewId`, which it then uses to find a view in hierarchy with that id & it mounts added fragment's view there. If collision occurs, Android Framework mounts the fragment directly under `ReactSurfaceView` instead of our `TabsHost`. Proposed workaround does the following: 1. ~it passes int value of react native minor version down from gradle script to build config, so that it is accessible in platform code. AFAIK there is no dedicated API as of 0.81 for this, therefore we need a workaround.~ We start counting from 3, it should work no matter RN version. 2. It adds new `ViewIdGenerator` that implements new `ViewIdProviding`. It has capability of overriding the view generator, so that the lib can be integrated in brownfield scenarios. We should use this object to generate view id for any of our views that need it. 3. The `ViewIdGenerator` relies on internals of RN, that are referenced in the code comments, to provide non-colliding view ids (tags). ## Test code and steps to reproduce `TestBottomTabs` should work on 0.81. W/o this patch you won't see the bottom tab bar (it will be rendered, but under the top screen. The view would be mounted directly under `ReactSurfaceView`. ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Updated documentation: <!-- For adding new props to native-stack --> - [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [ ] Ensured that CI passes
Flewp
pushed a commit
to discord/react-native-screens
that referenced
this pull request
Oct 16, 2025
…ified for 4.11.1 Adds support for `react-native@0.81`. Closes https://github.com/software-mansion/react-native-screens-labs/issues/357. - apply updates from upgrade-helper - set `edgeToEdgeEnabled=true` (might require changes to how we detect edge-to-edge) - changed imports from `metro-config` to use `private` alias (react/metro#1530) - changed deprecated `ShadowNode::Shared` to `std::shared_ptr<const ShadowNode>` (react/react-native#52393) - bump `react-native-gesture-handler`, `react-native-safe-area-context` - software-mansion#3117 - software-mansion#3122 Run example apps. - [ ] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com> Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds support for
react-native@0.81.Closes https://github.com/software-mansion/react-native-screens-labs/issues/357.
Changes
edgeToEdgeEnabled=true(might require changes to how we detect edge-to-edge)metro-configto useprivatealias (Breaking: Disallow deep imports under./srcfor all Metro packages exceptmetro-runtimereact/metro#1530)ShadowNode::Sharedtostd::shared_ptr<const ShadowNode>(Mark ShadowNode::Shared as deprecated and replace all usages react/react-native#52393)react-native-gesture-handler,react-native-safe-area-contextRNSScreenProps::~RNSScreenPropsby settingRN_SERIALIZABLE_STATEcompile flag #3117TabsHostcolliding withReactSurfaceView#3122Test code and steps to reproduce
Run example apps.
Checklist