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 4819bf2abd9..7dbc889e4e3 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
@@ -10,6 +10,7 @@ package com.facebook.react.views.switchview;
import android.content.Context;
import android.content.res.ColorStateList;
import android.graphics.PorterDuff;
+import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.RippleDrawable;
import android.os.Build;
@@ -48,6 +49,18 @@ import androidx.appcompat.widget.SwitchCompat;
}
}
+ @Override
+ public void setBackgroundColor(int color) {
+ // Ensure RippleDrawable is preserved for >=21
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+ setBackground(
+ new RippleDrawable(
+ createRippleDrawableColorStateList(color), new ColorDrawable(color), null));
+ } else {
+ super.setBackgroundColor(color);
+ }
+ }
+
void setColor(Drawable drawable, @Nullable Integer color) {
if (color == null) {
drawable.clearColorFilter();
@@ -63,14 +76,10 @@ import androidx.appcompat.widget.SwitchCompat;
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);
+ // Set the ripple color if background is instance of RippleDrawable
+ if (color != null && super.getBackground() instanceof RippleDrawable) {
+ ColorStateList customColorState = createRippleDrawableColorStateList(color);
+ ((RippleDrawable) super.getBackground()).setColor(customColorState);
}
}
@@ -113,4 +122,9 @@ import androidx.appcompat.widget.SwitchCompat;
setTrackColor(currentTrackColor);
}
}
+
+ private ColorStateList createRippleDrawableColorStateList(@Nullable Integer color) {
+ return new ColorStateList(
+ new int[][] {new int[] {android.R.attr.state_pressed}}, new int[] {color});
+ }
}
diff --git a/packages/rn-tester/js/examples/Switch/SwitchExample.js b/packages/rn-tester/js/examples/Switch/SwitchExample.js
index ebd3bc40b44..a249fc29201 100644
--- a/packages/rn-tester/js/examples/Switch/SwitchExample.js
+++ b/packages/rn-tester/js/examples/Switch/SwitchExample.js
@@ -244,6 +244,23 @@ class OnChangeExample extends React.Component<{...}, $FlowFixMeState> {
}
}
+class ContainerBackgroundColorStyleExample extends React.Component<
+ {...},
+ $FlowFixMeState,
+> {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
exports.title = 'Switch';
exports.documentationURL = 'https://reactnative.dev/docs/switch';
exports.category = 'UI';
@@ -291,6 +308,12 @@ exports.examples = [
return ;
},
},
+ {
+ title: "The container's background color can be set",
+ render(): React.Element {
+ return ;
+ },
+ },
];
if (Platform.OS === 'ios') {