fix: round ripple only for uniform borderRadius, and support lists + preview

Address PR review feedback:
- Only round the press highlight when all four corners share the same
  radius, via a new getUniformBorderRadius helper; non-uniform radii fall
  back to the rectangular highlight instead of assuming topLeft.
- Apply the same rounding to collection (list) item clickable areas in
  RNWidgetCollectionService, plumbing borderRadius through the item data.
- Round the ripple in WidgetPreview so it matches the on-device result
  while working on the widget.
- Simplify/remove comments per review.

Author: herethesavior

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Fixed
 
-- The press highlight (ripple) of a clickable view is drawn on a separate overlay, so it ignored the view's `borderRadius` and always appeared as a rectangle over rounded buttons/cards. It now follows the clickable view's `borderRadius` on Android 12+ (API 31+) via `setViewOutlinePreferredRadius`; views with square corners and older versions are unchanged.
+- Match clickable view ripple corners to uniform `borderRadius` on Android 12+.
 
 ## [0.20.3] - 2026-05-02
 

android/src/main/java/com/reactnativeandroidwidget/RNWidget.java

@@ -180,18 +180,7 @@ private void addClickableArea(RemoteViews widgetView, ViewGroup rootWidget, Clic
 
         clickableRemoteView.setInt(R.id.rn_widget_clickable_area, "setMinimumHeight", offsetViewBounds.height());
 
-        // Round the press-highlight to match the clickable view's own corner radius. The ripple lives
-        // on THIS separate overlay (rn_widget_clickable_area, background = ?attr/selectableItemBackground)
-        // laid over the view's bounds — it is NOT the rendered widget bitmap, so a rounded view (e.g. a
-        // pill-shaped button or a card with a borderRadius) otherwise gets a RECTANGULAR highlight on
-        // press. Rounding needs BOTH calls (API 31+): setViewOutlinePreferredRadius gives the overlay a
-        // round-rect OutlineProvider, and setClipToOutline=true makes the view actually clip its drawing
-        // (including the ripple background) to that outline — an outline on its own does not clip. This
-        // mirrors AndroidX RemoteViewsCompat (setViewOutlinePreferredRadius + setViewClipToOutline, both
-        // @RequiresApi(31)); setBoolean invokes View#setClipToOutline directly, avoiding a new dependency.
-        // Touch bounds are unaffected (the outline only clips drawing), so the corners stay tappable.
-        // Views with square corners (radius 0) are left untouched, and below API 31 the highlight remains
-        // rectangular.
+        // The clickable overlay draws its own ripple, so match it to the view's radius when supported
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && clickableView.getBorderRadius() > 0f) {
             clickableRemoteView.setViewOutlinePreferredRadius(
                 R.id.rn_widget_clickable_area,
@@ -311,6 +300,7 @@ private Intent createCollectionRemoteAdapterIntent(int widgetId, int collectionI
                 collectionViewMap.putInt("width", offsetViewBounds.width());
                 collectionViewMap.putString("clickAction", clickableView.getClickAction());
                 collectionViewMap.putBundle("clickActionData", Arguments.toBundle(clickableView.getClickActionData()));
+                collectionViewMap.putFloat("borderRadius", clickableView.getBorderRadius());
 
                 // Add clickable area accessibility label if available
                 if (clickableView.getAccessibilityLabel() != null) {
@@ -378,6 +368,7 @@ private WritableMap createClickableAreaPreview(ViewGroup rootView, ClickableView
         clickableViewMap.putDouble("height", RNWidgetUtil.pxToDp(appContext, offsetViewBounds.height()));
         clickableViewMap.putString("clickAction", clickableView.getClickAction());
         clickableViewMap.putMap("clickActionData", Arguments.makeNativeMap(clickableView.getClickActionData().toHashMap()));
+        clickableViewMap.putDouble("borderRadius", clickableView.getBorderRadius());
 
         return clickableViewMap;
     }
@@ -443,6 +434,7 @@ private WritableArray createCollectionItemClickableAreas(CollectionViewItem coll
             collectionViewMap.putDouble("height", RNWidgetUtil.pxToDp(appContext, offsetViewBounds.height()));
             collectionViewMap.putString("clickAction", clickableView.getClickAction());
             collectionViewMap.putMap("clickActionData", Arguments.makeNativeMap(clickableView.getClickActionData().toHashMap()));
+            collectionViewMap.putDouble("borderRadius", clickableView.getBorderRadius());
 
             clickableAreas.pushMap(collectionViewMap);
         }

android/src/main/java/com/reactnativeandroidwidget/RNWidgetCollectionService.java

@@ -8,6 +8,7 @@
 import android.net.Uri;
 import android.os.Build;
 import android.os.Bundle;
+import android.util.TypedValue;
 import android.widget.RemoteViews;
 import android.widget.RemoteViewsService;
 
@@ -116,6 +117,17 @@ private void addClickableArea(RemoteViews widgetView, Bundle clickableArea, int
 
         clickableRemoteView.setInt(R.id.rn_widget_clickable_area, "setMinimumHeight", clickableArea.getInt("height"));
 
+        // The clickable overlay draws its own ripple, so match it to the view's radius when supported
+        float borderRadius = clickableArea.getFloat("borderRadius", 0f);
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && borderRadius > 0f) {
+            clickableRemoteView.setViewOutlinePreferredRadius(
+                R.id.rn_widget_clickable_area,
+                borderRadius,
+                TypedValue.COMPLEX_UNIT_DIP
+            );
+            clickableRemoteView.setBoolean(R.id.rn_widget_clickable_area, "setClipToOutline", true);
+        }
+
         // Set accessibility label on clickable area if available
         if (clickableArea.getString("accessibilityLabel", null) != null) {
             clickableRemoteView.setContentDescription(R.id.rn_widget_clickable_area, clickableArea.getString("accessibilityLabel"));

android/src/main/java/com/reactnativeandroidwidget/builder/ClickableView.java

@@ -10,8 +10,6 @@ public class ClickableView implements Comparable<ClickableView> {
     private final String clickAction;
     private final ReadableMap clickActionData;
     private final String accessibilityLabel;
-    // Corner radius (dp) of the clickable view, so the press-highlight overlay can be rounded to match
-    // it (see RNWidget#addClickableArea). 0 = square corners (the default / previous behavior).
     private final float borderRadius;
 
     public ClickableView(String id, View view, String clickAction, ReadableMap clickActionData) {

android/src/main/java/com/reactnativeandroidwidget/builder/WidgetFactory.java

@@ -96,31 +96,41 @@ private View buildWidget(ReactApplicationContext context, ReadableMap config, St
             if (props.hasKey("accessibilityLabel")) {
                 accessibilityLabel = props.getString("accessibilityLabel");
             }
-            // Carry the view's corner radius (dp) so its press-highlight overlay can be rounded to
-            // match (see RNWidget#addClickableArea). borderRadius is serialised as a per-corner map;
-            // widgets typically use a uniform radius, so topLeft represents the shape. Absent/null → 0.
-            float clickBorderRadius = 0f;
-            if (props.hasKey("borderRadius") && !props.isNull("borderRadius")) {
-                ReadableMap borderRadius = props.getMap("borderRadius");
-                if (borderRadius != null && borderRadius.hasKey("topLeft")) {
-                    clickBorderRadius = (float) borderRadius.getDouble("topLeft");
-                }
-            }
             clickableViews.add(
                 new ClickableView(
                     id,
                     view,
                     props.getString("clickAction"),
                     props.getMap("clickActionData"),
                     accessibilityLabel,
-                    clickBorderRadius
+                    getUniformBorderRadius(props)
                 )
             );
         }
 
         return view;
     }
 
+    private float getUniformBorderRadius(ReadableMap props) {
+        if (!props.hasKey("borderRadius") || props.isNull("borderRadius")) {
+            return 0f;
+        }
+
+        ReadableMap radius = props.getMap("borderRadius");
+        if (radius == null) {
+            return 0f;
+        }
+
+        double topLeft = radius.hasKey("topLeft") ? radius.getDouble("topLeft") : 0;
+        double topRight = radius.hasKey("topRight") ? radius.getDouble("topRight") : 0;
+        double bottomRight = radius.hasKey("bottomRight") ? radius.getDouble("bottomRight") : 0;
+        double bottomLeft = radius.hasKey("bottomLeft") ? radius.getDouble("bottomLeft") : 0;
+
+        return topLeft == topRight && topLeft == bottomRight && topLeft == bottomLeft
+            ? (float) topLeft
+            : 0f;
+    }
+
     @NonNull
     private BaseWidget<? extends View> getBaseWidget(ReactApplicationContext context, ReadableMap config, String id) throws Exception {
         switch (Objects.requireNonNull(config.getString("type"))) {

src/api/WidgetPreview.tsx

@@ -258,32 +258,43 @@ function ClickableAreaButton({
   highlightClickableAreas,
 }: ClickableAreaButtonProps) {
   return (
-    <TouchableNativeFeedback onPress={() => onClick(area)}>
-      <View
-        style={{
-          position: 'absolute',
-          left: area.left,
-          top: area.top,
-          width: area.width,
-          height: area.height,
-          borderColor: 'red',
-          borderWidth: highlightClickableAreas ? 1 : 0,
-        }}
-      >
-        {highlightClickableAreas ? <ClickableAreaBorder /> : null}
-      </View>
-    </TouchableNativeFeedback>
+    <View
+      style={{
+        position: 'absolute',
+        left: area.left,
+        top: area.top,
+        width: area.width,
+        height: area.height,
+      }}
+    >
+      <TouchableNativeFeedback onPress={() => onClick(area)}>
+        {/* borderRadius + overflow clip the press ripple to the view's rounded corners so the
+            preview matches the on-device rounded ripple (see RNWidget#addClickableArea). The
+            highlight markers live on the parent so they are not clipped. */}
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            borderColor: 'red',
+            borderWidth: highlightClickableAreas ? 1 : 0,
+            borderRadius: area.borderRadius,
+            overflow: 'hidden',
+          }}
+        />
+      </TouchableNativeFeedback>
+      {highlightClickableAreas ? <ClickableAreaBorder /> : null}
+    </View>
   );
 }
 
 function ClickableAreaBorder() {
   return (
-    <>
+    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
       <View style={styles.clickableHighlightTopLeft} />
       <View style={styles.clickableHighlightTopRight} />
       <View style={styles.clickableHighlightBottomLeft} />
       <View style={styles.clickableHighlightBottomRight} />
-    </>
+    </View>
   );
 }
 

src/api/private.types.ts

@@ -8,6 +8,7 @@ export interface ClickableArea extends OnClick {
   top: number;
   width: number;
   height: number;
+  borderRadius: number;
 }
 
 export interface CollectionItem extends OnClick {