How to change overflow icon color?

[Noitidart]

Hi there,

I was having a hard time figuring out how to "tint" the actions in ToolbarAndroid. Is this possible? Or does it rely on the color of the png provided?

Is it possible to supply our own <View> as component to toolbar. I tried this but it broke the collapsing. :(

[cesardeazevedo]

Not sure if i got it, but are you trying to add a background on the dropdown actions menu?

[Noitidart]

Thank you sooo much for your fast replies you are too great.

I am trying to change the color of the "overflow" triple dots icon to be white.

We see here that the overflow icon is like trnasparent black:

I wanted to make it solid white please.

Are we able to use <Text /> elements in <ToolbarAndroid/> instead of images? Because I have a fontFamily for vector icons.

[Noitidart]

I think working with <ToolbarAndroid> and various color of icons is hard. :(

Is it possible to supply:

<View style={{ height:56 }}>
    <Text style={{fontFamily:'MaterialIcons'}}>back</Text>
</View>

[cesardeazevedo]

ok, i got it, there's isn't way out the box to change the overflow icon color, there's a few possibilities.

1. Using a custom png image.

<ToolbarAndroid overflowIcon={require('image.png')} />

2. Requesting an icon directly from the react-native-vector-icons (recommended)

import Icon from 'react-native-vector-icons/Ionicons'

componentDidMount() {
    Icon.getImageSource('md-more', 24, '#ffffff').then((source) => {
      this.setState({ icon: source })
    })
}

<Icon.ToolbarAndroid
  iconColor='#ffffff'
  onActionSelected={this.handleActionSelected}
  actions={[{ title: 'Show' }, { title: 'Hide' }]}
  navIconName={'md-menu'}
  overflowIcon={this.state.icon}
/>

3. Setting the color directly on the styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

Be aware that this method may effect other parts of your app.

I will close this issue since there's no relation to this package itself, i hope it helps.

[Noitidart]

Thank you so much for helping me with something not related. I really appreciate it! You showed me multiple ways!! This is so cool cuz I can still use native! :)