CODEWITHSUNDEEP
androidreact-native
Steed-Asprey
Steed-Asprey

Reputation: 2191

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

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:

Open modal with gap

Upvotes: 17

Views: 10679

Answers (2)

Anas
Anas

Reputation: 1827

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

Upvotes: 16

Rajesh Bhartia
Rajesh Bhartia

Reputation: 758

I had tried to use native Android code to hide the StatusBar for a single component it works in other component but when I used it in modal, it just didn't work.

Then, I tried to remove the modal view and use react-navigation's StackNavigator to navigate to a specific path and handle the back button using BackHandler component and it worked.

Upvotes: 0

Related Questions