cannot change colour of label in <DrawerItem> react-native

user_12041940 0
Viewed 2590

enter image description here

As given in the code, I have tried and I wanted if the "Home" displaying in Drawer can become white by chance?

<Drawer.Section style={{backgroundColor:"green"}}>
            <DrawerItem 
              icon={({ color, size }) => (
                <Icon name="home-outline" color={"white"} size={size}/>
              )}
              label="Home"
              color="white" //as this is not working
              onPress={() => {
                props.navigation.navigate("Home");
              }}
            />
    </Drawer.Section>
react-native reactjs
5 Answers

There is no property for color, you have the below props to style your DrawerItem

  • activeTintColor: Color for the icon and label when the item is active.
  • inactiveTintColor: Color for the icon and label when the item is inactive.
  • activeBackgroundColor: Background color for item when it's active.
  • inactiveBackgroundColor: Background color for item when it's inactive.
  • labelStyle: Style object for the label Text.
  • style: Style object for the wrapper View.
user_14357220

We can change Drawer.Section title color using this

            <Drawer.Section
              title={
                <Text style={{color: colors.textColor}}>Preferences</Text>
              }>
user_136276610

I figured out a solution, but it isn't pretty:

<DrawerItem 
  icon={ () => ( <Icon name='bike' color='white' size={24} onPress={() => { props.navigation.navigate('Home') }} /> )} 

  label={ () => ( <Text style={{color: 'white', fontSize: 20}}>Start Motor</Text>) }

  onPress={() => { props.navigation.navigate('Home') }}          
/>

enter image description here

user_109333730

For Drawer.Item you can use below code.

label={<Text style={{color: '#ffffff'}}>First Item</Text>}

For Drawer.Section you can use below code.

title={<Text style={{color: '#ffffff'}}> Welcome</Text>}
user_44676930

you can define theme like this :

const themePaper =  {
  colors:{
    text: '#fff',
  }
}

and then you can use it for Drawer.Section and Drawer.Item easily

<Drawer.Section
  theme = {themePaper}
>

and

<Drawer.Item
  theme = {themePaper}
>
user_116472700
Related