Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DrawerNavigator: Change Text Color

On react-navigation's DrawerNavigator, is there a way to change the text color and background color for the item?

By default, the color scheme looks like the following: react-navigation color

Which is initialized by the following:

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

Setting the color property within the screen's contentOptions's style does not appear to have an effect.

Should I extend new components for each row (labeled "Primary", "Secondary", etc. right now)? or is there an easier way to stylize the existing implementation of the rows?

like image 840
Jake Chasan Avatar asked Jul 05 '17 15:07

Jake Chasan


2 Answers

You can render your custom label:

import { DrawerItem } from '@react-navigation/drawer';

// ...

<DrawerItem label={() => <Text style={{ color: '#fff' }}>White text</Text>} />;

https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

like image 76
Petr K. Avatar answered Sep 28 '22 04:09

Petr K.


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.

like image 42
ArdentLearner Avatar answered Sep 28 '22 02:09

ArdentLearner