How can I hide bottom animated tabbar navigator? - react-native

Question

I want to hide bottom tabbar on product details page. Bottom tabbar should appear only on home, profile and orders screen, not on product details page and also not on product image details screen.
Below is my code:
I used this animated tabbar
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
here is the code:
const Tabs = AnimatedTabBarNavigator();
const AppNavigator = () => (
<Tabs.Navigator
tabBarOptions={{
activeTintColor: colors.white,
inactiveTintColor: colors.primary,
activeBackgroundColor : "#3f5393",
}}
initialRouteName={"Home"}
appearance={{
tabBarBackground : colors.primary,
topPadding : 10,
horizontalPadding : 10,
dotCornerRadius : 8,
dotSize : 'small'
}}
>
<Tabs.Screen
name="My Orders"
component={MyorderStack}
options={{
tabBarIcon: ({ focused, color, size }) => (
<Image
source={require('../assets/order.png')}
style={{
width : 20,
height : 20
}}
color={ colors.primary}
/>
)
}}
/>
<Tabs.Screen
name="Home"
component={HomeScreenStack}
options={{
tabBarIcon: ({ focused, color, size }) => (
<Image
source={require('../assets/home.png')}
style={{
width : 20,
height : 20
}}
/>
),
headerShown : true
}}
/>
<Tabs.Screen
name="Profile"
component={ProfileStack}
options={{
tabBarIcon: ({ focused, color, size }) => (
<Image
source={require('../assets/profile.png')}
style={{
width : 20,
height : 20
}}
color={focused ? color : colors.primary}
/>
)
}}
appearance ={{
topPadding : 0
}}
/>
</Tabs.Navigator>)
here is my home screen code: (MOBILE is main home screen, MOBILE1 and MOBILE2 are details page where i don't want bottom bar).
const HomeScreenStack = ({navigation,route}) => (
<Stack.Navigator>
<Stack.Screen name="MOBILE" component={ItemScreen} options={{headerTitleAlign: 'center'}} />
<Stack.Screen name="MOBILE1" component={Appdescription} options={{headerTitleAlign:'center'}} />
<Stack.Screen name="MOBILE2" component={ItemImageDetails} options={{headerTitleAlign:'center'}} />
</Stack.Navigator>
)
ItemScreen is the main home screen where the first code is appear homescreen.
Appdescription is the details screen of the product where i don't want to show bottom tab bar.
ItemImageDetails is the details screen from product detail where i also don't want to show bottom tab bar.
Here is the link which module i used for this bottom tab bar:
https://www.npmjs.com/package/react-native-animated-nav-tab-bar

Answer 1

Please try this in pageStack where you are navigating to product detail:
const ProductsStack = createStackNavigator({
ProductsScreen: ProductsScreen,
ProductDetail: {
screen: ProductDetailScreen,
navigationOptions: ({ navigation }) => ({
header: null,
tabBarVisible: true,
headerMode: "screen",
}),
},
NewProduct: NewProductScreen
});
Hope it will work. !!!

Answer 2

I solved it. Keep the
const Tabs = AnimatedTabBarNavigator();
function AppNavigator () {
return (
<Tabs.Navigator
initialRouteName={"Home"}>
<Tabs.Screen name="My Orders" component={MyorderStack} />
<Tabs.Screen name="Home" component={HomeScreenStack} />
<Tabs.Screen name="Profile" component={ProfileStack} />
</Tabs.Navigator>
);
}
const Stack = createStackNavigator();
export default function App({navigation}) {
return (
<Stack.Navigator>
<Stack.Screen name="Page1" component={AppNavigator}
options={{ headerShown: false }} /> //Keep first function name "AppNavigator here and Keep HeaderShown false"
<Stack.Screen name="Page2" component={Page2} /> //other all pages will not show the header
<Stack.Screen name="Page3" component={Page3} /> //other all pages will not show the header
<Stack.Screen name="Page4" component={Page4} /> //other all pages will not show the header
</Stack.Navigator>
);
}