Develop Reference

React Navigation Nested Tab.Navigator - Show InitialRoute not in Tabs

Using React-Navigation in my app, I want the initialRoute to be the "Home" component with the BottomTabNavigator shown. But I do not want Home to be one of the tabs. Adding initialRouteName="Home" shows Home as the initial route but does not show the tabs. Without initialRoute I get the tabs but not the Home Screen as the initial.
I have a nested React Navigation set up like this:
const MyTabs = () =>{
return (
<Tab.Navigator>
<Tab.Screen name="About" component={AboutStack} />
<Tab.Screen name="Setting" component={SettingStack} />
</Tab.Navigator>
);
}
const MyStack = () => {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Tabs" component={MyTabs} />
<Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>
);
}
This seems like it should be relatively simple to implement, but I've searched far and wide for another similar question and I've tried a number of different nesting setups to no avail.
Running: "#react-navigation/stack": "^6.0.7", or "latest"
Here is a snack of the full test code: https://snack.expo.dev/#dezpo/nestednavigator_homepage_notintab
Any help greatly appreciated.

You can set the initial route in the MyStack navigator to the Home screen with the initialRouteName prop:
const MyStack = () => {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Tabs" component={MyTabs} />
<Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>
);
}
Then, in the HomeStack component, you can navigate to the Tabs screen within the Home component:
const HomeStack = ({ navigation }) => {
return (
<View>
<Text>Home Screen</Text>
<Button
title="Go to Tabs"
onPress={() => navigation.navigate("Tabs")}
/>
</View>
);
};
This way, the Home component will be the initial route and when the user clicks the "Go to Tabs" button, the Tabs screen with the Tab.Navigator will be displayed.

Actually I got this sorted... couldn't have been easier
tabBarItemStyle: { display: "none" }
🤦‍♂️
so my final navigators looked like this with "Home" as one of my BottomTabs
const MyTabs = () =>{
return (
<Tab.Navigator >
<Tab.Screen name="Home" component={HomeStack}
options={{
tabBarItemStyle: { display: "none" },
}}/>
<Tab.Screen name="About" component={AboutStack} />
<Tab.Screen name="Setting" component={SettingStack} />
</Tab.Navigator>
);
}
const MyStack = () => {
return (
<Stack.Navigator initialRouteName="Home"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Tabs" component={MyTabs} />
</Stack.Navigator>
);
}
Updated Snack
Seems like there is probably a better solution out there but this does the trick for now.

How to use Stack and Tab navigation at same time

Hello I am new to react native and particullary react navigation.
I am stuck on one easy thing, use the tab navigator and the stack navigator at the same time.
I am able to use one at a time but not both at the same time. I didn't fully understood the react navigation doc.
Here is what I am doing :
My navigation file : at first my stack Navigator :
const Stack = createStackNavigator()
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Profile" component={Profile}/>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="MachinesList" component={MachinesList}/>
<Stack.Screen name="Size" component={Size}/>
<Stack.Screen name="Weight" component={Weight}/>
</Stack.Navigator>
</NavigationContainer>
)
}
and then my tab navigator :
const Tab = createBottomTabNavigator()
export function TabNavigator(){
return(
<Tab.Navigator>
<Tab.Screen name='Profile' component={Profile}/>
<Tab.Screen name='Home' component={Home}/>
<Tab.Screen name='MachinesList' component={MachinesList}/>
</Tab.Navigator>
)
}
And here is how I try to put my navigation in my App.js :
return (
<Provider store={store}>
<MyStack />
</Provider>

You need to define which screens are located in which tabs. Currently, you have three tabs that hold screens that are all located on the same stack.
Usually, this works as follows.
Define a tab navigator with n tabs
Define n stacks
Assign each stack to the corresponding tab
Assign the screens to their stacks
In your case, this looks as follows.
const Tab = createBottomTabNavigator()
export function TabNavigator() {
return (
<Tab.Navigator>
<Tab.Screen name='Profile' component={ProfileStack}/>
<Tab.Screen name='Home' component={HomeStack}/>
<Tab.Screen name='MachinesList' component={MachineListStack}/>
</Tab.Navigator>
)
}
The HomeStack then looks as follows.
const Stack = createStackNavigator()
const HomeStack = () => {
return (
<Stack.Navigator initialRoutName="HomeScreen">
<Stack.Screen name="HomeScreen" component={HomeScreen} />
// all other screens located inside the stack of the tab Home
</Stack.Navigator>
)
}
Do the same for all other stacks. Now, you have three tabs with three stacks. You can nest as many screens inside each stack as you like.
In your main application, you then initialize the TabNavigator.
export default function App() {
return (
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
);
}

You need to add your TabNavigator as a Stack.Screen within Stack.Navigator.
const Stack = createStackNavigator()
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Profile" component={TabNavigator}/>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="MachinesList" component={MachinesList}/>
<Stack.Screen name="Size" component={Size}/>
<Stack.Screen name="Weight" component={Weight}/>
</Stack.Navigator>
</NavigationContainer>
)
}
You can see now that Profile Stack.Screen are using TabNavigator.

