CODEWITHSUNDEEP
react-nativereact-navigation
duronic
duronic

Reputation: 167

How to hide specific tabs from createBottomTabNavigator

I need to hide the login tab from the tab navigator but i'm not sure how to. I tried using createStackNavigator to load the login screen, then one login pass to the home screen with the bottom tab navigator but I was left with a return arrow on all the screens which I don't want.

  Login: {
    screen: LoginScreen,
    navigationOptions: { tabBarVisible: false },
    tabBarOptions: { showLabel: false, showIcon: false },
  },
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="ios-home" size={28} color={tintColor} />
      ),
      header: null,
    },
  },
  Calories: {
    screen: CalorieScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <MaterialIcon name="food" size={38} color={tintColor} />
      ),
      header: null,
    },
  },
  Booking: {
    screen: BookingScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <FontIcon name="dumbbell" size={24} color={tintColor} />
      ),
      header: null,
    },
  },
  Weight: {
    screen: WeightScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <FontIcon name="weight" size={26} color={tintColor} />
      ),
      header: null,
    },
  },
  Calendar: {
    screen: CalendarScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <MaterialIcon name="calendar-month" size={28} color={tintColor} />
      ),
      header: null,
    },
  },
})

Upvotes: 2

Views: 281

Answers (1)

B. Mohammad
B. Mohammad

Reputation: 2464

You should use a createSwitchNavigator to block user to get back to login screen after successful login. Here an example of the implementation from react-navigation docs:

https://reactnavigation.org/docs/en/auth-flow.html

Upvotes: 1

Related Questions