DrawerNavigator: Change Text Color

Instead of style you need to use labelStyle inside contentOptions. Like this:

contentOptions: {
  labelStyle: {
    fontFamily: 'SomeFont',
    color: 'white',
  },
}

A google search landed me here but the answer could not resolve my issue: I wanted to change the text color but have it switch between different colors depending on whether active and or inactive. Chnangin the colorin labelstyle effectively ensured the labels are the same color irrespective of the state. So I used the tint colors in content options of the drawer.

    export const DrawerStack = DrawerNavigator(
  {... /drawer items}
 ,
  {
    contentOptions: {
      activeTintColor: colors.primary,
      activeBackgroundColor: 'transparent',
      inactiveTintColor: 'black',
      inactiveBackgroundColor: 'transparent',
      labelStyle: {
        fontSize: 15,
        marginLeft: 10,
      },
    },
    drawerWidth: SCREEN_WIDTH * 0.7,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
  }
);

This way I can alternate colors depending on whether a drawer item is active or not using the activeTintColor and inactiveTintColor options.

For anyone who is using Navigation V5 you will have to follow the below method and do that when initializing the drawer navigator

      <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: 'red',
          activeBackgroundColor: 'grey',
          inactiveTintColor: 'blue',
          inactiveBackgroundColor: 'white',
          labelStyle:{
            marginLeft:5
          }
        }}>
  </Drawer.Navigator>

You can refer the docs for more props https://reactnavigation.org/docs/drawer-navigator/#drawercontentoptions