Trying to create a React Navigation Drawer with custom content

I am trying to create a React Navigation drawer with custom content (I want to put profile information, probably not any links). I am having a ton of trouble doing so.
Here's my basic stack/drawer:
const Drawer = createDrawerNavigator();
function DrawerNav() {
return (
<ScrollView>
<DrawerItems {...props} />
<Text>Test Content</Text>
</ScrollView>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{
headerShown: false
}} />
<Stack.Screen name="Detail" component={Detail} />
<Stack.Screen name="Chat" component={Chat} />
<Stack.Screen name="Leagues" component={Leagues} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Home" component={Home} options={{
headerRight: (navigation) => (
<TouchableOpacity onPress={(navigation) => navigation.dispatch(DrawerActions.toggleDrawer())}>
<EvilIcons name="navicon" size={50} color="black" />
</TouchableOpacity>
),
headerLeft: () => (
null
),
}} />
<Stack.Screen name="CommForm" component={CommForm} />
</Stack.Navigator>
</NavigationContainer>
);
}
All I want, literally all I want, is a sidebar that I can toggle by pressing the <TouchableOpacity> button above with custom content inside of it.
I am able to do this with React Native Side Menu, but it seems like if I am using React Navigation, I should learn how to do it with this library, however it seems very difficult to do what I am trying to do.
How do I create a sidebar with custom content with React Navigation? I primarily want to use Stack navigation.

I would do something like this:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem label="..." />
// ...
</DrawerContentScrollView>
);
}
function StackNavigator({navigation}) {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{
headerRight: () => (
<Button title="press" onPress={() => navigation.toggleDrawer()} />
),
}}
/>
// Your other screens...
</Stack.Navigator>
);
}
function DrawerNavigator({navigation, route}) {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Stack" component={StackNavigator} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
);
};
So you can set the drawer navigation to be your main navigator and your stack navigation to be a screen of the drawer navigation. This way you can toggle the drawer without first navigating to it.
For creating custom drawer content you can pass a component to the drawerContent on the drawer navigator.
If you're going to use DrawerContentScrollView and/or DrawerItem like I've done in this example, be sure to import it from '#react-navigation/drawer'; .
Look at the documentation for more information https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.

Nesting StackNavigator inside BottomTabNavigator react-navigation v5

