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

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';
@@ -165,7 +167,7 @@
     React.useImperativeHandle(ref, () => innerRef.current!, []);
     const prevActivityState = usePrevious(props.activityState);
 
     const setRef = (ref: ViewConfig) => {
       innerRef.current = ref;
       props.onComponentRef?.(ref);
     };
@@ -242,7 +244,7 @@
         gestureResponseDistance,
         onGestureCancel,
         style,
         ...props
       } = rest;
 
       if (active !== undefined && activityState === undefined) {
@@ -264,7 +266,7 @@
         }
       }
 
       const handleRef = (ref: ViewConfig) => {
         // Workaround is necessary to prevent React Native from hiding frozen screens.
         // See this PR: https://github.com/grahammendick/navigation/pull/860
         if (ref?.viewConfig?.validAttributes?.style) {
@@ -367,7 +369,7 @@
         style,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onComponentRef,
         ...props
       } = rest;
 
       if (active !== undefined && activityState === undefined) {
@@ -375,7 +377,7 @@
       }
       return (
         <Animated.View
           style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
           ref={setRef}
           {...props}
         />
@@ -391,7 +393,12 @@
 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,10 +18,11 @@
 // 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 }>
 > = ScreenStackHeaderSubviewNativeComponent as any;
 
 export const ScreenStackHeaderConfig = React.forwardRef<
   View,
@@ -30,6 +31,7 @@
   <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,
+  };
+}