How to hide the bottom tab bar navigator on a specific screen?

Question

I am using react navigation version 4. My goal is to hide the tab bar navigator only on the done screen. neither

tabBarStyle: { display: "none" }

nor

tabBarVisible: false

work.

My navigator looks like this:


const navigator = createSwitchNavigator({
  resolveAuth: ResolveAuthScreen,
  default: createBottomTabNavigator({
    unAuthenticatedFeed: UnAuthenticatedFeedScreen,
    camera: UnavailableScreen,
    signupFlow: createStackNavigator({
    selectAuthentication: SelectAuthenticationScreen,
    login: LoginScreen,
    signup: SignupScreen,
    forgotPw: ForgotPasswordScreen,
    storageChoice: StorageChoiceScreen,
    validateSeedPhrase: validateSeedPhraseScreen,
    done: {
      screen: DoneScreen,
      navigationOptions:{
        headerShown: false,
        tabBarStyle: { display: "none" },
        tabBarVisible: false
      }
    }
      })
    }),
  mainFlow: createBottomTabNavigator({
    feed: FeedScreen,
    camera: CameraScreen,
    profile: ProfileScreen,
    }),
})

does anyone know why this could be the case? thanks for any advice!

score 0 · Accepted Answer · answered Mar 17 '22 at 09:13

I solved it with:

signupFlow.navigationOptions = ({navigation}) =>{
  let tabBarVisible = true;
  let routeName = navigation.state.routes[navigation.state.index].routeName
  if ( routeName == 'done' ) {
      tabBarVisible = false
  }
  return {
      tabBarVisible,
  }
}

const navigator = createSwitchNavigator({
  resolveAuth: ResolveAuthScreen,
  default: createBottomTabNavigator({
    unAuthenticatedFeed: UnAuthenticatedFeedScreen,
    camera: UnavailableScreen,
    signupFlow: signupFlow
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state
        let iconName
        if (routeName === 'unAuthenticatedFeed') {
          iconName = focused ? 'home' : 'home'
          return <Feather name={iconName} size={25} color={tintColor} />
        }
        else if (routeName === 'camera') {
          iconName = focused ? 'camera' : 'camera'
          return <Feather name={iconName} size={25} color={tintColor} />
        }
        else if (routeName === 'signupFlow') {
          iconName = focused ? 'login' : 'login'
          return <Entypo name={iconName} size={25} color={tintColor} />
        }
      },
    }),
    tabBarOptions: {
      activeTintColor: 'blue',
      inactiveTintColor: 'gray',
      showLabel: false
    },
})}

How to hide the bottom tab bar navigator on a specific screen?

1 Answers1