Hide androidNavigationBar messing with ImageBackground

Hi there,

first post here, hope this is the right section.

I’m using “androidNavigationBar.visible = sticky-immersive” to hide the navbar on Android. When testing with Android Emulator on a Nexus 9 I’ve got the problem, that my ImageBackground does not reach full height. The space the navbar is using (when visible) is left out.

render() {
        return (
            <View style={{ height: hp('100%')}}>
                <ImageBackground source={bg} style={{ resizeMode: 'cover', height: hp('100%'), width: wp('100%') }}>

The Image is height enough and on other devices with hardware button (and no overlay navbar) I don’t have this problem.

Anyone got an idea what is wrong here? Using Expo 37.0.0

Thanks and best regards,

With some more testing, I think this is more React Native related. The “react-native-responsive-screen” seems to have a problem to match 100% to the full screen, when navigation is not visible.

When I set “hp(‘110%’)” to the ImageBackground instead of 100%, the full screen is filled.

Maybe I just help me out with this workaround. If somebody have a better idea, I would appreciate that.

I’ve found out the problem is only by react-native-responsive-screen. When I remove the hp(‘110%’) from the background-image-container and don’ set width and height at all, the image is rendered correct and the buttons behave as expected.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.