feat: add animatable borderRadius with hardware-accelerated clipping

Uses ViewOutlineProvider + clipToOutline on Android and
layer.cornerRadius + layer.masksToBounds on iOS. Animated via
ObjectAnimator (Android) and CAAnimation (iOS) like other properties.

Includes codegen props, bitmask flag, style conflict stripping,
view recycling reset, tests, README docs, and eslint-disable for
existing no-bitwise warnings.

Author: janicduplessis

README.md

@@ -147,6 +147,23 @@ Use `{ type: 'none' }` to apply values immediately without animation. Useful for
 
 `onTransitionEnd` fires immediately with `{ finished: true }`.
 
+### Border Radius
+
+`borderRadius` can be animated just like other properties. It uses hardware-accelerated platform APIs — `ViewOutlineProvider` + `clipToOutline` on Android and `layer.cornerRadius` + `layer.masksToBounds` on iOS. Unlike RN's style-based `borderRadius` (which uses a Canvas drawable on Android), this clips children properly and is GPU-accelerated.
+
+```tsx
+<EaseView
+  animate={{ borderRadius: expanded ? 0 : 16 }}
+  transition={{ type: 'timing', duration: 300 }}
+  style={styles.card}
+>
+  <Image source={heroImage} style={styles.image} />
+  <Text>Content is clipped to rounded corners</Text>
+</EaseView>
+```
+
+When `borderRadius` is in `animate`, any `borderRadius` in `style` is automatically stripped to avoid conflicts.
+
 ### Animatable Properties
 
 All properties are set in the `animate` prop as flat values (no transform array).
@@ -163,6 +180,7 @@ All properties are set in the `animate` prop as flat values (no transform array)
     rotate: 0,        // Z-axis rotation in degrees
     rotateX: 0,       // X-axis rotation in degrees (3D)
     rotateY: 0,       // Y-axis rotation in degrees (3D)
