I have app.js in which:
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name='Home' component={Home} />
</Tab.Navigator >
</NavigationContainer>
)
}
I display the bottom tabs, but I see the navigation at the top that shows "Home" as with StackNavigator. I want there to be no true field
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
showLabel: false, // add this line to hide tab label
}}
>
<Tab.Screen name='Home' component={Home} />
</Tab.Navigator >
</NavigationContainer>
)
}
It was necessary to add for tabs.screen options = {{headerShown: false}}
You should have to display null the label like as below. Add false to label in main tab navigator, so all pages remains same as not appearing the label.
add tabBarOptions={{showLabel: false}} in Tab.Navigator
<Tab.Navigator tabBarOptions={{showLabel: false}}>
Here is the official reference link: https://reactnavigation.org/docs/tab-based-navigation/