feat: detect edge-to-edge and bypass some props

package.json

@@ -68,6 +68,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.6",
     "warn-once": "^0.1.0"
   },
   "peerDependencies": {

src/components/Screen.tsx

@@ -2,6 +2,10 @@
 
 import React from 'react';
 import { Animated, View, Platform } from 'react-native';
+import {
+  controlEdgeToEdgeValues,
+  isEdgeToEdge,
+} from 'react-native-is-edge-to-edge';
 
 import TransitionProgressContext from '../TransitionProgressContext';
 import DelayedFreeze from './helpers/DelayedFreeze';
@@ -49,6 +53,8 @@ interface ViewConfig extends View {
   };
 }
 
+const EDGE_TO_EDGE = isEdgeToEdge();
+
 // This value must be kept in sync with native side.
 const SHEET_FIT_TO_CONTENTS = [-1];
 const SHEET_COMPAT_LARGE = [1.0];
@@ -177,9 +183,25 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
     const {
       enabled = screensEnabled(),
       freezeOnBlur = freezeEnabled(),
+
+      // edge-to-edge related props
+      navigationBarColor,
+      navigationBarTranslucent,
+      statusBarColor,
+      statusBarTranslucent,
+
       ...rest
     } = props;
 
+    if (__DEV__) {
+      controlEdgeToEdgeValues({
+        navigationBarColor,
+        navigationBarTranslucent,
+        statusBarColor,
+        statusBarTranslucent,
+      });
+    }
+
     // To maintain default behavior of formSheet stack presentation style and to have reasonable
     // defaults for new medium-detent iOS API we need to set defaults here
     const {
@@ -275,6 +297,10 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
         <DelayedFreeze freeze={freezeOnBlur && activityState === 0}>
           <AnimatedScreen
             {...props}
+            navigationBarColor={EDGE_TO_EDGE ? undefined : navigationBarColor}
+            navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
+            statusBarColor={EDGE_TO_EDGE ? undefined : statusBarColor}
+            statusBarTranslucent={EDGE_TO_EDGE || statusBarTranslucent}
             /**
              * This messy override is to conform NativeProps used by codegen and
              * our Public API. To see reasoning go to this PR:

yarn.lock

@@ -12035,6 +12035,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-is-edge-to-edge@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "react-native-is-edge-to-edge@npm:1.1.6"
+  peerDependencies:
+    react: ">=18.2.0"
+    react-native: ">=0.73.0"
+  checksum: 10c0/5690e521e8310d21643634a8d0dacd524e19b76695f347b26f649fcac156a7a901fd6daef7f78482381a41e8445f4552f40ade13790fdf112fab15b0f54dbabd
+  languageName: node
+  linkType: hard
+
 "react-native-reanimated@npm:3.9.0-nightly-20240402-12717cdb5":
   version: 3.9.0-nightly-20240402-12717cdb5
   resolution: "react-native-reanimated@npm:3.9.0-nightly-20240402-12717cdb5"
@@ -12104,6 +12114,7 @@ __metadata:
     react-native: "npm:0.72.4"
     react-native-builder-bob: "npm:^0.23.2"
     react-native-gesture-handler: "npm:^2.13.3"
+    react-native-is-edge-to-edge: "npm:^1.1.6"
     react-native-reanimated: "npm:3.9.0-nightly-20240402-12717cdb5"
     react-native-safe-area-context: "npm:^4.8.1"
     react-native-windows: "npm:^0.64.8"