Revert "Update Modal implementation"

zoontek · zoontek · commit a0b7709e08fe · 2026-07-01T10:11:56.000+02:00
diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js
@@ -187,8 +187,7 @@ export type ModalPropsAndroid = {
   hardwareAccelerated?: ?boolean,
 
   /**
-   * Whether the modal should go under the system status bar. Must be set
-   * together with `navigationBarTranslucent` to draw the modal edge-to-edge.
+   * Whether the modal should go under the system statusbar.
    *
    * @deprecated Has no effect on its own on API level 35+ (Android 15+) due to
    * edge-to-edge enforcement.
@@ -200,8 +199,8 @@ export type ModalPropsAndroid = {
   statusBarTranslucent?: ?boolean,
 
   /**
-   * Whether the modal should go under the system navigation bar. Must be set
-   * together with `statusBarTranslucent` to draw the modal edge-to-edge.
+   * Whether the modal should go under the system navigation bar.
+   * `statusBarTranslucent` also needs to be `true`.
    *
    * @deprecated Has no effect on its own on API level 35+ (Android 15+) due to
    * edge-to-edge enforcement.
@@ -232,11 +231,11 @@ function confirmProps(props: ModalProps) {
       );
     }
     if (
-      (props.statusBarTranslucent === true) !==
-      (props.navigationBarTranslucent === true)
+      props.navigationBarTranslucent === true &&
+      props.statusBarTranslucent !== true
     ) {
       console.warn(
-        '`statusBarTranslucent` and `navigationBarTranslucent` must both be enabled to draw the Modal edge-to-edge. Enabling only one of them has no effect.',
+        'Modal with translucent navigation bar and without translucent status bar is not supported.',
       );
     }
 
@@ -385,10 +384,8 @@ class Modal extends React.Component<ModalProps, ModalState> {
         onDismiss={onDismiss}
         ref={this.props.modalRef}
         visible={this.props.visible}
-        edgeToEdge={
-          this.props.statusBarTranslucent === true &&
-          this.props.navigationBarTranslucent === true
-        }
+        statusBarTranslucent={this.props.statusBarTranslucent}
+        navigationBarTranslucent={this.props.navigationBarTranslucent}
         identifier={this._identifier}
         style={styles.modal}
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
diff --git a/packages/react-native/Libraries/Modal/__tests__/Modal-itest.js b/packages/react-native/Libraries/Modal/__tests__/Modal-itest.js
@@ -149,63 +149,73 @@ describe('<Modal>', () => {
         );
       });
     });
-    describe('edgeToEdge', () => {
-      it('sets edgeToEdge="true" when both statusBarTranslucent and navigationBarTranslucent are true', () => {
+    describe('statusBarTranslucent', () => {
+      it('renders a Modal with statusBarTranslucent="true"', () => {
         Fantom.runTask(() => {
-          root.render(
-            <Modal
-              statusBarTranslucent={true}
-              navigationBarTranslucent={true}
-            />,
-          );
+          root.render(<Modal statusBarTranslucent={true} />);
         });
 
-        expect(root.getRenderedOutput({props: ['edgeToEdge']}).toJSX()).toEqual(
-          <rn-modalHostView edgeToEdge="true">
+        expect(
+          root.getRenderedOutput({props: ['statusBarTranslucent']}).toJSX(),
+        ).toEqual(
+          <rn-modalHostView statusBarTranslucent="true">
             <rn-view />
           </rn-modalHostView>,
         );
       });
-      it('does not set edgeToEdge when only statusBarTranslucent is true', () => {
-        // Enabling only one of statusBarTranslucent / navigationBarTranslucent
-        // has no effect and emits a warning.
-        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-
+      it('renders a Modal with statusBarTranslucent="false"', () => {
         Fantom.runTask(() => {
-          root.render(<Modal statusBarTranslucent={true} />);
+          root.render(<Modal statusBarTranslucent={false} />);
         });
 
-        expect(root.getRenderedOutput({props: ['edgeToEdge']}).toJSX()).toEqual(
+        expect(
+          root.getRenderedOutput({props: ['statusBarTranslucent']}).toJSX(),
+        ).toEqual(
           <rn-modalHostView>
             <rn-view />
           </rn-modalHostView>,
         );
-        expect(warn).toHaveBeenCalled();
-        warn.mockRestore();
       });
-      it('does not set edgeToEdge when only navigationBarTranslucent is true', () => {
-        // Enabling only one of statusBarTranslucent / navigationBarTranslucent
-        // has no effect and emits a warning.
-        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-
+    });
+    describe('navigationBarTranslucent', () => {
+      it('renders a Modal with navigationBarTranslucent="true" and statusBarTranslucent="true"', () => {
         Fantom.runTask(() => {
-          root.render(<Modal navigationBarTranslucent={true} />);
+          // navigationBarTranslucent=true with statusBarTranslucent=false is not supported
+          // and it emits a warning.
+          root.render(
+            <Modal
+              navigationBarTranslucent={true}
+              statusBarTranslucent={true}
+            />,
+          );
         });
 
-        expect(root.getRenderedOutput({props: ['edgeToEdge']}).toJSX()).toEqual(
-          <rn-modalHostView>
+        expect(
+          root
+            .getRenderedOutput({
+              props: ['navigationBarTranslucent', 'statusBarTranslucent'],
+            })
+            .toJSX(),
+        ).toEqual(
+          <rn-modalHostView
+            navigationBarTranslucent="true"
+            statusBarTranslucent="true">
             <rn-view />
           </rn-modalHostView>,
         );
-        expect(warn).toHaveBeenCalled();
-        warn.mockRestore();
       });
-      it('does not set edgeToEdge when neither is true', () => {
+      it('renders a Modal with navigationBarTranslucent="false"', () => {
         Fantom.runTask(() => {
-          root.render(<Modal />);
+          root.render(<Modal navigationBarTranslucent={false} />);
         });
 
-        expect(root.getRenderedOutput({props: ['edgeToEdge']}).toJSX()).toEqual(
+        expect(
+          root
+            .getRenderedOutput({
+              props: ['navigationBarTranslucent', 'statusBarTranslucent'],
+            })
+            .toJSX(),
+        ).toEqual(
           <rn-modalHostView>
             <rn-view />
           </rn-modalHostView>,
diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api
@@ -5098,10 +5098,11 @@ public abstract interface class com/facebook/react/viewmanagers/ModalHostViewMan
 	public abstract fun setAllowSwipeDismissal (Landroid/view/View;Z)V
 	public abstract fun setAnimated (Landroid/view/View;Z)V
 	public abstract fun setAnimationType (Landroid/view/View;Ljava/lang/String;)V
-	public abstract fun setEdgeToEdge (Landroid/view/View;Z)V
 	public abstract fun setHardwareAccelerated (Landroid/view/View;Z)V
 	public abstract fun setIdentifier (Landroid/view/View;I)V
+	public abstract fun setNavigationBarTranslucent (Landroid/view/View;Z)V
 	public abstract fun setPresentationStyle (Landroid/view/View;Ljava/lang/String;)V
+	public abstract fun setStatusBarTranslucent (Landroid/view/View;Z)V
 	public abstract fun setSupportedOrientations (Landroid/view/View;Lcom/facebook/react/bridge/ReadableArray;)V
 	public abstract fun setTransparent (Landroid/view/View;Z)V
 	public abstract fun setVisible (Landroid/view/View;Z)V
@@ -5378,12 +5379,13 @@ public final class com/facebook/react/views/modal/ReactModalHostView : android/v
 	public final fun getAnimationType ()Ljava/lang/String;
 	public fun getChildAt (I)Landroid/view/View;
 	public fun getChildCount ()I
-	public final fun getEdgeToEdge ()Z
 	public final fun getEventDispatcher ()Lcom/facebook/react/uimanager/events/EventDispatcher;
 	public final fun getHardwareAccelerated ()Z
+	public final fun getNavigationBarTranslucent ()Z
 	public final fun getOnRequestCloseListener ()Lcom/facebook/react/views/modal/ReactModalHostView$OnRequestCloseListener;
 	public final fun getOnShowListener ()Landroid/content/DialogInterface$OnShowListener;
 	public final fun getStateWrapper ()Lcom/facebook/react/uimanager/StateWrapper;
+	public final fun getStatusBarTranslucent ()Z
 	public final fun getTransparent ()Z
 	public final fun onDropInstance ()V
 	public fun onHostDestroy ()V
@@ -5393,13 +5395,14 @@ public final class com/facebook/react/views/modal/ReactModalHostView : android/v
 	public fun removeViewAt (I)V
 	public final fun setAnimationType (Ljava/lang/String;)V
 	public final fun setDialogRootViewGroupTestId (Ljava/lang/String;)V
-	public final fun setEdgeToEdge (Z)V
 	public final fun setEventDispatcher (Lcom/facebook/react/uimanager/events/EventDispatcher;)V
 	public final fun setHardwareAccelerated (Z)V
 	public fun setId (I)V
+	public final fun setNavigationBarTranslucent (Z)V
 	public final fun setOnRequestCloseListener (Lcom/facebook/react/views/modal/ReactModalHostView$OnRequestCloseListener;)V
 	public final fun setOnShowListener (Landroid/content/DialogInterface$OnShowListener;)V
 	public final fun setStateWrapper (Lcom/facebook/react/uimanager/StateWrapper;)V
+	public final fun setStatusBarTranslucent (Z)V
 	public final fun setTransparent (Z)V
 	public fun shouldDelayChildPressedState ()Z
 	public final fun showOrUpdate ()V
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.kt
@@ -49,9 +49,14 @@ internal class ReactModalHostManager :
     view.transparent = value
   }
 
-  @ReactProp(name = "edgeToEdge")
-  override fun setEdgeToEdge(view: ReactModalHostView, value: Boolean) {
-    view.edgeToEdge = value
+  @ReactProp(name = "statusBarTranslucent")
+  override fun setStatusBarTranslucent(view: ReactModalHostView, value: Boolean) {
+    view.statusBarTranslucent = value
+  }
+
+  @ReactProp(name = "navigationBarTranslucent")
+  override fun setNavigationBarTranslucent(view: ReactModalHostView, value: Boolean) {
+    view.navigationBarTranslucent = value
   }
 
   @ReactProp(name = "hardwareAccelerated")
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt
@@ -54,6 +54,7 @@ import com.facebook.react.views.view.ReactViewGroup
 import com.facebook.react.views.view.disableEdgeToEdge
 import com.facebook.react.views.view.enableEdgeToEdge
 import com.facebook.react.views.view.isEdgeToEdgeFeatureFlagOn
+import com.facebook.react.views.view.setStatusBarTranslucency
 
 /**
  * ReactModalHostView is a view that sits in the view hierarchy representing a Modal view.
@@ -79,7 +80,14 @@ public class ReactModalHostView(context: ThemedReactContext) :
   public var onShowListener: DialogInterface.OnShowListener? = null
   public var onRequestCloseListener: OnRequestCloseListener? = null
 
-  public var edgeToEdge: Boolean = false
+  public var statusBarTranslucent: Boolean = false
+    get() = field || isEdgeToEdgeFeatureFlagOn
+    set(value) {
+      field = value
+      createNewDialog = createNewDialog || !isEdgeToEdgeFeatureFlagOn
+    }
+
+  public var navigationBarTranslucent: Boolean = false
     get() = field || isEdgeToEdgeFeatureFlagOn
     set(value) {
       field = value
@@ -352,7 +360,7 @@ public class ReactModalHostView(context: ThemedReactContext) :
     get() =
         FrameLayout(context).apply {
           addView(dialogRootViewGroup)
-          if (!edgeToEdge) {
+          if (!statusBarTranslucent) {
             // this is needed to prevent content hiding behind systems bars < API 30
             this.fitsSystemWindows = true
           }
@@ -384,10 +392,12 @@ public class ReactModalHostView(context: ThemedReactContext) :
         }
       }
 
-      if (edgeToEdge) {
+      // Navigation bar cannot be translucent without status bar being translucent too
+      if (navigationBarTranslucent) {
         dialogWindow.enableEdgeToEdge()
       } else {
         dialogWindow.disableEdgeToEdge()
+        dialogWindow.setStatusBarTranslucency(statusBarTranslucent)
       }
 
       if (transparent) {
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/WindowUtil.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/WindowUtil.kt
@@ -15,6 +15,7 @@ import android.view.Window
 import android.view.WindowInsetsController
 import android.view.WindowManager
 import androidx.annotation.VisibleForTesting
+import androidx.core.view.ViewCompat
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
@@ -67,6 +68,26 @@ internal fun updateEdgeToEdgeFeatureFlag(activity: Activity) {
   }
 }
 
+@Suppress("DEPRECATION")
+internal fun Window.setStatusBarTranslucency(isTranslucent: Boolean) {
+  // If the status bar is translucent hook into the window insets calculations
+  // and consume all the top insets so no padding will be added under the status bar.
+  if (isTranslucent) {
+    decorView.setOnApplyWindowInsetsListener { v, insets ->
+      val defaultInsets = v.onApplyWindowInsets(insets)
+      defaultInsets.replaceSystemWindowInsets(
+          defaultInsets.systemWindowInsetLeft,
+          0,
+          defaultInsets.systemWindowInsetRight,
+          defaultInsets.systemWindowInsetBottom,
+      )
+    }
+  } else {
+    decorView.setOnApplyWindowInsetsListener(null)
+  }
+  ViewCompat.requestApplyInsets(decorView)
+}
+
 internal fun Window.setStatusBarVisibility(isHidden: Boolean) {
   if (isHidden) {
     this.statusBarHide()
diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent.js
@@ -51,10 +51,20 @@ type RCTModalHostViewNativeProps = Readonly<{
   transparent?: WithDefault<boolean, false>,
 
   /**
-   * The `edgeToEdge` prop determines whether your modal should go under the
-   * system bars (status bar and navigation bar).
+   * The `statusBarTranslucent` prop determines whether your modal should go under
+   * the system statusbar.
+   *
+   * See https://reactnative.dev/docs/modal#statusBarTranslucent
+   */
+  statusBarTranslucent?: WithDefault<boolean, false>,
+
+  /**
+   * The `navigationBarTranslucent` prop determines whether your modal should go under
+   * the system navigationbar.
+   *
+   * See https://reactnative.dev/docs/modal#navigationBarTranslucent
    */
-  edgeToEdge?: WithDefault<boolean, false>,
+  navigationBarTranslucent?: WithDefault<boolean, false>,
 
   /**
    * The `hardwareAccelerated` prop controls whether to force hardware
