From 1b0683533a07aa8875b4d494d8c2a3d18ef69438 Mon Sep 17 00:00:00 2001
From: Mike <yum650350@gmail.com>
Date: Mon, 12 Apr 2021 13:56:10 -0700
Subject: [PATCH] Android: Fix switch ripple color (#30685)

Summary:
fix https://github.com/facebook/react-native/issues/22370

Use `RippleDrawable` to change ripple color.
According to the [document](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable?hl=en), `RippleDrawable` is added in API 21, so warped the code in the `if` statement for version checking.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Fix wrong ripple color on Switch component

Pull Request resolved: https://github.com/facebook/react-native/pull/30685

Test Plan:
1. Create an empty app with react-native 0.63.4, copy&paste the App.js from issue https://github.com/facebook/react-native/issues/22370
2. Apply the code for fixing to `node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java`
3. Configure the project to let it Build from ReactAndroid
4. Check if ripple color has changed correctly
5. Use different color on each state and check if it is working

Test device: Android emulator, Pixel 4, API 30

## Screenshot

### Before
Ripple is always in default color

https://user-images.githubusercontent.com/48589760/103573532-5b4cec80-4f09-11eb-96d7-f75efa6779d9.mov

### After
Ripple color has changed with thumb color

https://user-images.githubusercontent.com/48589760/103573216-d95cc380-4f08-11eb-98fb-494e28c12a9f.mov

Check different color on each state

https://user-images.githubusercontent.com/48589760/103573227-de217780-4f08-11eb-8992-ede5d1dd89c1.mov

Reviewed By: mdvacca

Differential Revision: D27636802

Pulled By: lunaleaps

fbshipit-source-id: fa23cc8b51c642e5e5d9c73371c8ccef3741fd14
---
 .../react/views/switchview/ReactSwitch.java         | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java
index 1a2afde1eede3d..4819bf2abd94e1 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java
@@ -8,8 +8,11 @@
 package com.facebook.react.views.switchview;
 
 import android.content.Context;
+import android.content.res.ColorStateList;
 import android.graphics.PorterDuff;
 import android.graphics.drawable.Drawable;
+import android.graphics.drawable.RippleDrawable;
+import android.os.Build;
 import androidx.annotation.Nullable;
 import androidx.appcompat.widget.SwitchCompat;
 
@@ -59,6 +62,16 @@ public void setTrackColor(@Nullable Integer color) {
 
   public void setThumbColor(@Nullable Integer color) {
     setColor(super.getThumbDrawable(), color);
+
+    // Set the ripple color with thumb color if >= LOLLIPOP
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      RippleDrawable ripple = (RippleDrawable) super.getBackground();
+      ColorStateList customColorState =
+          new ColorStateList(
+              new int[][] {new int[] {android.R.attr.state_pressed}}, new int[] {color});
+
+      ripple.setColor(customColorState);
+    }
   }
 
   /*package*/ void setOn(boolean on) {