Alert overlay doesn't fit the entire screen when the navigation bar is hidden (Android Only)

[Moncef-Boukhecheba]

Hey, I'm new to react native and I'm using this library for all the alerts in my project, and so far it's working great.

However when enabling full screen mode in Android (I just hide the navigation bar using this library https://github.com/thebylito/react-native-navigation-bar-color), the overlay surrounding the alert stops at the non-existant bottom navigation bar.

I couldn't get the expo snack to work since the navigation color library probably uses a lot of native code, but the code works in a normal react-native-app.

Here's the link for the code if you want to reproduce the issue. https://snack.expo.io/@moncefbkb/navigation-bar-awesome-alert

Note (What i tried) :

Referring to this SO question https://stackoverflow.com/questions/46126521/android-navigation-bar-height-react-native, it seems like there's a difference between getting the dimensions from the "screen" and for the "window", as, on Android, the former includes the height of the navigation bar and the status bar.

I thought that this was causing the issue so I changed the library's "styles.js" file to get the height from the "screen" instead of getting it from the "window", but nothing changed.

I even tried to set the height to an absurd amount (1000) and it still stops before the navigation bar. I then tried to do the same thing with a simple view (Giving it a background color, and giving it a height of 1000), and it covered all the screen just fine.

So it seems likely that the problem doesn't come from the other library, and this is why i'm posting the issue here.

[rishabhbhatia]

@Princeofgame I'll have a look. Downgrading to v1.3.2 should solve it temporarily. Pass alertContainerStyle and overlayStyle props with height & width from Dimensions.get('screen'), give it a try.

Meanwhile, I'll look at it, seems to be a react modal related issue.

[Moncef-Boukhecheba]

Hey, thank you for the quick reply (and sorry for this late one, I wanted to test your solution before replying).

Thank you for the temporary fix, downgrading the library seems to make things working perfectly now !

I tried the same code on the new version and it didn't work (I switched versions twice), so I guess the new version adds something that creates this problem, which is probably that Modal Component that wraps everything.

So I tried experimenting with the Modal component to help out a bit, but i didn't manage to find anything conclusive (I really don't understand styling).

Nonetheless, here's a basic code snippet for the modal component where i try to create an overlay and it takes the entire space. Hope it helps : https://snack.expo.io/@moncefbkb/modal-test

[rishabhbhatia]

@Princeofgame I looked at the link you shared. Try importing Modal from react-native instead of a third-party library. Remove import { Modal } from 'react-native-paper';. I tried it in my local before, it leaves some space at the bottom. View works just fine.

For some reason the hideNavigationBar from react-native-navigation-bar-color is giving me Device: null is not an object (evaluating 'o.hideNavigationBar') error on snack.

[Moncef-Boukhecheba]

@rishabhbhatia Oh you're right, sorry i didn't notice the mistake in the import, i used the auto import function from VSCode... I'll try the new code in a moment.

I have the error too, like i said in the first post, my guess is that the library is probably using some Android native code which snack doesn't support... ? (To be honest, I'm also very confused... xD)

Anyway, it seems that you can make it work by testing on a real Android device.

Edit : You're right ! I tried with the modal from React Native and it's stopping at the navigation bar.

[rishabhbhatia]

Yeah I know, it's a little annoying since the Modal doesn't support the styling prop. I'll try to figure out the best solution meanwhile stick with v1.3.2.

[Moncef-Boukhecheba]

I will, thanks again for the help :D

[ghost]

Hi, everyone, Thanks for the great plugin first. I am using this alert thing, it works perfectly on my device. But it's overlay cuts the navigation bottom and header on other android device, I attached screenshot for a visual help.

Hope you guys fix this error and improve to a better one. Thanks in advance.

[rishabhbhatia]

@toplongguodev what is alert and android version you're using? also, specify the navigation library/other device details, will have a look.

[ghost]

Thanks for your reply. Xiaomi redmi note 7 android 10

"@react-navigation/bottom-tabs": "^5.7.3", "@react-navigation/drawer": "^5.5.0", "@react-navigation/native": "^5.1.6", "@react-navigation/stack": "^5.2.11",

These are details. Thanks

[rishabhbhatia]

@toplongguodev awesome alert version?

[jahn-brito]

@toplongguodev I solved this problem using: overlayStyle={{height: '100%'}}

[AliMohammad93]

I changed StatusBar opacity when alert is open and this solution worked for me

`

    <AwesomeAlert
        show={showAlert}
        customView={customView}
    />

    <StatusBar
        backgroundColor={rgbaColor(0,0,0,showAlert ? 0.4 : 0)}
    />

`

[chuthuong2004]

Add props

 modalProps={{
        statusBarTranslucent: true,
      }}