diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js index e9682d7027a148..1d5d6f2d0f5be8 100644 --- a/Libraries/Components/Pressable/useAndroidRippleForView.js +++ b/Libraries/Components/Pressable/useAndroidRippleForView.js @@ -21,12 +21,14 @@ type NativeBackgroundProp = $ReadOnly<{| color: ?number, borderless: boolean, rippleRadius: ?number, + rippleCornerRadius: ?number, |}>; export type RippleConfig = {| color?: ColorValue, borderless?: boolean, radius?: number, + cornerRadius?: number, foreground?: boolean, |}; @@ -45,7 +47,8 @@ export default function useAndroidRippleForView( | $ReadOnly<{|nativeBackgroundAndroid: NativeBackgroundProp|}> | $ReadOnly<{|nativeForegroundAndroid: NativeBackgroundProp|}>, |}> { - const {color, borderless, radius, foreground} = rippleConfig ?? {}; + const {color, borderless, radius, cornerRadius, foreground} = + rippleConfig ?? {}; return useMemo(() => { if ( @@ -64,6 +67,7 @@ export default function useAndroidRippleForView( color: processedColor, borderless: borderless === true, rippleRadius: radius, + rippleCornerRadius: cornerRadius, }; return { diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 0e6f739470b3f9..72049f976deadd 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -231,6 +231,7 @@ type AndroidDrawableRipple = $ReadOnly<{| color?: ?number, borderless?: ?boolean, rippleRadius?: ?number, + rippleCornerRadius?: ?number, |}>; type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.java index 8388234982342c..15f3032ae651f1 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.java @@ -14,6 +14,8 @@ import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; import android.graphics.drawable.RippleDrawable; +import android.graphics.drawable.ShapeDrawable; +import android.graphics.drawable.shapes.RoundRectShape; import android.os.Build; import android.util.TypedValue; import androidx.annotation.Nullable; @@ -106,11 +108,16 @@ private static int getColor(Context context, ReadableMap drawableDescriptionDict } private static @Nullable Drawable getMask(ReadableMap drawableDescriptionDict) { - if (!drawableDescriptionDict.hasKey("borderless") - || drawableDescriptionDict.isNull("borderless") - || !drawableDescriptionDict.getBoolean("borderless")) { - return new ColorDrawable(Color.WHITE); + if (drawableDescriptionDict.hasKey("borderless") && drawableDescriptionDict.getBoolean("borderless")) { + // Borderless ripples don't have masks. + return null; } - return null; + + if (drawableDescriptionDict.hasKey("rippleCornerRadius")) { + float rippleRadius = PixelUtil.toPixelFromDIP(drawableDescriptionDict.getDouble("rippleCornerRadius")); + return new ShapeDrawable(new RoundRectShape(new float[] {rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius}, null, null)); + } + + return new ColorDrawable(Color.WHITE); } }