2

I'm trying to customize my StackNavigator within my DrawerNavigator.

Here is my code:

const HomeStack = createStackNavigator( { HomeScreen, HomeDetailScreen, InteriorScreen, InteriorDetailScreen }, { initialRouteName: "HomeScreen", navigationOptions: { headerTitleStyle: { color: headerColor }, headerBackTitleStyle: { color: headerColor }, headerTintColor: headerColor } } const MainStack = createStackNavigator( { HomeStack, ChooseLocationScreen, FilterHomesScreen }, { initialRouteName: "HomeStack", mode: "modal", navigationOptions: ({ navigation }) => { const options = { headerTitleStyle: { color: headerColor }, headerBackTitleStyle: { color: headerColor }, headerTintColor: headerColor, drawerLabel: SCREEN_TEXT_HOME_HEADER, drawerIcon: ({ tintColor }) => ( <Image source={require("../assets/icons/home.png")} resizeMode="contain" style={{ width: 20, height: 20, tintColor: tintColor }} /> ) }; if (navigation.state.routeName === "HomeStack") options["header"] = null; return options; } } ); const MainDrawer = createDrawerNavigator( { MainStack }, { initialRouteName: "MainStack", drawerBackgroundColor: backgroundColor, contentOptions: { inactiveTintColor: headerColor, activeTintColor: activeTintColor } } );

My problem is, that within the DrawerNavigator, the item still just says "MainStack". But I would like it to say "Home" (which is the value of SCREEN_TEXT_HOME_HEADER) and I would like it to have the "home.png" icon. As you can see, I tried to change the navigation options according to the docs, but it somehow doesn't work. How can I achieve the correct icon and label?

Improve this question

3 Answers 3

Reset to default
9

Found the solution. After silly try and error, here is how I made it work:

 { Main: { screen: MainStack, navigationOptions: { drawerLabel: SCREEN_TEXT_HOME_HEADER, drawerIcon: ({ tintColor }) => ( <Image source={require("../assets/icons/home.png")} resizeMode="contain" style={{ width: 20, height: 20, tintColor: tintColor }} /> ) } } }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@j-hesters could you please send the whole Sourcecode. Where did you add this piece of code?
in the new version of react-navigation (5.x), follow: stackoverflow.com/questions/54236423/…
1

@ suther

Here is how I implemented it. I hope it's more clear. Note: The drawerIcon prop is going in the first argument of the createDrawerNavigator function, together with the screen, but in a navigationOptions prop.

import React from 'react'; import { Platform } from 'react-native'; import { createStackNavigator, createBottomTabNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation'; import { MaterialIcons } from '@expo/vector-icons'; import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; import CategoriesScreen from '../screens/CategoriesScreen'; import CategoryMealsScreen from '../screens/CategoryMealsScreen'; import MealDetailScreen from '../screens/MealDetailScreen'; import FavoritesScreen from '../screens/FavoritesScreen'; import FiltersScreen from '../screens/FiltersScreen'; import Colors from '../constants/Colors'; const defaultStackNavOptions = { headerStyle: { backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : '' }, headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primaryColor, headerTitle: 'A Screen' }; const MealsNavigator = createStackNavigator( { Categories: { screen: CategoriesScreen }, CategoryMeals: { screen: CategoryMealsScreen }, MealDetail: MealDetailScreen }, { // initialRouteName: 'Categories', defaultNavigationOptions: defaultStackNavOptions } ); const FavNavigator = createStackNavigator( { Favorites: FavoritesScreen, MealDetail: MealDetailScreen }, { // initialRouteName: 'Categories', defaultNavigationOptions: defaultStackNavOptions } ); const tabScreenConfig = { Meals: { screen: MealsNavigator, navigationOptions: { tabBarIcon: tabInfo => { return ( <MaterialIcons name="restaurant" size={25} color={tabInfo.tintColor} /> ); }, tabBarColor: Colors.primaryColor } }, Favorites: { screen: FavNavigator, navigationOptions: { tabBarIcon: tabInfo => { return <MaterialIcons name="favorite" size={25} color={tabInfo.tintColor} />; }, tabBarColor: Colors.accentColor } } }; const MealsFavTabNavigator = Platform.OS === 'android' ? createMaterialBottomTabNavigator(tabScreenConfig, { activeTintColor: 'white', shifting: true, barStyle: { backgroundColor: Colors.primaryColor } }) : createBottomTabNavigator(tabScreenConfig, { tabBarOptions: { activeTintColor: Colors.accentColor } }); const FiltersNavigator = createStackNavigator( { Filters: FiltersScreen }, { // navigationOptions: { // drawerLabel: 'Filters!!!!' // }, defaultNavigationOptions: defaultStackNavOptions } ); // HERE IS THE drawerIcon const MainNavigator = createDrawerNavigator( { MealsFavs: { screen: MealsFavTabNavigator, navigationOptions: { drawerLabel: 'Meals', drawerIcon: ({ tintColor }) => <MaterialIcons name="restaurant" size={25} color={tintColor} /> } }, Filters: { screen: FiltersNavigator, navigationOptions: { drawerIcon: ({ tintColor }) => <MaterialIcons name="filter-list" size={25} color={tintColor} /> } } }, { contentOptions: { activeTintColor: Colors.accentColor, labelStyle: { fontFamily: 'open-sans-bold' }, } } ); export default createAppContainer(MainNavigator);

Happy coding :)

Improve this answer

Comments

0

add an option to Drawer. Screen component

 options={{ drawerIcon: ({ color, size }) => ( <AntDesign name="home" color={color} size={size} /> ), }}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.