Develop Reference

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 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>;
}

React navigation V5 header button usage

I have react navigation screen as follows .
<Stack.Screen name="Home" component={HomeScreen} />
I need to navigate another screen using a right header button how can i do this.
I'am using react navigation V5

This might help
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <LogoTitle {...props} />,
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
</Stack.Navigator>
);
}
You can also use screenOptions
screenOptions={({route, navigation}) => ({
headerStyle: {
backgroundColor: '#f4511e',
},
headerRight: () => (
<Button
// only alert is ok, the other is error.
onPress={() => navigation.navigate('Home')}
title="Logout"
color="#fff"
/>
),
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
})}

React Native v5: Cannot receive updated route.params from another screen component using navigation.navigate()

I'm trying to update route.params everytime a screen submits a form that sends data to another screen that shows this submitted data. But it just navigates and route.params remains undefined. Here is my navigation architecture.
Drawer => Tab => Stack (for each tab)
App.js
return (
<>
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props) => <DrawerContent {...props} />}
>
<Drawer.Screen
name="Main"
component={BottomTabScreen}
options={{
title: "Overview",
headerLeft: () => <Icon.Button name="md-menu" size={25} />,
}}
/>
</Drawer.Navigator>
</NavigationContainer>
</>
);
This is the where most of navigation is in MainTabScreen.js. It contains the Tab Navigation Component that is called in App.js. Each Tab Screen is a Stack: Home, Favorites, Profile, Settings.
MainTabScreen.js
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: "#e91e63",
}}
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Favorites"
component={FavoritesStackScreen}
options={{
tabBarLabel: "Favorites",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell" color={color} size={size} />
),
tabBarBadge: 3,
}}
/>
<Tab.Screen
name="Profile"
component={ProfileStackScreen}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Settings"
component={SettingsStackScreen}
options={{
tabBarLabel: "Settings",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="cogs" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
export default BottomTabScreen;
// //HOME
const HomeStackScreen = ({ navigation }) => (
<HomeStack.Navigator
initialRouteName="HomeScreen"
headerMode="screen"
screenOptions={{
headerTintColor: "white",
headerStyle: { backgroundColor: "tomato" },
headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
}}
>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: "Home",
headerLeft: () => (
<Icon.Button
name="md-menu"
backgroundColor="tomato"
onPress={() => navigation.openDrawer()}
size={25}
/>
),
}}
/>
<HomeStack.Screen
name="Explore"
component={ExploreScreen}
options={{
title: "Explore",
headerLeft: () => (
<Icon.Button
name="arrow-back-outline"
backgroundColor="tomato"
onPress={() => navigation.goBack()}
size={25}
/>
),
}}
/>
</HomeStack.Navigator>
);
//Favorites
const FavoritesStackScreen = ({ navigation }) => (
<FavoritesStack.Navigator
initialRouteName="FavoritesScreen"
headerMode="screen"
screenOptions={{
headerTintColor: "white",
headerStyle: { backgroundColor: "tomato" },
headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
}}
>
<FavoritesStack.Screen
name="Favorites"
component={FavoritesScreen}
options={{
title: "Favorites",
headerLeft: () => (
<Icon.Button
name="md-menu"
backgroundColor="tomato"
onPress={() => navigation.openDrawer()}
size={25}
/>
),
}}
/>
</FavoritesStack.Navigator>
);
//Profile
const ProfileStackScreen = ({ navigation, route }) => (
<ProfileStack.Navigator
initialRouteName="ProfileScreen"
headerMode="screen"
screenOptions={{
headerTintColor: "white",
headerStyle: { backgroundColor: "tomato" },
headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
}}
>
<ProfileStack.Screen
name="Profile"
component={ProfileScreen}
options={{
title: "Profile",
headerLeft: () => (
<Icon.Button
name="md-menu"
backgroundColor="tomato"
onPress={() => navigation.openDrawer()}
size={25}
/>
),
}}
/>
</ProfileStack.Navigator>
);
//SETTINGS
const SettingsStackScreen = ({ navigation }) => (
<SettingsStack.Navigator
initialRouteName="HomeScreen"
headerMode="screen"
screenOptions={{
headerTintColor: "white",
headerStyle: { backgroundColor: "tomato" },
headerTitleStyle: { fontFamily: "BalsamiqSans_700Bold", fontSize: 30 },
}}
>
<SettingsStack.Screen
name="Settings"
component={Settings}
options={{
title: "Settings",
}}
/>
</SettingsStack.Navigator>
);
I am trying to get HomeScreen to send data via navigation.navigate to ProfileScreen. I used a modal to create this form
HomeScreen.js
<Modal visible={modalOpen} animationType="slide">
<View style={StyleSheet.modalContent}>
<MaterialIcons
name="close"
size={24}
onPress={() => setModal(false)}
/>
<ImageBackground
style={styles.modalTop}
source={require("../img/modalTop.jpg")}
>
<Text style={styles.modalTopText}>Create.</Text>
<Text style={styles.modalTopText}>Share.</Text>
</ImageBackground>
{/*Button to submit and send data to ProfileScreen*/}
<MaterialIcons
name="add"
size={24}
onPress={() => {
setI((prev) => prev + 1);
navigation.navigate("Profile", recipe);
}}
/>
{/*Name of recipe input */}
<TextInput
value={recipe.name}
onChangeText={(e) => handleChange(e, "name")}
placeholder="Put name of Meal"
/>
{/*Time of recipe input */}
<TextInput
onChangeText={(e) => handleChange(e, "time")}
placeholder="Give estimate how long"
/>
{/*Steps of recipe input */}
<TextInput
value={recipe.steps}
onChangeText={(e) => handleChange(e, "steps")}
placeholder="The steps"
/>
{/*Image of recipe input */}
<TextInput
value={recipe.image}
onChangeText={(e) => handleChange(e, "steps")}
placeholder="url of image"
/>
</View>
</Modal>
I am using a Flatlist in ProfileScreen.js to list the data from HomeScreen.js.
I am also using useEffect() to listen submission of this data.
ProfileScreen.js
const [followers, setFollower] = useState(0);
const [following, setFollowing] = useState(0);
// Our list that receives the data
const [recipeList, setRecipeList] = useState([]);
const [params, setParams] = useState();
useEffect(() => {
if (route.params !== undefined) {
setRecipeList((prev) => [...prev, route.params]);
}
}, [route.params]);
//render each MyRecipe
const _renderItem = ({ item }) => {
return (
<View style={styles.recipeContent}>
<Text style={styles.recipeContentName}>{item.name}</Text>
<View style={styles.ImageContainer}>
<Avatar.Image style={styles.recipeImage} size={80}></Avatar.Image>
</View>
<Text style={styles.recipeContentTime}>{item.time} mins</Text>
{(() => {
let a = item.steps;
let res = [];
a.forEach((step) => {
res.push(<Text style={styles.recipeContentStep}>{step}</Text>);
});
return res;
})()}
</View>
);
};
ProfileScreen.js FlatList
<View style={styles.myRecipesBody}>
<FlatList
keyExtractor={(item) => item.key}
data={recipeList}
renderItem={_renderItem}
/>
</View>
I'm wondering if this issue is because of the nature of my navigation architecture, or am I listening to route.params incorrectly? Thanks!
GitHub repo: https://github.com/rrzhang139/myRNapp.git

