Hide androidNavigationBar messing with ImageBackground

[saschaluebeck]

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%') }}>
                </ImageBackground>
            </View>
        );
    }

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,
Sascha

[saschaluebeck]

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.

[saschaluebeck]

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.