How to hide specific tabs in bottom navigation

[waquidvp]

A little more detail on what you want to achieve would be helpful, your question is very vague at the moment.

[akhilesh08061]

I have created bottom navigation using react native material bottom navigation,and I have used <tab/> to construct bottom navigation menus.i have added 4 bottom navigation menu tabs. But now I want to show bottom navigation menus based on the user logged in, so for example. If normal user logged he could only see two menu options while super user should see all four menu. But currently I don't know how to show or hide these specific bottom navigation menus.

[waquidvp]

One approach is to render the Bottom Navigation conditionally according to the state: if the user is signed in. You can have a render function called renderBottomNavigation() that returns two different <BottomNavigation> components according to the state { signedIn: true} or { signedIn: false }. Then change the state accordingly, and the Bottom Navigation will render with the correct tabs for the state.

Example:

// imports

class App extends Component {
  state = {
      signedIn=false 
  }

  renderBottomNavigation() {
      if (this.state.signedIn === true) {
          return (
              // Return the bottom navigation with the tabs for when the user is logged in/super user
          )
      } else {
          return (
              // Return the bottom navigation with the tabs for when the user isn't logged in/normal user
          )
      }
  }

  render() {
      return (
          <View style={{ flex: 1 }}>
              { this.renderBottomNavigation() }
          </View>
      )
  }
}

I have created a fully working example with Expo Snack here: https://snack.expo.io/rkKXUrf7f

[akhilesh08061]

It is actually a nice approach.but i want to show/hide tabs based on props.so how that could be possible?

Example:

`<BottomNavigation labelColor="white" rippleColor="white" style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }} shifting={false}

<Tab style={{display:this.props.shouldshowMovies}} //how can we do this based on state barBackgroundColor="#37474F" label="Movies & TV" icon={} /> `

since display property not worked in tabs, this is not going to work.so how would i achieve this.

i also tried following approach as well but it is not working as well

example:

`<BottomNavigation labelColor="white" rippleColor="white" style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }} shifting={false}

{ this.props.shouldshowMovies? (<Tab barBackgroundColor="#37474F" label="Movies & TV" icon={} />:null} `

[timomeh]

You can replace this.state.signedIn in @waquidvp's example with your this.props.shouldshowMovies to render a completely new BottomNavigation based on your props.

I'm not sure if the BottomNavigation can handle null as child, what you're using in your ternary

[akhilesh08061]

But what if i want to hide specific tabs rather than creating new bottom navigation?

[timomeh]

I tested it and can confirm that you can't use null as Child in the BottomNavigation, thus you can't simply hide a specific Tab. You need to make something like @waquidvp's solution.

[timomeh]

@akhilesh101 Is this issue solved then?

[akhilesh08061]

it is a good solution but i have wanted a more better solution.anyways thank you.i am closing the issue now.