React-native: [Android] Change button text color in ToolbarAndroid

[cosmith]

I might be mistaken but I haven't found a way to change the color of the buttons in ToolbarAndroid.

Now all the solutions I've seen to set this color are based on the Toolbar's theme which is then inflated but I couldn't get it to work in React Native's Android code. Any pointers appreciated (I'd be happy to submit a PR if someone knows a solution).

[lucasferreira]

Hi @cosmith

The only way that I found to do that it's change ti XMLs files inside android/app/src/main/res/values.

I created a colors.xml file with a simple color palette and inside the styles.xml I used that colors to change the Android default theme.

Here my things:
https://gist.github.com/lucasferreira/d2786a9adb32830783e0

After change the android:textColorSecondary property in styles.xml you will need to re-run your app inside the emulator, using react-native run-android again.

[cosmith]

Hi @lucasferreira, thanks for your answer. Setting textColorSecondary didn't work but android:textColorPrimary did!

[cosmith]

Be careful though, as it will set all your TextInput's default color to the one you set as android:textColorPrimary (and possibly other things)

[cosmith]

On Android API level 23 I can set the TextInput's colors via js but not on Android 22... So I either have everything black or everything white.

[lucasferreira]

@cosmith

You can use:

<item name="actionMenuTextColor">@color/white</item>

My styles.xml is now:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimary">@color/primary</item>
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
        <item name="android:textColorSecondary">@color/white</item>
        <item name="actionMenuTextColor">@color/white</item>
    </style>
</resources>

[cosmith]

Awesome thanks!

[lwansbrough]

This can be changed programmatically, and IMO that API should be exposed: https://github.com/facebook/react-native/issues/3215

[furyFTW]

change color for text and icon, work for me

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

[lwansbrough]

@furyFTW Yes, a static solution was offered in November, which is identical to what you posted. I'm suggesting that there should be a way to change this using JS in React.

[milenkovic]

+1 for setting this using JS and not messing with xml.