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)

``` <Modal statusBarTranslucent>```
### Without

![image](https://user-images.githubusercontent.com/3984319/66131403-a768fd00-e5f3-11e9-9814-ff7592b4ceac.png)

``` <Modal>```

Differential Revision: D17872874

Pulled By: mdvacca

fbshipit-source-id: 8c4b48a75cddf86c4429b62d0c63313e7a2dd1b8
This commit is contained in:
Pavol Fulop
2019-10-10 22:12:32 -07:00
committed by Facebook Github Bot
parent 7c20dc65d9
commit c35a419e5d
6 changed files with 41 additions and 1 deletions
@@ -32,6 +32,9 @@ public class ModalHostViewManagerDelegate<T extends View, U extends BaseViewMana
case "transparent":
mViewManager.setTransparent(view, value == null ? false : (boolean) value);
break;
case "statusBarTranslucent":
mViewManager.setStatusBarTranslucent(view, value == null ? false : (boolean) value);
break;
case "hardwareAccelerated":
mViewManager.setHardwareAccelerated(view, value == null ? false : (boolean) value);
break;
@@ -17,6 +17,7 @@ public interface ModalHostViewManagerInterface<T extends View> {
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);
@@ -78,6 +78,13 @@ public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView>
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) {
@@ -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;
}