the status bar issue of react-native Modal on Android ( RN v0.57.0)

Problem: When use Modal in react-native, the status bar is not included if you make a full-screen mask like a translucent background. I found the below method is able to make the status-bar to be included in.

 

 

forgive my poor English, I'm practicing.

 

what I do is to replace the default Modal implementation on Android as below.

 

1.  make directory like below , and copy code from

 

code in file 'ModifiedReactModalHostManager' and 'ModifiedReactModalHostView' is completely copied from 

 'react-native/com/facebook/react/views/modal/ReactModalHostManager' and

'react-native/com/facebook/react/views/modal/ReactModalHostView'. And replace all 'ReactModalHostView' words with 'ModifiedReactModalHostView' in both files. 

 

 

2. use a self-defined MainReactPackage instead of the default react-native MainReactPackage.

 

public class MyMainReactPackage extends MainReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> list = super.createViewManagers(reactContext);
        for (int i = 0; i < list.size(); i++) {
            if (list.get(i) instanceof ReactModalHostManager) {
                list.remove(i);
                list.add(new ModifiedReactModalHostManager());
                break;
            }
        }
        return list;
    }
}

 

in your ReactApplication class , replace MainReactPackage.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MyMainReactPackage() // previously is MainReactPackage()
    );
}

 

 

 

 as above, replace the ReactModalHostManager with ModifiedReactModalHostManager. Now every Modal in react-native code will use the implementation of ModifiedReactModalHostView rather than the default ReactModalHostView.

 

3. include the status bar of Modal in ModifiedReactModalHostView.

 

replace function `private void updateProperties` with code below.

private void updateProperties() {
    Assertions.assertNotNull(mDialog, "mDialog must exist when we call updateProperties");
    Window window = mDialog.getWindow();

    mDialog.getWindow().setFlags(
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
    );
    Activity currentActivity = getCurrentActivity();
    if (currentActivity != null) {
        FrameLayout content = window.getDecorView().findViewById(android.R.id.content);
        LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) content.getLayoutParams();
        View preContentView = currentActivity.getWindow().findViewById(android.R.id.content);
        if (preContentView != null) {
            layoutParams.height = currentActivity.getWindow().findViewById(android.R.id.content).getHeight();
        }
        content.setLayoutParams(layoutParams);
    }

    if (mTransparent) {
        mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    } else {
        mDialog.getWindow().setDimAmount(0.5f);
        mDialog.getWindow().setFlags(
                WindowManager.LayoutParams.FLAG_DIM_BEHIND,

                WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    }
}

 

 

Then it is OK to build application and test your Modal.

Note that this method is related to your react-native's version, when your rn's version changes, you should also make change to the ModifiedModal to make sure it is suitable.

 

練英語，練英語的，兄弟們別笑，也是方便遇到這個問題的國際友人們嘛。。。