fix: round the click ripple to match a clickable view's borderRadius

The press highlight is rendered on a separate transparent overlay
(?attr/selectableItemBackground) laid over each clickable view's bounds,
independently of the rendered widget bitmap. Because that overlay is a plain
rectangle, a rounded button or card showed a rectangular ripple on press that
didn't match its shape.

Plumb each clickable view's borderRadius (WidgetFactory -> ClickableView) and,
on API 31+, clip the overlay's outline to it with setViewOutlinePreferredRadius
so the ripple follows the view's corners. Touch bounds are unchanged (the
outline only clips drawing, so corners stay tappable), views with square
corners are untouched, and below API 31 the highlight stays rectangular.

Author: herethesavior

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 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.
+
 ## [0.20.3] - 2026-05-02
 
 ## Fixed

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

@@ -11,6 +11,7 @@
 import android.os.Build;
 import android.os.Bundle;
 import android.util.Base64;
+import android.util.TypedValue;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.RemoteViews;
@@ -179,6 +180,22 @@ 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. setViewOutlinePreferredRadius (API 31+) clips the overlay — and, via clipToOutline, its
+        // ripple — to a rounded outline that matches the view. 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.
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && clickableView.getBorderRadius() > 0f) {
+            clickableRemoteView.setViewOutlinePreferredRadius(
+                R.id.rn_widget_clickable_area,
+                clickableView.getBorderRadius(),
+                TypedValue.COMPLEX_UNIT_DIP
+            );
+        }
+
         if (clickableView.getAccessibilityLabel() != null) {
             clickableRemoteView.setContentDescription(R.id.rn_widget_clickable_area, clickableView.getAccessibilityLabel());
         }

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

@@ -10,17 +10,25 @@ 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) {
-        this(id, view, clickAction, clickActionData, null);
+        this(id, view, clickAction, clickActionData, null, 0f);
     }
 
     public ClickableView(String id, View view, String clickAction, ReadableMap clickActionData, String accessibilityLabel) {
+        this(id, view, clickAction, clickActionData, accessibilityLabel, 0f);
+    }
+
+    public ClickableView(String id, View view, String clickAction, ReadableMap clickActionData, String accessibilityLabel, float borderRadius) {
         this.id = id;
         this.view = view;
         this.clickAction = clickAction;
         this.clickActionData = clickActionData;
         this.accessibilityLabel = accessibilityLabel;
+        this.borderRadius = borderRadius;
     }
 
     public String getId() {
@@ -43,6 +51,10 @@ public String getAccessibilityLabel() {
         return accessibilityLabel;
     }
 
+    public float getBorderRadius() {
+        return borderRadius;
+    }
+
     @Override
     public int compareTo(ClickableView o) {
         return this.id.compareTo(o.getId());

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

@@ -91,17 +91,29 @@ private View buildWidget(ReactApplicationContext context, ReadableMap config, St
         }
 
         if (config.getMap("props").hasKey("clickAction")) {
+            ReadableMap props = config.getMap("props");
             String accessibilityLabel = null;
-            if (config.getMap("props").hasKey("accessibilityLabel")) {
-                accessibilityLabel = config.getMap("props").getString("accessibilityLabel");
+            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,
-                    config.getMap("props").getString("clickAction"),
-                    config.getMap("props").getMap("clickActionData"),
-                    accessibilityLabel
+                    props.getString("clickAction"),
+                    props.getMap("clickActionData"),
+                    accessibilityLabel,
+                    clickBorderRadius
                 )
             );
         }