From c35a419e5d2eca4fe9cd0939df085088fa88423b Mon Sep 17 00:00:00 2001 From: Pavol Fulop Date: Thu, 10 Oct 2019 22:12:32 -0700 Subject: [PATCH] Make android modal to appear underneath translucent StatusBar (#26706) Summary: As described in https://github.com/facebook/react-native/issues/26559 , the modal is not appearing underneath translucent StatusBar so you can see previous view underneath the StatusBar instead. As a solution you can now provide prop to set the modal to have translucent StatusBar and therefore the content will appear underneath. I tried to reuse layout flags that are possibly set if you use StatusBar component but sadly values in them do not reflect the props set by StatusBar component. ## Changelog [Android] [added] - Added statusBarTranslucent prop to Modal component, to indicate if StatusBar should appear translucent. Pull Request resolved: https://github.com/facebook/react-native/pull/26706 Test Plan: ### With StatusBar translucent ![image](https://user-images.githubusercontent.com/3984319/66131336-8bfdf200-e5f3-11e9-940e-c6bb3f67ea6f.png) ``` ``` ### Without ![image](https://user-images.githubusercontent.com/3984319/66131403-a768fd00-e5f3-11e9-9814-ff7592b4ceac.png) ``` ``` Differential Revision: D17872874 Pulled By: mdvacca fbshipit-source-id: 8c4b48a75cddf86c4429b62d0c63313e7a2dd1b8 --- Libraries/Modal/Modal.js | 11 +++++++++++ Libraries/Modal/RCTModalHostViewNativeComponent.js | 8 ++++++++ .../viewmanagers/ModalHostViewManagerDelegate.java | 3 +++ .../viewmanagers/ModalHostViewManagerInterface.java | 1 + .../react/views/modal/ReactModalHostManager.java | 7 +++++++ .../react/views/modal/ReactModalHostView.java | 12 +++++++++++- 6 files changed, 41 insertions(+), 1 deletion(-) diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index ceebd820729..c442309fffb 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -68,10 +68,20 @@ export type Props = $ReadOnly<{| */ transparent?: ?boolean, + /** + * The `statusBarTranslucent` prop determines whether your modal should go under + * the system statusbar. + * + * See https://facebook.github.io/react-native/docs/modal.html#transparent + */ + statusBarTranslucent?: ?boolean, + /** * The `hardwareAccelerated` prop controls whether to force hardware * acceleration for the underlying window. * + * This prop works inly on Android. + * * See https://facebook.github.io/react-native/docs/modal.html#hardwareaccelerated */ hardwareAccelerated?: ?boolean, @@ -234,6 +244,7 @@ class Modal extends React.Component { hardwareAccelerated={this.props.hardwareAccelerated} onRequestClose={this.props.onRequestClose} onShow={this.props.onShow} + statusBarTranslucent={this.props.statusBarTranslucent} identifier={this._identifier} style={styles.modal} onStartShouldSetResponder={this._shouldSetResponder} diff --git a/Libraries/Modal/RCTModalHostViewNativeComponent.js b/Libraries/Modal/RCTModalHostViewNativeComponent.js index 46856033cb8..74c733bf499 100644 --- a/Libraries/Modal/RCTModalHostViewNativeComponent.js +++ b/Libraries/Modal/RCTModalHostViewNativeComponent.js @@ -52,6 +52,14 @@ type NativeProps = $ReadOnly<{| */ transparent?: WithDefault, + /** + * The `statusBarTranslucent` prop determines whether your modal should go under + * the system statusbar. + * + * See https://facebook.github.io/react-native/docs/modal.html#statusBarTranslucent + */ + statusBarTranslucent?: WithDefault, + /** * The `hardwareAccelerated` prop controls whether to force hardware * acceleration for the underlying window. diff --git a/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/ModalHostViewManagerDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/ModalHostViewManagerDelegate.java index f528ad94e54..978224f30f7 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/ModalHostViewManagerDelegate.java +++ b/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/ModalHostViewManagerDelegate.java @@ -32,6 +32,9 @@ public class ModalHostViewManagerDelegate { void setAnimationType(T view, @Nullable String value); void setPresentationStyle(T view, @Nullable String value); void setTransparent(T view, boolean value); + void setStatusBarTranslucent(T view, boolean value); void setHardwareAccelerated(T view, boolean value); void setAnimated(T view, boolean value); void setSupportedOrientations(T view, @Nullable ReadableArray value); diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java index aec03d0f805..fcc94f04098 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java @@ -78,6 +78,13 @@ public class ReactModalHostManager extends ViewGroupManager view.setTransparent(transparent); } + @Override + @ReactProp(name = "statusBarTranslucent") + public void setStatusBarTranslucent(ReactModalHostView view, boolean statusBarTranslucent) { + view.setStatusBarTranslucent(statusBarTranslucent); + } + + @Override @ReactProp(name = "hardwareAccelerated") public void setHardwareAccelerated(ReactModalHostView view, boolean hardwareAccelerated) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java b/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java index 2bfe9b71c7f..2c6ebda0825 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java @@ -66,6 +66,7 @@ public class ReactModalHostView extends ViewGroup implements LifecycleEventListe private DialogRootViewGroup mHostView; private @Nullable Dialog mDialog; private boolean mTransparent; + private boolean mStatusBarTranslucent; private String mAnimationType; private boolean mHardwareAccelerated; // Set this flag to true if changing a particular property on the view requires a new Dialog to @@ -167,6 +168,11 @@ public class ReactModalHostView extends ViewGroup implements LifecycleEventListe mTransparent = transparent; } + protected void setStatusBarTranslucent(boolean statusBarTranslucent) { + mStatusBarTranslucent = statusBarTranslucent; + mPropertyRequiresNewDialog = true; + } + protected void setAnimationType(String animationType) { mAnimationType = animationType; mPropertyRequiresNewDialog = true; @@ -306,7 +312,11 @@ public class ReactModalHostView extends ViewGroup implements LifecycleEventListe private View getContentView() { FrameLayout frameLayout = new FrameLayout(getContext()); frameLayout.addView(mHostView); - frameLayout.setFitsSystemWindows(true); + if (mStatusBarTranslucent) { + frameLayout.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); + } else { + frameLayout.setFitsSystemWindows(true); + } return frameLayout; }