feat(Android,**unstable**): integration with react-native-edge-to-edge (#2464)

> [!note]
> note by @kkafar: 
> Please note that I merge this as unstable behaviour, since I might
want to remove the dependency & code once we land
facebook/react-native#47554 in core or endup
with only edge-to-edge supported by Android.


## Description

This follow a discussion started [on the react-navigation
repository](react-navigation/react-navigation#12217).

## Motivation

The future of Android is
[edge-to-edge](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge),
and to make the React Native developer experience seamless in this
regard, the ecosystem needs to transition from “opaque system bars by
default” to “edge-to-edge by default.”

To prevent library authors from implementing their own edge-to-edge
solutions—which could interfere with other libraries—and because it’s
not possible to reliably detect if edge-to-edge is already enabled on
Android, we have collaborated with [Expo](https://expo.dev/) to create a
library that handles this functionality and is detectable using a simple
helper:
[`react-native-is-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge/tree/main/react-native-is-edge-to-edge).

This approach allows you to bypass certain options and props (in this
case, `Screen` `statusBarTranslucent`, `navigationBarTranslucent`,
`statusBarColor` and `navigationBarColor` - [setting background color is
deprecated](https://developer.android.com/about/versions/15/behavior-changes-15#deprecated-apis)).
All are Android only props and are now obsolete / deprecated (at least,
when running in edge-to-edge mode)

## Changes

- Add `react-native-is-edge-to-edge` to bypass `statusBarTranslucent`,
`navigationBarTranslucent`, `statusBarColor` and `navigationBarColor`
values
- Add a warning about their usage when running in edge-to-edge mode.

## Test code and steps to reproduce

- Install
[react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge)
in the Example app.
- Force `react-navigation` to use local version of
`react-native-screens`.

> [!WARNING]  
> For the `StatusBar` example, `react-native` `headerTopInsetEnabled`
might interfere when `statusBarTranslucent` is explicitely set to
`false`, but the user will receive a warning inviting him to remove the
option / prop, so that's acceptable.

## More

If you want to bypass some Kotlin code directly, consider this util:

```kotlin
object EdgeToEdgeUtil {
  val ENABLED: Boolean
    get() = try {
      // we cannot detect edge-to-edge, but we can detect react-native-edge-to-edge install
      Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
      true
    } catch (exception: ClassNotFoundException) {
      false
    }
}
```

## 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

---------

Co-authored-by: Kacper Kafara <[email protected]>

Author: zoontek

Example/package.json

@@ -28,6 +28,7 @@
     "nanoid": "^4.0.2",
     "react": "19.0.0",
     "react-native": "0.78.0-rc.5",
+    "react-native-edge-to-edge": "^1.6.0",
     "react-native-gesture-handler": "2.22.0",
     "react-native-reanimated": "3.17.1",
     "react-native-restart": "^0.0.27",

Example/yarn.lock

@@ -3101,6 +3101,7 @@ __metadata:
     react: "npm:19.0.0"
     react-native: "npm:0.78.0-rc.5"
     react-native-codegen: "npm:^0.71.3"
+    react-native-edge-to-edge: "npm:^1.6.0"
     react-native-gesture-handler: "npm:2.22.0"
     react-native-reanimated: "npm:3.17.1"
     react-native-restart: "npm:^0.0.27"
@@ -8859,6 +8860,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-edge-to-edge@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "react-native-edge-to-edge@npm:1.6.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/6373cc1b447eae31689a9b62e38b15621e9273626e2324700c4c3eb58c02ce489236a4b9e3e0dc1187e062defd8316195c5b1213facd718706b79b92127a05a3
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:2.22.0":
   version: 2.22.0
   resolution: "react-native-gesture-handler@npm:2.22.0"

FabricExample/package.json

@@ -27,6 +27,7 @@
     "nanoid": "^4.0.2",
     "react": "19.0.0",
     "react-native": "0.78.0-rc.5",
+    "react-native-edge-to-edge": "^1.6.0",
     "react-native-gesture-handler": "2.22.0",
     "react-native-reanimated": "^4.0.0-nightly-20250218-e5a0cdf69",
     "react-native-restart": "^0.0.27",

FabricExample/yarn.lock

@@ -2952,6 +2952,7 @@ __metadata:
     prettier: "npm:2.8.8"
     react: "npm:19.0.0"
     react-native: "npm:0.78.0-rc.5"
+    react-native-edge-to-edge: "npm:^1.6.0"
     react-native-gesture-handler: "npm:2.22.0"
     react-native-reanimated: "npm:^4.0.0-nightly-20250218-e5a0cdf69"
     react-native-restart: "npm:^0.0.27"
@@ -8525,6 +8526,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-edge-to-edge@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "react-native-edge-to-edge@npm:1.6.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/6373cc1b447eae31689a9b62e38b15621e9273626e2324700c4c3eb58c02ce489236a4b9e3e0dc1187e062defd8316195c5b1213facd718706b79b92127a05a3
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:2.22.0":
   version: 2.22.0
   resolution: "react-native-gesture-handler@npm:2.22.0"

package.json

@@ -69,6 +69,7 @@
   "homepage": "https://github.com/software-mansion/react-native-screens#readme",
   "dependencies": {
     "react-freeze": "^1.0.0",
+    "react-native-is-edge-to-edge": "^1.1.7",
     "warn-once": "^0.1.0"
   },
   "peerDependencies": {

src/components/Screen.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import { Animated, View, Platform } from 'react-native';
 
+import { EDGE_TO_EDGE, transformEdgeToEdgeProps } from './helpers/edge-to-edge';
+
 import TransitionProgressContext from '../TransitionProgressContext';
 import DelayedFreeze from './helpers/DelayedFreeze';
 import { ScreenProps } from '../types';
@@ -391,7 +393,12 @@ export const ScreenContext = React.createContext(InnerScreen);
 const Screen = React.forwardRef<View, ScreenProps>((props, ref) => {
   const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
 
-  return <ScreenWrapper {...props} ref={ref} />;
+  return (
+    <ScreenWrapper
+      {...(EDGE_TO_EDGE ? transformEdgeToEdgeProps(props) : props)}
+      ref={ref}
+    />
+  );
 });
 
 Screen.displayName = 'Screen';

src/components/ScreenStackHeaderConfig.tsx

@@ -18,6 +18,7 @@ import {
 // Native components
 import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
 import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
+import { EDGE_TO_EDGE } from './helpers/edge-to-edge';
 
 export const ScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
@@ -30,6 +31,7 @@ export const ScreenStackHeaderConfig = React.forwardRef<
   <ScreenStackHeaderConfigNativeComponent
     {...props}
     ref={ref}
+    topInsetEnabled={EDGE_TO_EDGE ? true : props.topInsetEnabled}
     style={styles.headerConfig}
     pointerEvents="box-none"
   />

src/components/helpers/edge-to-edge.tsx

@@ -0,0 +1,33 @@
+import {
+  controlEdgeToEdgeValues,
+  isEdgeToEdge,
+} from 'react-native-is-edge-to-edge';
+import { ScreenProps } from '../../types';
+
+export const EDGE_TO_EDGE = isEdgeToEdge();
+
+export function transformEdgeToEdgeProps(props: ScreenProps): ScreenProps {
+  const {
+    // Filter out edge-to-edge related props
+    statusBarColor,
+    statusBarTranslucent,
+    navigationBarColor,
+    navigationBarTranslucent,
+    ...rest
+  } = props;
+
+  if (__DEV__) {
+    controlEdgeToEdgeValues({
+      statusBarColor,
+      statusBarTranslucent,
+      navigationBarColor,
+      navigationBarTranslucent,
+    });
+  }
+
+  return {
+    ...rest,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+  };
+}