React Native 'Modal' Component Not Covering Entire Screen on Android when using Full Screen Theme

Question

The title says it all. I've edited the styles.xml file (/projectname/android/app/src/res/values/styles.xml) to contain the following:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

This code successfully makes the app fullscreen, removing the Android status bar. However, if I launch a React Native 'Modal' component the modal only extends as far to the top as where the edge of the status bar would have been, leaving a gap the size of a status bar. How would I modify the modal to extend all the way to the top?

Here's a screenshot of the open modal with the gap:

Answer 1

you can apply statusBarTranslucent={true} to the react native <Modal> component like example below

<Modal statusBarTranslucent={true}>
//your modal content
<Modal />

knowing that, the statusBarTranslucent={true} only available for android