Design issue on android when the navigation bar is hidden

[XavierLeTohic]

Hello there,

I choosed to hide automatically the navigation bar on my phone, as you can see on the screenshot below the space allocated to the navigation bar are still there. (Android 7.1, Samsung Galaxy S8 Plus)

I tried to make a custom renderItem method and set "paddingBottom" to 0 but it didn't work...

    _renderItem = (props) => {

        const style = {
            backgroundColor: props.backgroundColor,
            paddingTop: props.topSpacer,
            paddingBottom: 0
        }

        return (
            <View style={[styles.mainContent, style]}>
                <Text style={styles.title}>{props.title}</Text>
                <Image source={props.image} style={props.imageStyle} />
                <Text style={styles.text}>{props.text}</Text>
            </View>
        )
    }

Any ideas ?

[Jacse]

The paddingBottom only pushes the content up so it isn't placed underneath the pagination; the background isn't affected. On the face of it, it looks like the mainContent isn't taking up all the space it ought to. Does the same thing happen without a custom render function?

[XavierLeTohic]

Yes the same thing happen without a custom render function :(

[aemdy]

Experiencing the same issue here, just background behind is white in my app and user can't see Skip/Next/Done buttons at all :(

[Jacse]

@XavierLeTohic which library are you using to hide the navigation bar? I'm guessing Dimensions.get('window') is returning the wrong height.

[aemdy]

I am using react-native-navigation

[Jacse]

@aemdy Is yours the same issue with a hidden software navigation bar? If not, I'd be great if you could just open a new issue. If you could post a screenshot that'd be great too.

[Jacse]

@XavierLeTohic okay so what I'll do is I'll move height, width to DefaultSlide.js. In that way you can define the height in a custom renderItem-function by using a library such as react-native-extra-dimensions-android. How does that sound?

[aemdy]

I couldn’t reproduce it on emulator, but have a client’s screenshot. Not sure if it is related to navbar.

[Jacse]

@aemdy definitely looks like it. Did you disable the nav bar as well? How would you feel about the abovementioned fix?

[aemdy]

Yes, I have full screen introduction without a navbar. Sadly, I’m not able to reproduce it on any simulator I have, probably a real Samsung device is needed.

Not sure if proposed fix is ok or not for me as I won’t be able to test if it solves the issue.

[XavierLeTohic]

@Jacse I don't use any library to hide the navbar, it's a feature of Galaxy S8 and Galaxy S8+ (Also with LG G5, probably LG G6 and others devices).

Sorry for the delay, I will try to make find a way to fix it and make a PR.

[aemdy]

Any updates here?

[Jacse]

@aemdy I'm afraid I haven't quite figured out how to reproduce and test this. If you have any ideas please let me know.

[simocheccoli]

Same problem for me.
You can reproduce it with Samsung s8