From 7ab34e7bd9ce8ca9e7898e4d97e13fb2a78ced62 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 29 Jun 2022 19:17:51 -0500 Subject: [PATCH 1/5] Ripple radius now applies to corner radius instead of circular radius --- .../react/views/view/ReactDrawableHelper.java | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) 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..9e096a668c25bb 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; @@ -23,6 +25,8 @@ import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ViewProps; +import java.util.Collections; + /** * Utility class that helps with converting android drawable description used in JS to an actual * instance of {@link Drawable}. @@ -45,8 +49,7 @@ public static Drawable createDrawableFromJSDescription( Drawable drawable = getDefaultThemeDrawable(context); return setRadius(drawableDescriptionDict, drawable); } else if ("RippleAndroid".equals(type)) { - RippleDrawable rd = getRippleDrawable(context, drawableDescriptionDict); - return setRadius(drawableDescriptionDict, rd); + return getRippleDrawable(context, drawableDescriptionDict); } else { throw new JSApplicationIllegalArgumentException("Invalid type for android drawable: " + type); } @@ -106,11 +109,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; + } + + if (drawableDescriptionDict.hasKey("rippleRadius")) { + float rippleRadius = PixelUtil.toPixelFromDIP(drawableDescriptionDict.getDouble("rippleRadius")); + return new ShapeDrawable(new RoundRectShape(new float[] {rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius}, null, null)); } - return null; + + return new ColorDrawable(Color.WHITE); } } From e307d5c6185cd00dbf29e1d683ff6de4b3181ad6 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 5 Jul 2022 15:07:08 -0500 Subject: [PATCH 2/5] Piping new prop: cornerRadius --- Libraries/Components/Pressable/useAndroidRippleForView.js | 5 ++++- Libraries/Components/View/ViewPropTypes.js | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js index e9682d7027a148..d6ee9e8374d2fc 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, + cornerRippleRadius: ?number, |}>; export type RippleConfig = {| color?: ColorValue, borderless?: boolean, radius?: number, + cornerRadius?: number, foreground?: boolean, |}; @@ -45,7 +47,7 @@ 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 +66,7 @@ export default function useAndroidRippleForView( color: processedColor, borderless: borderless === true, rippleRadius: radius, + cornerRippleRadius: 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; From fc90f7ca5b9409def7ea675c97eedc2440df5ba8 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 5 Jul 2022 16:06:22 -0500 Subject: [PATCH 3/5] using new prop in Java --- .../com/facebook/react/views/view/ReactDrawableHelper.java | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 9e096a668c25bb..ca7d6a24dffaae 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 @@ -49,7 +49,8 @@ public static Drawable createDrawableFromJSDescription( Drawable drawable = getDefaultThemeDrawable(context); return setRadius(drawableDescriptionDict, drawable); } else if ("RippleAndroid".equals(type)) { - return getRippleDrawable(context, drawableDescriptionDict); + RippleDrawable rd = getRippleDrawable(context, drawableDescriptionDict); + return setRadius(drawableDescriptionDict, rd); } else { throw new JSApplicationIllegalArgumentException("Invalid type for android drawable: " + type); } @@ -114,8 +115,8 @@ private static int getColor(Context context, ReadableMap drawableDescriptionDict return null; } - if (drawableDescriptionDict.hasKey("rippleRadius")) { - float rippleRadius = PixelUtil.toPixelFromDIP(drawableDescriptionDict.getDouble("rippleRadius")); + if (drawableDescriptionDict.hasKey("cornerRippleRadius")) { + float rippleRadius = PixelUtil.toPixelFromDIP(drawableDescriptionDict.getDouble("cornerRippleRadius")); return new ShapeDrawable(new RoundRectShape(new float[] {rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius, rippleRadius}, null, null)); } From e6b45dc4a583c7a36b5714fc044e4560d98c20dd Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 5 Jul 2022 16:07:13 -0500 Subject: [PATCH 4/5] cleanup --- .../java/com/facebook/react/views/view/ReactDrawableHelper.java | 2 -- 1 file changed, 2 deletions(-) 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 ca7d6a24dffaae..7c987d6be5ef25 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 @@ -25,8 +25,6 @@ import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ViewProps; -import java.util.Collections; - /** * Utility class that helps with converting android drawable description used in JS to an actual * instance of {@link Drawable}. From 460c1c332633e0b7e160c49afaf2233a3d792049 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 5 Jul 2022 16:12:29 -0500 Subject: [PATCH 5/5] Prop name --- Libraries/Components/Pressable/useAndroidRippleForView.js | 7 ++++--- .../com/facebook/react/views/view/ReactDrawableHelper.java | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js index d6ee9e8374d2fc..1d5d6f2d0f5be8 100644 --- a/Libraries/Components/Pressable/useAndroidRippleForView.js +++ b/Libraries/Components/Pressable/useAndroidRippleForView.js @@ -21,7 +21,7 @@ type NativeBackgroundProp = $ReadOnly<{| color: ?number, borderless: boolean, rippleRadius: ?number, - cornerRippleRadius: ?number, + rippleCornerRadius: ?number, |}>; export type RippleConfig = {| @@ -47,7 +47,8 @@ export default function useAndroidRippleForView( | $ReadOnly<{|nativeBackgroundAndroid: NativeBackgroundProp|}> | $ReadOnly<{|nativeForegroundAndroid: NativeBackgroundProp|}>, |}> { - const {color, borderless, radius, cornerRadius, foreground} = rippleConfig ?? {}; + const {color, borderless, radius, cornerRadius, foreground} = + rippleConfig ?? {}; return useMemo(() => { if ( @@ -66,7 +67,7 @@ export default function useAndroidRippleForView( color: processedColor, borderless: borderless === true, rippleRadius: radius, - cornerRippleRadius: cornerRadius, + rippleCornerRadius: cornerRadius, }; return { 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 7c987d6be5ef25..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 @@ -113,8 +113,8 @@ private static int getColor(Context context, ReadableMap drawableDescriptionDict return null; } - if (drawableDescriptionDict.hasKey("cornerRippleRadius")) { - float rippleRadius = PixelUtil.toPixelFromDIP(drawableDescriptionDict.getDouble("cornerRippleRadius")); + 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)); }