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.

Error: Couldn't find a navigation object. Is your component inside NavigationContainer?

I went through the other answers to this question but none has worked for me i'm trying to do a button in the LoginScreen that navigates to the RegisterScreen but get the error
This is what my App.js returns
<NavigationContainer>
<StatusBar hidden />
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name ="Login" component={LoginScreen}/>
<Stack.Screen name ="Register" component={RegisterScreen}/>
</Stack.Navigator>
<Tab.Navigator
activeColor="black"
inactiveColor="gray"
initialRouteName="Home"
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: "",
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={33} />
),
}}
/>
<Tab.Screen
name="Calendrier"
component={Calendrier}
options={{
tabBarLabel: "",
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons
name="calendar-month-outline"
color={color}
size={30}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
And this is where is want to use the navigation.navigate but get the error (line 2)
export default function LoginScreen () {
const navigation = useNavigation();
return(
<View style={{flex:1, backgroundColor:'mistyrose'}}>
<View style={{justifyContent:'flex-start', alignItems:"flex-end"}}>
<Button color ='mistyrose' onPress={()=> navigation.navigate("Register")} title='abaabab'></Button>
</View>
<ConnectButton/>
</View>
I tried using export default fuction LoginScreen({navigation}){
//code... } but it didn't work either, I checked my imports and i'm pretty sure they're the good ones. Please Help!!

How can I override tabBarOptions and change the color of the navigation icons?

How can I change the colors of the icons that are active by removing the 'tabBarOptions' part and everything still works?
Going through an app I made some time ago in a tutorial, I came across this warning in the console:
Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead.
Place the following in 'screenOptions' in your code to keep current behavior:
Reading the information that React Navigation offers about Bottom Tabs Navigation, I have managed to solve the error in the following way.
<Tab.Screen
name="restaurants"
component={RestaurantsStack}
options={{
title: "Restaurants",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={color}
size={size}
/>
),
}}
/>
However, in my application, I want to change the color of the buttons when we navigate through the screens, the icon of the screen we are on is shown in a different color, and at the time the code was the one shown below, and it is That's why it shows me the warning.
The problem is that I don't know how I can correct this
This is the full code of my file
const Tab = createBottomTabNavigator()
export default function Navigation() {
const screenOptions = (route, color) => {
let iconName
switch (route.name) {
case "tiendas":
iconName = "compass-outline"
break;
case "favorites":
iconName = "heart-outline"
break;
case "top-tiendas":
iconName = "star-outline"
break;
case "search":
iconName = "magnify"
break;
case "account":
iconName = "home-outline"
break;
}
return (
<Icon
type="material-community"
name={iconName}
size={22}
color={color}
/>
)
}
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="tiendas"
tabBarOptions={{
inactiveTintColor: "#f48b28",
activeTintColor: "#633204"
}}
screenOptions={({ route }) => ({
tabBarIcon: ({ color }) => screenOptions(route, color)
})}
>
<Tab.Screen
name="tiendas"
component={tiendasStack}
options={{
title: "Tiendas",
headerShown: false
}}
/>
<Tab.Screen
name="favorites"
component={FavoritesStack}
options={{
title: "Favoritos",
headerShown: false
}}
/>
<Tab.Screen
name="top-tiendas"
component={ToptiendasStack}
options={{
title: "Top 10",
headerShown: false,
}}
/>
<Tab.Screen
name="search"
component={SearchStack}
options={{
title: "Buscar",
headerShown: false,
}}
/>
<Tab.Screen
name="account"
component={AccountStack}
options={{
title: "Cuenta",
headerShown: false,
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
As I already said, I could solve it in the following way, but I don't know how to add the desired color and how to make it change when the icon is active:
This removes the warning, but I can't change the colors:
How can I change the colors of the icons that are active by removing the 'tabBarOptions' part and everything still works?
const Tab = createBottomTabNavigator()
export default function Navigation() {
// Navigation buttons
return (
<NavigationContainer>
<Tab.Navigator >
<Tab.Screen
name="tiendas"
component={TiendasStack}
options={{
title: "Tiendas",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="favorites"
component={FavoritesStack}
options={{
title: "Favoritos",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="heart-outline"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="top-tiendas"
component={TopTiendasStack}
options={{
title: "Top 5",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="star-outline"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="search"
component={SearchStack}
options={{
title: "Buscar",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="account"
component={AccountStack}
options={{
title: "Cuenta",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}

if you want to change only Icons color, not text color, then you can use 'focused' in tabBarIcon.
tabBarIcon: ({focused, color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={focused ? focusedColor : color}
size={size}
/>
)

Add tabBarInactiveTintColor and tabBarActiveTintColor options to screenOptions like that:
<Tab.Navigator
initialRouteName="tiendas"
screenOptions={({ route }) => ({
tabBarInactiveTintColor: "#f48b28",
tabBarActiveTintColor: "#633204"
})}
>...</Tab.Navigator>

React Native Navigation Drawer Problem ('navigation.openDrawer' is undefined))

Hi guys i'm new to react native. I want to use drawer navigation with menu button. But actually i don't understand react navigation very well probably. When i press button for openDrawer i'm getting error like this;
TypeError: navigation.openDrawer is not a function. (In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)
This is My Snack Example ; https://snack.expo.io/#vubes/drawer-check
Here is useful part of my code. Maybe you can understand my problem.
Thanks in advance to anyone who can help.
function DovizStack({navigation}) {
return (
<Stack.Navigator
initialRouteName="Döviz"
screenOptions={{
headerStyle: { backgroundColor: "#1D1D1D" },
headerTintColor: "#fff",
headerTitleStyle: { fontWeight: "bold" },
}}
>
<Stack.Screen
name="Doviz"
component={Doviz}
options={{
title: "Döviz",
headerTitleAlign: "center",
headerLeft: () => (<TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
<MaterialCommunityIcons name="menu" color={"white"} size={20} />
</TouchableOpacity>),
}}
/>
<Stack.Screen
name="dovizBuyDetails"
component={dovizBuyDetails}
options={{ title: "Alış", headerTitleAlign: "center" }}
/>
<Stack.Screen
name="dovizSellDetails"
component={dovizSellDetails}
options={{ title: "Satış", headerTitleAlign: "center" }}
/>
</Stack.Navigator>
);
}
I have 5 stack like this. After that comes the myTab.
drawerStack ;
function DrawerStack() {
return(
<Drawer.Navigator initialRouteName="Menu" drawerPosition= "right" >
<Drawer.Screen name="stack" component={stack} />
<Drawer.Screen name="Doviz" component={DovizStack}/>
<Drawer.Screen name="Altın" component={AltinStack} />
</Drawer.Navigator>
)
}
and default stack ;
export default function stack() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{ headerShown: false }}
name="Giriş"
component={LandingStack}
/>
<Stack.Screen
options={{ headerShown: false }}
name="drawer"
component={myTab}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Actually i can run drawer with landingscreen(login page,register) but i don't want to display without login

navigation in not defined in your scope.
use options as function and receive navigation see here.
your code should look like this:
<Stack.Screen
options={({ navigation }) => ({ //receive navigation here
//navigation is defined now you can use it
headerLeft: () => (
<TouchableOpacity
style={{paddingLeft:20}}
onPress={()=> navigation.openDrawer()}>
<MaterialCommunityIcons name="menu" color={"white"} size={20} />
</TouchableOpacity>),
})}
/>
EDIT :
see full example(open drawer menu from nested stack navigation) try snack here
import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile Screen</Text>
</View>
);
}
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
function DovizStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Profile"
options={({ navigation }) => ({ //receive navigation here
headerLeft: () => (
<TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
<Text>open</Text>
</TouchableOpacity>),
})
}
component={ProfileScreen} />
</Stack.Navigator>
);
}
function DrawerStack() {
return(
<Drawer.Navigator initialRouteName="Doviz">
<Drawer.Screen name="Doviz" component={DovizStack}/>
</Drawer.Navigator>
)
}
export default function App() {
return (
<NavigationContainer>
<DrawerStack/>
</NavigationContainer>
);
}

React Native tab navigator nested in stack navigator

I'm relatively new to React Native and am struggling with screens. I've gone through the nested navigation documentation (https://reactnavigation.org/docs/nesting-navigators/) which helped me setup the initial nav setup i have, but im having some issues.
I'm attempting to setup the app so it has the initial screen as a "Select User" which has no tab navigation. After selecting the user, you are redirected to a another screen which has tab navigation. I currently have it working however I am unable to access any route/props/params after the initial screen.
I've had to manually import navigation with import { useNavigation } from "#react-navigation/native"; and even though I'm providing params in the Navigation.push, trying to access {route} in my screens states that route is undefined.
My setup of the screens looks similar to below:
const Tab = createBottomTabNavigator();
const WelcomeStack = createStackNavigator();
const HomeStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const Stack = createStackNavigator();
const WelcomeStackScreen = () => (
<WelcomeStack.Navigator>
<WelcomeStack.Screen
name="Welcome"
component={WelcomeScreen}
options={{ headerShown: false }}
/>
<WelcomeStack.Screen
name="SignUp"
component={SignUpScreen}
options={{ headerShown: false }}
/>
</WelcomeStack.Navigator>
);
const HomeStackScreen = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen
name="Search"
component={SearchResultScreen}
options={({ navigation }) => ({
headerLeft: () => (
<Ionicons
name={"arrow-back"}
size={30}
color={colours.text}
style={{ paddingLeft: 15 }}
onPress={() => {
navigation.goBack();
}}
/>
),
})}
/>
<HomeStack.Screen
name="Select"
component={SelectScreen}
options={({ navigation, route }) => ({
title: route.params.name,
headerLeft: () => (
<Ionicons
name={"arrow-back"}
size={30}
color={colours.text}
style={{ paddingLeft: 15 }}
onPress={() => {
navigation.goBack();
}}
/>
),
})}
/>
<HomeStack.Screen name="Read" component={ReaderScreen} />
</HomeStack.Navigator>
);
};
function SettingsScreen() {
return (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
<Text>TBD</Text>
</View>
);
}
const SettingsStackScreen = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
);
const TabNavigator = ({ route }) => (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
switch (route.name) {
case "Home":
iconName = focused ? "home" : "home-outline";
break;
case "Settings":
iconName = focused ? "list" : "list-outline";
break;
default:
break;
}
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: "tomato",
inactiveTintColor: "gray",
}}
>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsScreen}/>
</Tab.Navigator>
);
export default function App() {
return (
<NavigationContainer theme={navThemeOverride}>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={WelcomeStackScreen} />
<Stack.Screen
name="TabNavigator"
component={TabNavigator}
options={{ headerShown: false }}
navigationOptions={{ gesturesEnabled: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Below is a snippet from the Welcome screen navigation
navigation.push("TabNavigator", {
screen: "Home",
params: {
userId: userId,
},
});

Your Home screen you're trying to navigate to from your parent-tab-navigator ... is also a StackNavigator ... and you wanna navigate to Select screen I guess ... so there's an extra level needed for your navigation to work...
navigation.navigate('TabNavigator', {
screen: 'Home', // <--- StackNavigator
params: {
screen: 'Select', // <-- nested inside HomeStack
params: {
title: 'Your custom title for Select screen here ...',
},
},
});
Plus +
There's a double definition for route in your Tab navigator
const TabNavigator = ({ route }) => ( //<--- here
<Tab.Navigator
screenOptions={({ route }) => ({ // <- and here
Instead
function TabNavigator() {
return <Tab.Navigator screenOptions={({ route }) => ({})>{/* ...Tabs... */}</Tab.Navigator>;
}