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') {