Drawer.item label

[laspi94]

how i can change text color in Drawer.Item component?

<DrawerPaper.Item active={route.name === active} theme={theme} style={{ // todo change text color borderRadius: 15, }} key={route.name} label={route.displayName} onPress={(props) => { setActive(route.name) navigation.navigate(route.displayName) }} />

[Luizrebelatto]

• I was reading the doc and you have to follow some checks to change the color of the text, according to the source code these are the ways :

active={false} isV3: false props to change color is text

<Drawer.Item
   style={{ backgroundColor: '#64ffda' }}
   label="Text Item"
   active={false}
   theme={{ isV3: false, colors: { text: 'yellow' } }}
/>

---

active={false} isV3: true props to change color is onSurfaceVariant

<Drawer.Item
   style={{ backgroundColor: '#64ffda' }}
   label="Text Item"
   active={false}
   theme={{ isV3: true, colors: { onSurfaceVariant: 'yellow' } }}
/>

---

active={true} isV3: true props to change color is onSecondaryContainer

<Drawer.Item
   style={{ backgroundColor: '#64ffda' }}
   label="Text Item"
   active={true}
   theme={{ isV3: true, colors: { onSecondaryContainer: 'yellow' } }}
/>

---

active={true} isV3: false props to change color is primary

<Drawer.Item
   style={{ backgroundColor: '#64ffda' }}
   label="Text Item"
   active={true}
   theme={{ isV3: true, colors: { primary: 'yellow' } }}
/>