Wrong ripple color in Switch component

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 8.03 GB / 15.91 GB
  Binaries:
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  3.1.0.0 AI-173.4907809

Description

I configure a different color for my Switch component with the props trackColor and thumbColor. When I press the switch to change it’s value, the color on the ripple is completely different from the one configured with the props. The bug only occurs on Android platform with the ripple and with the background color when the state is changing, After the animation ends, the background color assume the custom color I configured.

[rnike]

Follow the hint gave by @kelset, adding codes below in ReactSwitch.java fixes this issue

   public void setThumbColor(@Nullable Integer color) {
     setColor(super.getThumbDrawable(), color);
+
+    // Set the ripple color with thumb color
+    RippleDrawable ripple = (RippleDrawable) super.getBackground();
+    ColorStateList customColorState = new ColorStateList(
+      new int[][]{ new int[]{ android.R.attr.state_pressed } },
+      new int[]{color});
+
+    ripple.setColor(customColorState);
   }

Screenshot

But I’m not sure if this is a good practice.

[rnike]

@kelset Sure, here’s the PR