Going through my first React Native project, using react-navigation v5, and struggling to work out the logic behind multiple navigators in one.
I've tried to copy the 'auth-flow' setup from here, but I have some extra requirements, where once signed in, it should render a bottomTab navigator with three items (create, lists, account) where the second screen lists, renders a list of items where clicking one opens a new screen for the details (where I'd imagine these two screens would be a stack?)
pseudo routes:
- home
- lists
- details <- nested in the tab navigator screen
- account
current setup:
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>
{isSignedIn ? (
<Tab.Navigator>
<Tab.Screen name='List' component={TrackListScreen} />
<Tab.Screen name='Create' component={TrackCreateScreen} />
<Tab.Screen name='Account' component={AccountScreen} />
</Tab.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen name='Signup' component={SignupScreen} />
<Stack.Screen name='Signin' component={SigninScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
</SafeAreaProvider>
);
}

What you'll want to do is make the List tab it's own stack navigator. So you'll have this
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>
{isSignedIn ? (
<Tab.Navigator initialRouteName='TrackListNavigator'>
<Tab.Screen name='TrackListNavigator' component={TrackListNavigator} />
<Tab.Screen name='Create' component={TrackCreateScreen} />
<Tab.Screen name='Account' component={AccountScreen} />
</Tab.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen name='Signup' component={SignupScreen} />
<Stack.Screen name='Signin' component={SigninScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
</SafeAreaProvider>
);
}
So then instead of the tab navigating to TrackListScreen, it instead navigates to a new stack navigator that contains that screen like this
export default function TrackListNavigator() {
return (
<Stack.Navigator initialRouteName='TrackListScreen'>
<Stack.Screen name='TrackListScreen' component={TrackListScreen} />
</Stack.Navigator>
)
}
This way, when you are not signed in you will only have access to the Signup and Signin screens. Then once signed in you will land on the TrackListScreen with access to any other Stack.Screen you add to the TrackListNavigator.

You would in this scenario create an extra holding component, such as TrackListHome. TrackListHome would be a component that is specifically a StackNavigator, with the initialRouteName being your TrackListScreen, and Details would be another Screen in your StackNavigator. Then you would be able to call
props.navigation.navigate("TrackListDetail")
Your StackNavigator might look like this (TrackListHome)
return (
<Stack.Navigator initialRouteName={'TrackListScreen'}>
<Stack.Screen name='TrackListScreen' component={TrackListScreen} />
<Stack.Screen name='TrackListDetail' component={TrackListDetail} />
</Stack.Navigator>)
Then inside of your TabNavigation you would use this TrackListHome component.

React Navigation V5 Hide Bottom Tabs

I would like to be able to hide the tabs on a screen using React Native Navigation v5.
I've been reading the documentation but it doesn't seem like they've updated this for v5 and it refers to the < v4 way of doing things.
here is my code:
import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
function ProfileStackScreen() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Home" component={Home} />
</ProfileStack.Navigator>
)
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Things I have tried:
Accessing the options of the function and hiding that way.
Passing tabBarVisible as a prop to the Screen.
What I am asking for is, what is the correct way of hiding tabs on screens in React Navigation v5.

tabbarvisible-option-is-no-longer-present in react navigation v5 upwards. You can achieve the same behavior by specifying
tabBarStyle: { display: 'none' } in options of the screen you want to hide bottom tab
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen options={{tabBarStyle:{display:'none'}}} name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Let's suppose that you want to hide tabs when you are entering Settings. Just add navigation in your constructor:
function SettingsStackScreen({ navigation }) {
navigation.setOptions({ tabBarVisible: false })
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
This code should work.

You will have to restructure your navigation by having your Tab Navigator nested in the Stack Navigator. Following the details here hiding-tabbar-in-screens
This way it's still also possible to have a Stack Navigator nested in yourTab Navigator. SettingsStack
With this when the user is on the Setting screen and also the Update detail screen, the tab bar is visible but on the Profile screen, the tab bar is not.
import Home from './components/Home';
import Settings from './components/Settings';
import UpdateDetails from './components/UpdateDetails';
import Profile from './components/Profile';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const StackSettings = createStackNavigator();
const Tab = createBottomTabNavigator();
function SettingsStack() {
return (
<StackSettings.Navigator>
<StackSettings.Screen name="Settings" component={Settings} />
<StackSettings.Screen name="UpdateDetails" component={UpdateDetails} />
</StackSettings.Navigator>
)
}
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={SettingsStack} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
}

I had this issue and couldn't find solution even in official docs ( the issues in github resulted to broken links) after some trials and research I found a solution for me To make it happen from the bottom tab navigator component
<Tab.Navigator tabBarOptions={stackOptions} >
<Tab.Screen
name={"market"}
component={MarketNavigator}
options={navigation => ({
// tabBarIcon: ,
tabBarVisible: navigation.route.state.index > 0 ? false : true
})}
/>
</Tab.Navigator>
Hope it helps someone!

2022 Answer - How to hide Bottom Tabs in React Navigation V6
Step 1 - Hiding tab bar in specific screens
Sometimes we may want to hide the tab bar in specific screens in a native stack navigator nested in a tab navigator. Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.
Step 2 - Solution to Hide Bottom Tabs
Now if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and Settings screens, we'll need to change the navigation structure. The way to achieve this is to nest the BottomTabs() as the first route of the stack.
Move your Tabs into a separate function BottomTabs()...
Other routes should be in the main App.js return function...
Make "BottomTabs" the First Route as seen below under the App() return function...
<Stack.Screen name="BottomTabs" component={BottomTabs} />
function BottomTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="BottomTabs" component={BottomTabs} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
After re-organizing the navigation structure, now if you navigate to the Profile or Settings screens, the bottom tab bar won't be visible over the screen anymore.

You have API reference exactly for this.
Read: tabBarVisible

The above answer will help you to remove the bottom tabs from the root navigation.If you want to remove bottom tabs from a specific screen like Home Screen or Settings Screen you need to change navigation options dynamically.
For changing navigation options dynamically you will need the concept of:
React.Context
useNavigationState
Context - will dynamically change the navigationOption value i.e. either to hide the bottom Tabs or not. We can choose MobX or Redux to do the same.
UseNavigationState - will help context to know at which screen the user is.
We need to create Context in a separate .js file so that Home.js and Settings.js can access it in all the other screens.
import * as React from 'react';
import { View, Text } from 'react-native'
import { NavigationContainer, useNavigationState, useRoute } from '#react-navigation/native';
const Tab = createBottomTabNavigator();
const Context = React.createContext();
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
import { TouchableOpacity } from 'react-native-gesture-handler';
const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function SettingsScreen({ navigation }) {
return (
<View>
<Text>
Setting
</Text>
</View>
);
}
function Home({ navigation }) {
const rout = useNavigationState(state => state);
const { screen, setScreen } = React.useContext(Context);
setScreen(rout.index);
return (
<View>
<TouchableOpacity
onPress={() => {
navigation.navigate("Settings");
}}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
function SettingsStackScreen({ navigation }) {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
function ProfileStackScreen({ navigation }) {
const { screen, setScreen } = React.useContext(Context)
if (screen == 0) {
navigation.setOptions({ tabBarVisible: true })
} else {
navigation.setOptions({ tabBarVisible: false })
}
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Home" component={Home} />
<ProfileStack.Screen name="Settings" component={SettingsScreen} />
</ProfileStack.Navigator>
)
}
function BottomNav({ navigation }) {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
);
}
export default function App() {
const [screen, setScreen] = React.useState(0);
return (
<Context.Provider value={{ screen, setScreen }}>
<NavigationContainer>
<BottomNav />
</NavigationContainer>
</Context.Provider>
);
}
Here the screen is a flag that checks the index of the navigation and removes the bottom navigation for all the screen stacked in ProfileStackScreen.

Use You Looking for Nested Screen Visible then Tab Bar Options Should be hide than Use this Simple Condition in StackNavigator Funtions.
function HistoryStack({navigation, route}) {
if (route.state.index === 0) {
navigation.setOptions({tabBarVisible: true});
} else {
navigation.setOptions({tabBarVisible: false});
}
return (
<Historys.Navigator initialRouteName={Routes.History}>
<Historys.Screen
name={Routes.History}
component={History}
options={{headerShown: false}}
/>
<Historys.Screen
name={Routes.HistoryDetails}
component={HistoryDetails}
options={{headerShown: false}}
/>
</Historys.Navigator>
);
}

import { createBottomTabNavigator } from "#react-navigation/bottom-tabs"; // version 5.6.1
import { createStackNavigator } from "#react-navigation/stack"; // version 5.6.2
From my inspection navigation.routes.state.index will have a value when you navigation/push to a second screen so I create a function
const shouldTabBarVisible = (navigation) => {
try {
return navigation.route.state.index < 1;
} catch (e) {
return true;
}
};
and call it in BottomTab.Screen options
<BottomTab.Navigator
initialRouteName='Home'
tabBarOptions={{
activeTintColor: "#1F2B64",
showLabel: false,
}}
>
<BottomTab.Screen
name='Home'
component={HomeNavigator}
options={(navigation) => ({
tabBarIcon: ({ color }) => <TabBarIcon name='home' color={color} />,
tabBarVisible: shouldTabBarVisible(navigation),
})}
/>
</BottomTab.Navigator>

just follow as what the documentation suggests: https://reactnavigation.org/docs/hiding-tabbar-in-screens/