tabBarVisible property for BottomNavigationTab

[joeljerushan]

💬 Question

This how i structure my navigation file, i want to hide TabBar visibility on ProductPages is there any way to do that. i have tried tabBarVisible which is mentioned here that's never helped me :( can anyone help me please?

  <Stack.Navigator screenOptions={{ headerShown: false, }} >
    <Stack.Screen name="Home">{(props) => <HomeScreen  {...props}/>}</Stack.Screen>
    <Stack.Screen name="Product">{(props) => <ProductPages  {...props} />}</Stack.Screen>
    <Stack.Screen name="Modal">{(props) => <ModalPages  {...props}/>}</Stack.Screen>
  </Stack.Navigator>
);

const ProductPages = () => (
  <Stack.Navigator>
    <Stack.Screen name="Single" options={{ headerShown: false }}>
         {(props) => <ProductScreen  {...props}/>}
    </Stack.Screen>
  </Stack.Navigator>
);

const BottomTabBar = ({ navigation, state }) => (
    <BottomNavigation
      selectedIndex={state.index}
      onSelect={index => navigation.navigate(state.routeNames[index])}>
      <BottomNavigationTab title='HOME'/>
      <BottomNavigationTab title='CATEGORY'/>
      <BottomNavigationTab title='ABOUT'/>
    </BottomNavigation>
);

const TabNavigator = () => (
    <Navigator tabBar={props => <BottomTabBar {...props} />}>
      <Screen name='Home' component={HomePages}/>
      <Screen name='Category' component={CategoryPages} />
      <Screen name='About' component={HomePages}/>
    </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <TabNavigator/>
  </NavigationContainer>
);

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.0.0
@ui-kitten/components	^5.0.0

[artyorsh]

Hi @joeljerushan. Thanks for your question. It's a quite common behavior, so I decided to create a Gist for that, you may see it by the link below.

The BottomNavigation component doesn't react itself on the props passed though the navigation. However, you may use an option prop to control the params passed to a specific route and handle that in your custom TabBar.

See the example.