React-native-paper: Hiding BottomNavigation Bar

Created on 25 Apr 2019  路  4Comments  路  Source: callstack/react-native-paper

How to hide the BottomNavigation Bar for a particular screen??

Stale question

Most helpful comment

I figured out a work-around to get desired result.
By adding a negative marginBottom in barStyle prop everytime we need to hide it, controlled using a global state (redux)

Ex. <BottomNavigation barStyle={this.props.hideBottomDock ? {marginBottom: -bottomDockHeight} : null}

All 4 comments

I do not know if this is what you are looking for, but I made this snack with a code to hide the tab bar when changing the screen, i just render null instead of the tab bar when changing the state and use the onIndexChange to choose in which screen to hide.
https://snack.expo.io/ryKGEhgkH

The bottomTabNavigator does something like this here

Hello 馃憢, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

Not stale. Is there no other way to hide it? There is an option to hide it when the keyboard is open, can we achieve this with a prop too?

I figured out a work-around to get desired result.
By adding a negative marginBottom in barStyle prop everytime we need to hide it, controlled using a global state (redux)

Ex. <BottomNavigation barStyle={this.props.hideBottomDock ? {marginBottom: -bottomDockHeight} : null}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

talaikis picture talaikis  路  3Comments

sm2017 picture sm2017  路  4Comments

zxccvvv picture zxccvvv  路  4Comments

ButuzGOL picture ButuzGOL  路  3Comments

satya164 picture satya164  路  4Comments