Hide header bar on single Tab Screen

I ve got nested navigation, and I would like to hide a header bar from a single page from my bottom tab navigation(I am doing this because I want to have a different color ). So I managed to do that by creating the SleepStackScreen component and give the header the color that I want, but now I am having two headers, one from the TabScreen component and one from the SleppStackScreen.
Any hint of how could I hide the TabScreen header only on SleepStackScreen.
I already tried with options={{ headerShown: false}} but no luck.
The green header on the first picture i want to keep it on existing pages, whereas on the second picture I want to remove it and to keep the blue one
const SleepStackScreen = ({navigation}) => (
<SleepStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#1f65ff',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<SleepStack.Screen
name="Sleep"
component={Sleep}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
</SleepStack.Navigator>
);
const TabsScreen = () => (
<Tabs.Navigator shifting={true} initialRouteName="Home" activeColor="#fff">
<Tabs.Screen
name="Home"
component={Browser}
options={{
name: 'sal',
tabBarLabel: 'Home',
tabBarColor: '#009387',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tabs.Screen
name="Sleep"
component={SleepStackScreen}
options={{
tabBarLabel: 'Sleep',
title: 'sal',
tabBarColor: '#694fad',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons name="sleep" color={color} size={26} />
),
}}
/>
<Tabs.Screen
name="Settings"
component={SettingWithContext}
options={{
tabBarLabel: 'Settings',
tabBarColor: '#009387',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons name="settings" color={color} size={26} />
),
}}
/>
</Tabs.Navigator>
);
export default CreateStack = () => {
const [isLoading, setIsLoading] = React.useState(true);
const [userToken, setUserToken] = React.useState(null);
const authContext = React.useMemo(() => {
return {
signIn: () => {
setIsLoading(false);
setUserToken('asdf');
},
signUp: () => {
setIsLoading(false);
setUserToken('asdf');
},
signOut: () => {
setIsLoading(false);
setUserToken(null);
},
};
}, []);
React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 1000);
}, []);
if (isLoading) {
return <LoadingScreen />;
}
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer>
{userToken ? (
<Stack.Navigator
initialRouteName={Browser}
screenOptions={{
//headerShown: false,
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
}}>
<Stack.Screen
name="Browser"
component={TabsScreen}
options={({route}) => ({
headerTitle: getHeaderTitle(route),
})}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
<Stack.Screen
name="PreScreen"
component={PreScreen}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
<Stack.Screen
name="PreScreenSleep"
component={PreScreenSleep}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
headerStyle: {
backgroundColor: '#694fad',
},
})}
/>
<Stack.Screen
name="Player"
component={Player}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
</Stack.Navigator>
) : (
<AuthStack.Navigator initialRouteName={RegisterLogin}>
<AuthStack.Screen
name="RegisterLogin"
component={RegisterLogin}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
headerStyle: {
backgroundColor: '#f4511e',
},
})}
/>
<AuthStack.Screen
name="Login"
component={LoginWithContext}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
<AuthStack.Screen
name="Register"
component={RegisterWithContext}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
</AuthStack.Navigator>
)}
</NavigationContainer>
</AuthContext.Provider>
);

UPDATE as of version 5
As of version 5 it is the option headerShown in screenOptions
Example of usage:
<SleepStack.Navigator
screenOptions={{
headerShown: false
}}
>
<SleepStack.Screen
name="Sleep"
component={Sleep}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
</SleepStack.Navigator>
ok try this
<SleepStack.Navigator
screenOptions={({ route }) => {
let shown = true;
if (route.state.routeNames[route.state.index] === "Sleep") {
shown = false;
}
return {
headerShown: shown
};
}}>
<SleepStack.Screen
name="Sleep"
component={Sleep}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
})}
/>
</SleepStack.Navigator>;