React Navigation how to hide tabbar from inside stack navigation : <p>I have the following stack navigation and screens:</p>

<pre><code>export const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Categories: CategoriesScreen,
    Products: ProductsScreen,
    ProductDetails: ProductDetailsScreen,
})
</code></pre>

<p>I want to hide tabs only in ProductDetailsScreen</p>

<pre><code>export const hideTabBarComponents = [
    'ProductDetails',
]

export const MainTabs = createBottomTabNavigator(
    {
        Home: HomeStack,
        Favorite: FavoriteScreen,
        Account: AccountScreen,
        Help: HelpScreen,
        Events: EventsScreen
    },
    {
        navigationOptions: ({ navigation }) =&gt; ({

            tabBarIcon: ({ focused, tintColor }) =&gt; {
                ...
            },
            tabBarLabel: ({ focused, tintColor }) =&gt; {
                ...
            },

            tabBarVisible: ! hideTabBarComponents.includes(navigation.state.routeName)

        }),
    }
);
</code></pre>

<p>The problem that can't pass any options to Tab navigation from Stack Navigation</p>

<p><strong>Not all of the stack screens only one of them</strong> </p>
