Color the react-navigation drawer active icon if using react-native-vector-icons

Question

I have this react-navigation drawer:

I want to color the active icons green like the labels.

I'm using react-native-vector-icons for the icons.

code:

const AddMenuIcon = ({ navigate }) => (
  <View>
    <Icon
      name="plus"
      size={30}
      color="#FFF"
      onPress={() => navigate('DrawerOpen')}
    />
  </View>
)

const SearchMenuIcon = ({ navigate }) => (
  <Icon
    name="search"
    size={30}
    color="#FFF"
    onPress={() => navigate('DrawerOpen')}
  />
)

const LoginMenuIcon = ({ navigate }) => (
  <Icon
    name="user"
    size={30}
    style={{ fontWeight: '900' }}
    color="#FFF"
    onPress={() => navigate('DrawerOpen')}
  />
)

const Stack = {
  Login: {
    screen: Login,
    headerMode: 'none'
  },
  Search: {
    screen: Search,
    headerMode: 'none'
  },
  Add: {
    screen: Add,
    headerMode: 'none'
  }
}

const DrawerRoutes = {
  Login: {
    name: 'Login',
    screen: StackNavigator(Stack.Login, {
      headerMode: 'none'
    }),
    headerMode: 'none',
    navigationOptions: ({ navigation }) => ({
      drawerIcon: LoginMenuIcon(navigation)
    })
  },
  'Search Vegan': {
    name: 'Search',
    screen: StackNavigator(Stack.Search, {
      headerMode: 'none'
    }),
    headerMode: 'none',
    navigationOptions: ({ navigation }) => ({
      drawerIcon: SearchMenuIcon(navigation)
    })
  },
  'Add vegan': {
    name: 'Add',
    screen: StackNavigator(Stack.Add, {
      headerMode: 'none'
    }),
    headerMode: 'none',
    navigationOptions: ({ navigation }) => ({
      drawerIcon: AddMenuIcon(navigation)
    })
  }
}

const CustomDrawerContentComponent = props => (
  <SafeAreaView style={{ flex: 1, backgroundColor: '#3f3f3f', color: 'white' }}>
    <DrawerItems {...props} />
  </SafeAreaView>
)

const RootNavigator = StackNavigator(
  {
    Drawer: {
      name: 'Drawer',
      screen: DrawerNavigator(DrawerRoutes, {
        initialRouteName: 'Login',
        drawerPosition: 'left',
        contentComponent: CustomDrawerContentComponent,
        contentOptions: {
          activeTintColor: '#27a562',
          inactiveTintColor: 'white',
          activeBackgroundColor: '#3a3a3a',
        }
      }),
      headerMode: 'none',
      initialRouteName: 'Login'
    },
    initialRouteName: 'Login'
  },
  {
    headerMode: 'none',
    initialRouteName: 'Drawer'
  }
)

export default RootNavigator

Is there any way at all to colour the active icon the same as the active text if using react-native-vector-icons? activeTintColor doesn't work on the icon. Can we programmatically check if active? Another strange thing is rgba colours do not work on the CustomDrawerContentComponent so I can't make the background semi-transparent which is annoying. Bonus if you can help there too!

Answer 1

You can dynamically pass the tintColor prop to your icon component which automatically resolves to the active or inactive tint color:

drawerIcon: ({tintColor}) => <MaterialIcons name="home" size={20} color={tintColor} />,

Also, inactive icon containers seem to come with some transparency by default so you might want to set the opacity to 1:

<DrawerItems iconContainerStyle={{opacity: 1}} ... />

Answer 2

In react-navigation Version: 5.x

use color not tintColor providing-a-custom-drawercontent

    <Drawer.Screen name="settingscreen" component={Settings}
            options={{
                drawerLabel: "Settings",
                drawerIcon: ({ color }) => <MaterialCommunityIcons name="settings" size={24} style={[styles.icon, { color: color }]} />
            }}
        />

Answer 3

For version 5.x, you have to use activeTintColor like following sample.

function App() {
    return (
        <Drawer.Navigator
            drawerContentOptions={{
                activeTintColor: 'blue',
                itemStyle: { marginVertical: 8, marginHorizontal: 8 },
            }}
        >
            <Drawer.Screen
                name="Home"
                component={AppNavigator}
                options={{
                    drawerIcon: ({ color }) => (
                        <AntDesign name={"calendar"} size={20} color={color} />
                    ),
                }}
            />
            <Drawer.Screen
                name="Completed"
                component={CompletedContainer}
                hideStatusBar
                options={{
                    drawerIcon: ({ color }) => (
                        <Entypo name={"list"} size={20} color={color} />
                    ),
                }}
            />
            <Drawer.Screen
                name="Settings"
                component={SettingsContainer}
                hideStatusBar
                options={{
                    drawerIcon: ({ color }) => (
                        <Feather name={"settings"} size={20} color={color} />
                    ),
                }}
            />
        </Drawer.Navigator>
    );
}

Answer 4

For me it worked:

<Drawer.Screen name="settingscreen" component={Settings}
        options={{
            drawerLabel: "Settings",
            drawerIcon:(({color}) => <AntDesign name="home" size={30} color={color} />) />
        }}
    />