title: CustomDrawerNavigator: Change Active and Inactive Background Colour
body: <p>On react-navigation/drawer's DrawerItem, is there a way to add active and inactive background colour? I followed this document to implement this <a href="https://reactnavigation.org/docs/drawer-navigator/" rel="nofollow noreferrer">https://reactnavigation.org/docs/drawer-navigator/</a>.</p>
  <p><a href="https://i.stack.imgur.com/0qfZJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0qfZJ.png" alt="enter image description here" /></a></p>
  <p>I have added theses code lines to the <code>drawerItems</code>. But it won't work for me.</p>
  <pre><code>drawerContentOptions={{
      activeTintColor: '#fff', /* font color for active screen label */
      activeBackgroundColor: '#68f', /* bg color for active screen */
      inactiveTintColor: 'grey', /* Font color for inactive screens' labels */
  }}
  </code></pre>
  <p>initialized by the following,</p>
  <pre><code>import * as React from 'react'; 
  import {
    Button,
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
  } from 'react-native';
  import { useDispatch, useSelector } from 'react-redux';
  import {
    createDrawerNavigator,
    DrawerContentScrollView,
    DrawerItem,
  } from '@react-navigation/drawer';
  import Home from '../home/containers';
  import NavigationService from '../../navigation/NavigationService';
  import * as homeActions from '../../features/home/actions';
  import * as loginActions from '../../features/login/actions';
  import { Images } from '../../config';
  import i18n from 'i18n-js';
  
  function HomeScreen({ navigation }) {
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Button
          onPress={() =&gt; NavigationService.navigate('Notifications')}
          title=&quot;Go to notifications&quot;
        /&gt;
      &lt;/View&gt;
    );
  }
  
  function NotificationsScreen({ navigation }) {
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Button onPress={() =&gt; NavigationService.goBack()} title=&quot;Go back home&quot; /&gt;
      &lt;/View&gt;
    );
  }
  
  function CustomDrawerContent({ props, navigation }) {
    const dispatch = useDispatch();
    const outlets = useSelector((state) =&gt; state.homeReducer.outlets);
    const defaultOutLet = useSelector((state) =&gt; state.homeReducer.defaultOutLet);
  
    const drawerItems = outlets.map((outlet) =&gt; {
      return (
        console.log(&quot;############## nav drawr ################## &quot; + outlet.name),
        &lt;DrawerItem
          {...props}
          key={outlet.userCompanyId}
          label={outlet.name}
          onPress={() =&gt; {
            dispatch(homeActions.changeSelectedOutlet(outlet));
            navigation.closeDrawer();
          }}
        /&gt;
      );
    });
    return (
      &lt;View style={styles.flexView}&gt;
        &lt;View style={styles.container}&gt;
          &lt;Image
            style={styles.image}
            source={Images.icons.logo}
            resizeMode=&quot;contain&quot;
          /&gt;
          {defaultOutLet &amp;&amp; &lt;Text style={styles.text}&gt;{defaultOutLet.name}&lt;/Text&gt;}
        &lt;/View&gt;
        &lt;View style={styles.separator} /&gt;
        &lt;View style={styles.flexView}&gt;{drawerItems}&lt;/View&gt;
        &lt;View style={styles.separator} /&gt;
        &lt;View style={styles.bottomView}&gt;
          &lt;TouchableOpacity
            style={styles.logoutContainer}
            onPress={() =&gt; {
              dispatch(homeActions.clearUserCompany());
              dispatch(loginActions.completeLogOutClearingUserData());
            }}&gt;
            &lt;Image
              style={styles.logoutIcon}
              source={Images.icons.power}
              resizeMode=&quot;center&quot;
            /&gt;
            &lt;Text style={styles.logoutText}&gt;{i18n.t('common.logout')}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  const Drawer = createDrawerNavigator();
  
  export default function DrawerNavigator() {
    return (
      &lt;Drawer.Navigator
        drawerContent={(props) =&gt; &lt;CustomDrawerContent {...props} /&gt;}
        initialRouteName=&quot;Home&quot;&gt;
        &lt;Drawer.Screen name=&quot;Home&quot; component={Home} /&gt;
      &lt;/Drawer.Navigator&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 0.3,
      width: '100%',
      backgroundColor: 'white',
    },
    flexView: {
      flex: 1,
    },
    text: {
      marginVertical: 12,
      color: 'black',
      textAlign: 'center',
    },
    logoutContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      width: '100%',
    },
    logoutText: {
      color: 'gray',
    },
    logoutIcon: {
      flex: 0.4,
    },
    image: {
      flex: 1,
      marginTop: 20,
      alignSelf: 'center',
    },
    separator: {
      width: '100%',
      height: 1,
      backgroundColor: 'gray',
    },
    bottomView: {
      flex: 0.15,
      width: '100%',
      justifyContent: 'center',
    },
  });
  </code></pre>