+    borderRadius: 0,  // pixels (hardware-accelerated, clips children)
   }}
 />
 ```
@@ -306,6 +324,7 @@ A `View` that animates property changes using native platform APIs.
 | `rotate` | `number` | `0` | Z-axis rotation in degrees |
 | `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
 | `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
+| `borderRadius` | `number` | `0` | Border radius in pixels (hardware-accelerated, clips children) |
 
 Properties not specified in `animate` default to their identity values.
 

android/src/main/java/com/ease/EaseView.kt

@@ -4,7 +4,9 @@ import android.animation.Animator
 import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.content.Context
+import android.graphics.Outline
 import android.view.View
+import android.view.ViewOutlineProvider
 import android.view.animation.PathInterpolator
 import androidx.dynamicanimation.animation.DynamicAnimation
 import androidx.dynamicanimation.animation.SpringAnimation
@@ -23,6 +25,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     private var prevRotate: Float? = null
     private var prevRotateX: Float? = null
     private var prevRotateY: Float? = null
+    private var prevBorderRadius: Float? = null
 
     // --- First mount tracking ---
     private var isFirstMount: Boolean = true
@@ -48,6 +51,23 @@ class EaseView(context: Context) : ReactViewGroup(context) {
             applyTransformOrigin()
         }
 
+    // --- Border radius (hardware-accelerated via outline clipping) ---
+    // Animated via ObjectAnimator("borderRadius") — setter invalidates outline each frame.
+    private var _borderRadius: Float = 0f
+
+    fun getBorderRadius(): Float = _borderRadius
+    fun setBorderRadius(value: Float) {
+        if (_borderRadius != value) {
+            _borderRadius = value
+            if (value > 0f) {
+                clipToOutline = true
+            } else {
+                clipToOutline = false
+            }
+            invalidateOutline()
+        }
+    }
+
     // --- Hardware layer ---
     var useHardwareLayer: Boolean = false
 
@@ -68,6 +88,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     var initialAnimateRotate: Float = 0.0f
     var initialAnimateRotateX: Float = 0.0f
     var initialAnimateRotateY: Float = 0.0f
+    var initialAnimateBorderRadius: Float = 0.0f
 
     // --- Pending animate values (buffered per-view, applied in onAfterUpdateTransaction) ---
     var pendingOpacity: Float = 1.0f
@@ -78,6 +99,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     var pendingRotate: Float = 0.0f
     var pendingRotateX: Float = 0.0f
     var pendingRotateY: Float = 0.0f
+    var pendingBorderRadius: Float = 0.0f
 
     // --- Running animations ---
     private val runningAnimators = mutableMapOf<String, ObjectAnimator>()
@@ -97,12 +119,19 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         const val MASK_ROTATE = 1 shl 5
         const val MASK_ROTATE_X = 1 shl 6
         const val MASK_ROTATE_Y = 1 shl 7
-
+        const val MASK_BORDER_RADIUS = 1 shl 8
     }
 
     init {
         // Set camera distance for 3D perspective rotations (rotateX/rotateY)
         cameraDistance = resources.displayMetrics.density * 850f
+
+        // ViewOutlineProvider reads _borderRadius dynamically — set once, invalidated on each frame.
+        outlineProvider = object : ViewOutlineProvider() {
+            override fun getOutline(view: View, outline: Outline) {
+                outline.setRoundRect(0, 0, view.width, view.height, _borderRadius)
+            }
+        }
     }
 
     // --- Hardware layer management ---
@@ -140,7 +169,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     }
 
     fun applyPendingAnimateValues() {
-        applyAnimateValues(pendingOpacity, pendingTranslateX, pendingTranslateY, pendingScaleX, pendingScaleY, pendingRotate, pendingRotateX, pendingRotateY)
+        applyAnimateValues(pendingOpacity, pendingTranslateX, pendingTranslateY, pendingScaleX, pendingScaleY, pendingRotate, pendingRotateX, pendingRotateY, pendingBorderRadius)
     }
 
     private fun applyAnimateValues(
@@ -151,7 +180,8 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         scaleY: Float,
         rotate: Float,
         rotateX: Float,
-        rotateY: Float
+        rotateY: Float,
+        borderRadius: Float
     ) {
         if (pendingBatchAnimationCount > 0) {
             onTransitionEnd?.invoke(false)
@@ -175,7 +205,8 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 (mask and MASK_SCALE_Y != 0 && initialAnimateScaleY != scaleY) ||
                 (mask and MASK_ROTATE != 0 && initialAnimateRotate != rotate) ||
                 (mask and MASK_ROTATE_X != 0 && initialAnimateRotateX != rotateX) ||
-                (mask and MASK_ROTATE_Y != 0 && initialAnimateRotateY != rotateY)
+                (mask and MASK_ROTATE_Y != 0 && initialAnimateRotateY != rotateY) ||
+                (mask and MASK_BORDER_RADIUS != 0 && initialAnimateBorderRadius != borderRadius)
 
             if (hasInitialAnimation) {
                 // Set initial values for animated properties
@@ -187,6 +218,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 if (mask and MASK_ROTATE != 0) this.rotation = initialAnimateRotate
                 if (mask and MASK_ROTATE_X != 0) this.rotationX = initialAnimateRotateX
                 if (mask and MASK_ROTATE_Y != 0) this.rotationY = initialAnimateRotateY
+                if (mask and MASK_BORDER_RADIUS != 0) setBorderRadius(initialAnimateBorderRadius)
 
                 // Animate properties that differ from initial to target
                 if (mask and MASK_OPACITY != 0 && initialAnimateOpacity != opacity) {
@@ -213,6 +245,9 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 if (mask and MASK_ROTATE_Y != 0 && initialAnimateRotateY != rotateY) {
                     animateProperty("rotationY", DynamicAnimation.ROTATION_Y, initialAnimateRotateY, rotateY, loop = true)
                 }
+                if (mask and MASK_BORDER_RADIUS != 0 && initialAnimateBorderRadius != borderRadius) {
+                    animateProperty("borderRadius", null, initialAnimateBorderRadius, borderRadius, loop = true)
+                }
             } else {
                 // No initial animation — set target values directly (skip non-animated)
                 if (mask and MASK_OPACITY != 0) this.alpha = opacity
@@ -223,6 +258,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 if (mask and MASK_ROTATE != 0) this.rotation = rotate
                 if (mask and MASK_ROTATE_X != 0) this.rotationX = rotateX
                 if (mask and MASK_ROTATE_Y != 0) this.rotationY = rotateY
+                if (mask and MASK_BORDER_RADIUS != 0) setBorderRadius(borderRadius)
             }
         } else if (transitionType == "none") {
             // No transition — set values immediately, cancel running animations
@@ -235,6 +271,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
             if (mask and MASK_ROTATE != 0) this.rotation = rotate
             if (mask and MASK_ROTATE_X != 0) this.rotationX = rotateX
             if (mask and MASK_ROTATE_Y != 0) this.rotationY = rotateY
+            if (mask and MASK_BORDER_RADIUS != 0) setBorderRadius(borderRadius)
             onTransitionEnd?.invoke(true)
         } else {
             // Subsequent updates: animate changed properties (skip non-animated)
@@ -277,6 +314,11 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 val from = getCurrentValue("rotationY")
                 animateProperty("rotationY", DynamicAnimation.ROTATION_Y, from, rotateY)
             }
+
+            if (prevBorderRadius != null && mask and MASK_BORDER_RADIUS != 0 && prevBorderRadius != borderRadius) {
+                val from = getCurrentValue("borderRadius")
+                animateProperty("borderRadius", null, from, borderRadius)
+            }
         }
 
         prevOpacity = opacity
@@ -287,6 +329,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         prevRotate = rotate
         prevRotateX = rotateX
         prevRotateY = rotateY
+        prevBorderRadius = borderRadius
     }
 
     private fun getCurrentValue(propertyName: String): Float = when (propertyName) {
@@ -298,17 +341,18 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         "rotation" -> this.rotation
         "rotationX" -> this.rotationX
         "rotationY" -> this.rotationY
+        "borderRadius" -> getBorderRadius()
         else -> 0f
     }
 
     private fun animateProperty(
         propertyName: String,
-        viewProperty: DynamicAnimation.ViewProperty,
+        viewProperty: DynamicAnimation.ViewProperty?,
         fromValue: Float,
         toValue: Float,
         loop: Boolean = false
     ) {
-        if (transitionType == "spring") {
+        if (transitionType == "spring" && viewProperty != null) {
             animateSpring(viewProperty, toValue)
         } else {
             animateTiming(propertyName, fromValue, toValue, loop)
@@ -479,6 +523,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         prevRotate = null
         prevRotateX = null
         prevRotateY = null
+        prevBorderRadius = null
 
         this.alpha = 1f
         this.translationX = 0f
@@ -488,6 +533,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         this.rotation = 0f
         this.rotationX = 0f
         this.rotationY = 0f
+        setBorderRadius(0f)
 
         isFirstMount = true
         transitionLoop = "none"

android/src/main/java/com/ease/EaseViewManager.kt

@@ -120,6 +120,11 @@ class EaseViewManager : ReactViewManager() {
         view.initialAnimateRotateY = value
     }
 
+    @ReactProp(name = "initialAnimateBorderRadius", defaultFloat = 0f)
+    fun setInitialAnimateBorderRadius(view: EaseView, value: Float) {
+        view.initialAnimateBorderRadius = PixelUtil.toPixelFromDIP(value)
+    }
+
     // --- Transition config setters ---
 
     @ReactProp(name = "transitionType")
@@ -167,6 +172,13 @@ class EaseViewManager : ReactViewManager() {
         view.transitionLoop = value ?: "none"
     }
 
+    // --- Border radius ---
+
+    @ReactProp(name = "animateBorderRadius", defaultFloat = 0f)
+    fun setAnimateBorderRadius(view: EaseView, value: Float) {
+        view.pendingBorderRadius = PixelUtil.toPixelFromDIP(value)
+    }
+
     // --- Hardware layer ---
 
     @ReactProp(name = "useHardwareLayer", defaultBoolean = false)

ios/EaseView.mm

@@ -14,6 +14,7 @@
 // Animation key constants
 static NSString *const kAnimKeyOpacity = @"ease_opacity";
 static NSString *const kAnimKeyTransform = @"ease_transform";
+static NSString *const kAnimKeyCornerRadius = @"ease_cornerRadius";
 
 static inline CGFloat degreesToRadians(CGFloat degrees) {
   return degrees * M_PI / 180.0;
@@ -45,6 +46,7 @@ static CATransform3D composeTransform(CGFloat scaleX, CGFloat scaleY,
 static const int kMaskRotate = 1 << 5;
 static const int kMaskRotateX = 1 << 6;
 static const int kMaskRotateY = 1 << 7;
+static const int kMaskBorderRadius = 1 << 8;
 static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
                                      kMaskScaleX | kMaskScaleY | kMaskRotate |
                                      kMaskRotateX | kMaskRotateY;
@@ -249,6 +251,10 @@ - (void)updateProps:(const Props::Shared &)props
         (mask & kMaskOpacity) &&
         newViewProps.initialAnimateOpacity != newViewProps.animateOpacity;
 
+    BOOL hasInitialBorderRadius =
+        (mask & kMaskBorderRadius) && newViewProps.initialAnimateBorderRadius !=
+                                          newViewProps.animateBorderRadius;
+
     BOOL hasInitialTransform = NO;
     CATransform3D initialT = CATransform3DIdentity;
     CATransform3D targetT = CATransform3DIdentity;
@@ -259,12 +265,18 @@ - (void)updateProps:(const Props::Shared &)props
       hasInitialTransform = !CATransform3DEqualToTransform(initialT, targetT);
     }
 
-    if (hasInitialOpacity || hasInitialTransform) {
+    if (hasInitialOpacity || hasInitialTransform || hasInitialBorderRadius) {
       // Set initial values
       if (mask & kMaskOpacity)
         self.layer.opacity = newViewProps.initialAnimateOpacity;
       if (hasTransform)
         self.layer.transform = initialT;
+      if (mask & kMaskBorderRadius) {
+        self.layer.cornerRadius = newViewProps.initialAnimateBorderRadius;
+        self.layer.masksToBounds =
+            newViewProps.initialAnimateBorderRadius > 0 ||
+            newViewProps.animateBorderRadius > 0;
+      }
 
       // Animate from initial to target
       if (hasInitialOpacity) {
@@ -285,12 +297,26 @@ - (void)updateProps:(const Props::Shared &)props
                                  props:newViewProps
                                   loop:YES];
       }
+      if (hasInitialBorderRadius) {
+        self.layer.cornerRadius = newViewProps.animateBorderRadius;
+        [self
+            applyAnimationForKeyPath:@"cornerRadius"
+                        animationKey:kAnimKeyCornerRadius
+                           fromValue:@(newViewProps.initialAnimateBorderRadius)
+                             toValue:@(newViewProps.animateBorderRadius)
+                               props:newViewProps
+                                loop:YES];
+      }
     } else {
       // No initial animation — set target values directly
       if (mask & kMaskOpacity)
         self.layer.opacity = newViewProps.animateOpacity;
       if (hasTransform)
         self.layer.transform = targetT;
+      if (mask & kMaskBorderRadius) {
+        self.layer.cornerRadius = newViewProps.animateBorderRadius;
+        self.layer.masksToBounds = newViewProps.animateBorderRadius > 0;
+      }
     }
   } else if (newViewProps.transitionType == EaseViewTransitionType::None) {
     // No transition — set values immediately
@@ -299,6 +325,10 @@ - (void)updateProps:(const Props::Shared &)props
       self.layer.opacity = newViewProps.animateOpacity;
     if (hasTransform)
       self.layer.transform = [self targetTransformFromProps:newViewProps];
+    if (mask & kMaskBorderRadius) {
+      self.layer.cornerRadius = newViewProps.animateBorderRadius;
+      self.layer.masksToBounds = newViewProps.animateBorderRadius > 0;
+    }
     if (_eventEmitter) {
       auto emitter =
           std::static_pointer_cast<const EaseViewEventEmitter>(_eventEmitter);
@@ -346,6 +376,19 @@ - (void)updateProps:(const Props::Shared &)props
                                   loop:NO];
       }
     }
+
+    if ((mask & kMaskBorderRadius) &&
+        oldViewProps.animateBorderRadius != newViewProps.animateBorderRadius) {
+      self.layer.cornerRadius = newViewProps.animateBorderRadius;
+      self.layer.masksToBounds = newViewProps.animateBorderRadius > 0;
+      [self applyAnimationForKeyPath:@"cornerRadius"
+                        animationKey:kAnimKeyCornerRadius
+                           fromValue:[self presentationValueForKeyPath:
+                                               @"cornerRadius"]
+                             toValue:@(newViewProps.animateBorderRadius)
+                               props:newViewProps
+                                loop:NO];
+    }
   }
 
   [CATransaction commit];
@@ -385,6 +428,8 @@ - (void)prepareForRecycle {
   self.layer.anchorPoint = CGPointMake(0.5, 0.5);
   self.layer.opacity = 1.0;
   self.layer.transform = CATransform3DIdentity;
+  self.layer.cornerRadius = 0;
+  self.layer.masksToBounds = NO;
 }
 
 @end