CODEWITHSUNDEEP
react-nativereact-native-navigation
Mahi Parmar
Mahi Parmar

Reputation: 525

change active menu icon color in DrawerNagivation react-native

I m creating my first react-native application and i wanted to change css for drawer navigation.i have already tried changes color with activeTintColor but its not working.I just wanted to change the icon color or the menu item which is active.

What i have done is here:

    const DrawerNavigation = createDrawerNavigator({
  Page1: {
    screen: MainTabNavigator,
    navigationOptions: {
      drawerLabel: 'Home'
    },
    contentOptions: {
      activeTintColor: 'rgb(234, 94, 32)'
    }
  },
  page2: {
    screen: AboutUs,
    navigationOptions: {
      drawerLabel: 'About Us'
    },
    contentOptions: {
      activeTintColor: 'rgb(234, 94, 32)'
    }
  },
  Page3: {
    screen: LogoutScreen,
    navigationOptions: {
      drawerLabel: 'Logout'
    },
    contentOptions: {
      activeTintColor: 'rgb(234, 94, 32)'
    }
  }
},
{
  initialRouteName: 'Page1',
  contentComponent: CustomDrawerContentComponent
});

Upvotes: 0

Views: 3143

Answers (2)

Zaheer
Zaheer

Reputation: 375

According to react-navigation-drawer version 2.3.3, I suggest to use drawerIcon property in navigationOptions

In this example, I used Ionicons from expo/vector-icons for icons

    const DrawerNavigation = createDrawerNavigator({
    Page1: {
        screen: MainTabNavigator,
        navigationOptions: {
          drawerLabel: 'Home',
          drawerIcon: (tabInfo) => {
               return <Ionicons
                    name='ios-restaurant'
                    size={25}
                    color={tabInfo.tintColor}
                />
          },
        },
        contentOptions: {
          activeTintColor: 'rgb(234, 94, 32)'
        }
      },
....
....
....

Upvotes: 0

Dinith Minura
Dinith Minura

Reputation: 1496

If you need to use the same color for all the menu items when active, This will help you,

const DrawerNavigation = createDrawerNavigator({
  Page1: {
    screen: MainTabNavigator,
    navigationOptions: {
      drawerLabel: 'Home'
    },

  },
  page2: {
    screen: AboutUs,
    navigationOptions: {
      drawerLabel: 'About Us'
    },

  },
  Page3: {
    screen: LogoutScreen,
    navigationOptions: {
      drawerLabel: 'Logout'
    },

  }
},
{
  initialRouteName: 'Page1',
  contentOptions: {
      activeTintColor: 'rgb(234, 94, 32)'
  }
});

Upvotes: 1

Related Questions