React-native: [Android] Styling the active SwitchAndroid color?

[danielkramer]

Is it possible to style the color of a SwitchAndroid? I can change the backgroundColor but not the active color

[kmagiera]

We don't expose a way to customize it from JS at the moment. You can use custom android theme for your app and customize a way how switch should look there as you'd do in the native android app.

[nikolal]

Is there a plan to add onTintColor for Android in near future?

[sarovin]

+1

[nscoding]

Why is this issue closed? Aren't there any plans for this?

[otoinsa]

That default teal color is not so great; is there still no way to customize it from react native without doing something in java?

[nikolal]

@otoinsa

I think this still isn't possible.

[otoinsa]

So how would one exactly do this with a React Native android app?
I mean where/what code should I add, so that the switch is no longer teal/greenish colored?

For Example - I want the switch color to be blue, is there a comprehensive guide I can follow?

[otoinsa]

I've managed to changed to whole app accent color, however is there a way to change just the switch accent color?

For me this does not work in styles.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:switchStyle">@style/myswitch</item>
    </style>

    <style name="myswitch" parent="Theme.AppCompat.Light">
        <item name="colorAccent">#FF0000</item>
        <item name="colorControlActivated">#ff0000</item>
    </style>
</resources>

Only when I change the whole app accent color on theme editor, the switch changes.

[otoinsa]

And this is still very much an issue, why is this closed?

[otoinsa]

My styles.xml in android/res/values

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="colorControlActivated">#ffffff</item>
    </style>
</resources>

This in android native code will make all controls (checkboxes and radio buttons as well)
white; not perfect, but somewhat works for me.

[fabriziomoscon]

I solved this changing the XML in android/app/src/main/res/values/styles.xml like so

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowBackground">@color/darkBlue</item>
        <item name="colorPrimary">@color/darkBlue</item>
        <item name="colorPrimaryDark">@color/darkBlue</item>
        <item name="colorAccent">@color/brightBlue</item> <!-- this makes the trick -->
    </style>
</resources>

[Noitidart]

On Android, it's not possible to change the ripple color to match the thumb color. Isn't this correct?

Also is there ability to chagne size? I used transform scale but the layout of course doesn't respect that scaled size.

[MrLoh]

Why is this issue closed? Clearly seems like something that should be possible.

[Noitidart]

@MrLoh we can change colors with onTintColor, thumbTintColor, tintColor. On Android, the ripple color cannot be changed, except for an app wide change via xml. On both iOS and Android, it is not possible to change size of Switch other then scale but this is not perfect, especially because it won't physically really take up that scaled size.

[thejacobseely]

@fabriziomoscon's solution worked for me.

However, keep in mind that changing the value of "colorAccent" will change the color accent default for your whole app, so you may have to go in and make some changes to the TextInput and other elements affected by the colorAccent.

It hasn't been mentioned all ready, so I figure I'll save anybody else who is using this solution some time:
You will also need to create a colors.xml file in the same directory, which should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="brightBlue">#00ffff</color>
</resources>

[jcurtis]

This appears to be solved with #11940