React Navigation how to hide tabbar from inside stack navigation

Question

I have the following stack navigation and screens:

export const HomeStack = createStackNavigator({     Home: HomeScreen,     Categories: CategoriesScreen,     Products: ProductsScreen,     ProductDetails: ProductDetailsScreen, }) 

I want to hide tabs only in ProductDetailsScreen

export const hideTabBarComponents = [     'ProductDetails', ]  export const MainTabs = createBottomTabNavigator(     {         Home: HomeStack,         Favorite: FavoriteScreen,         Account: AccountScreen,         Help: HelpScreen,         Events: EventsScreen     },     {         navigationOptions: ({ navigation }) => ({              tabBarIcon: ({ focused, tintColor }) => {                 ...             },             tabBarLabel: ({ focused, tintColor }) => {                 ...             },              tabBarVisible: ! hideTabBarComponents.includes(navigation.state.routeName)          }),     } ); 

The problem that can't pass any options to Tab navigation from Stack Navigation

Not all of the stack screens only one of them

Answer 1

The following code solved the problem:

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