react-native-ease 0.1.0-alpha.0 → 0.2.0

package/README.md

@@ -164,6 +164,24 @@ Use `{ type: 'none' }` to apply values immediately without animation. Useful for
 
 When `borderRadius` is in `animate`, any `borderRadius` in `style` is automatically stripped to avoid conflicts.
 
+### Background Color
+
+`backgroundColor` can be animated using any React Native color value. Colors are converted to native ARGB integers via `processColor()`.
+
+```tsx
+<EaseView
+  animate={{ backgroundColor: isActive ? '#3B82F6' : '#E5E7EB' }}
+  transition={{ type: 'timing', duration: 300 }}
+  style={styles.card}
+>
+  <Text>Tap to change color</Text>
+</EaseView>
+```
+
+On Android, background color uses `ValueAnimator.ofArgb()` (timing only — spring is not supported for colors). On iOS, it uses `CAAnimation` on the `backgroundColor` layer key path and supports both timing and spring transitions.
+
+When `backgroundColor` is in `animate`, any `backgroundColor` in `style` is automatically stripped to avoid conflicts.
+
 ### Animatable Properties
 
 All properties are set in the `animate` prop as flat values (no transform array).
@@ -181,6 +199,7 @@ All properties are set in the `animate` prop as flat values (no transform array)
     rotateX: 0,       // X-axis rotation in degrees (3D)
     rotateY: 0,       // Y-axis rotation in degrees (3D)
     borderRadius: 0,  // pixels (hardware-accelerated, clips children)
+    backgroundColor: 'transparent', // any RN color value
   }}
 />
 ```
@@ -325,6 +344,7 @@ A `View` that animates property changes using native platform APIs.
 | `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) |
+| `backgroundColor` | `ColorValue` | `'transparent'` | Background color (any RN color value). Timing-only on Android, spring+timing on iOS. |
 
 Properties not specified in `animate` default to their identity values.
 

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

@@ -3,7 +3,9 @@ package com.ease
 import android.animation.Animator
 import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
+import android.animation.ValueAnimator
 import android.content.Context
+import android.graphics.Color
 import android.graphics.Outline
 import android.view.View
 import android.view.ViewOutlineProvider
@@ -26,6 +28,8 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     private var prevRotateX: Float? = null
     private var prevRotateY: Float? = null
     private var prevBorderRadius: Float? = null
+    private var prevBackgroundColor: Int? = null
+    private var currentBackgroundColor: Int = Color.TRANSPARENT
 
     // --- First mount tracking ---
     private var isFirstMount: Boolean = true
@@ -52,11 +56,13 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         }
 
     // --- Border radius (hardware-accelerated via outline clipping) ---
-    // Animated via ObjectAnimator("borderRadius") — setter invalidates outline each frame.
+    // Animated via ObjectAnimator("animateBorderRadius") — setter invalidates outline each frame.
     private var _borderRadius: Float = 0f
 
-    fun getBorderRadius(): Float = _borderRadius
-    fun setBorderRadius(value: Float) {
+    @Suppress("unused") // Used by ObjectAnimator via reflection
+    fun getAnimateBorderRadius(): Float = _borderRadius
+    @Suppress("unused") // Used by ObjectAnimator via reflection
+    fun setAnimateBorderRadius(value: Float) {
         if (_borderRadius != value) {
             _borderRadius = value
             if (value > 0f) {
@@ -89,6 +95,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     var initialAnimateRotateX: Float = 0.0f
     var initialAnimateRotateY: Float = 0.0f
     var initialAnimateBorderRadius: Float = 0.0f
+    var initialAnimateBackgroundColor: Int = Color.TRANSPARENT
 
     // --- Pending animate values (buffered per-view, applied in onAfterUpdateTransaction) ---
     var pendingOpacity: Float = 1.0f
@@ -100,9 +107,10 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     var pendingRotateX: Float = 0.0f
     var pendingRotateY: Float = 0.0f
     var pendingBorderRadius: Float = 0.0f
+    var pendingBackgroundColor: Int = Color.TRANSPARENT
 
     // --- Running animations ---
-    private val runningAnimators = mutableMapOf<String, ObjectAnimator>()
+    private val runningAnimators = mutableMapOf<String, Animator>()
     private val runningSpringAnimations = mutableMapOf<DynamicAnimation.ViewProperty, SpringAnimation>()
 
     // --- Animated properties bitmask (set by ViewManager) ---
@@ -120,6 +128,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         const val MASK_ROTATE_X = 1 shl 6
         const val MASK_ROTATE_Y = 1 shl 7
         const val MASK_BORDER_RADIUS = 1 shl 8
+        const val MASK_BACKGROUND_COLOR = 1 shl 9
     }
 
     init {
@@ -169,7 +178,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     }
 
     fun applyPendingAnimateValues() {
-        applyAnimateValues(pendingOpacity, pendingTranslateX, pendingTranslateY, pendingScaleX, pendingScaleY, pendingRotate, pendingRotateX, pendingRotateY, pendingBorderRadius)
+        applyAnimateValues(pendingOpacity, pendingTranslateX, pendingTranslateY, pendingScaleX, pendingScaleY, pendingRotate, pendingRotateX, pendingRotateY, pendingBorderRadius, pendingBackgroundColor)
     }
 
     private fun applyAnimateValues(
@@ -181,7 +190,8 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         rotate: Float,
         rotateX: Float,
         rotateY: Float,
-        borderRadius: Float
+        borderRadius: Float,
+        backgroundColor: Int
     ) {
         if (pendingBatchAnimationCount > 0) {
             onTransitionEnd?.invoke(false)
@@ -206,7 +216,8 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                 (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_BORDER_RADIUS != 0 && initialAnimateBorderRadius != borderRadius)
+                (mask and MASK_BORDER_RADIUS != 0 && initialAnimateBorderRadius != borderRadius) ||
+                (mask and MASK_BACKGROUND_COLOR != 0 && initialAnimateBackgroundColor != backgroundColor)
 
             if (hasInitialAnimation) {
                 // Set initial values for animated properties
@@ -218,7 +229,8 @@ 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)
+                if (mask and MASK_BORDER_RADIUS != 0) setAnimateBorderRadius(initialAnimateBorderRadius)
+                if (mask and MASK_BACKGROUND_COLOR != 0) applyBackgroundColor(initialAnimateBackgroundColor)
 
                 // Animate properties that differ from initial to target
                 if (mask and MASK_OPACITY != 0 && initialAnimateOpacity != opacity) {
@@ -246,7 +258,10 @@ class EaseView(context: Context) : ReactViewGroup(context) {
                     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)
+                    animateProperty("animateBorderRadius", null, initialAnimateBorderRadius, borderRadius, loop = true)
+                }
+                if (mask and MASK_BACKGROUND_COLOR != 0 && initialAnimateBackgroundColor != backgroundColor) {
+                    animateBackgroundColor(initialAnimateBackgroundColor, backgroundColor, loop = true)
                 }
             } else {
                 // No initial animation — set target values directly (skip non-animated)
@@ -258,7 +273,8 @@ 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)
+                if (mask and MASK_BORDER_RADIUS != 0) setAnimateBorderRadius(borderRadius)
+                if (mask and MASK_BACKGROUND_COLOR != 0) applyBackgroundColor(backgroundColor)
             }
         } else if (transitionType == "none") {
             // No transition — set values immediately, cancel running animations
@@ -271,7 +287,8 @@ 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)
+            if (mask and MASK_BORDER_RADIUS != 0) setAnimateBorderRadius(borderRadius)
+            if (mask and MASK_BACKGROUND_COLOR != 0) applyBackgroundColor(backgroundColor)
             onTransitionEnd?.invoke(true)
         } else {
             // Subsequent updates: animate changed properties (skip non-animated)
@@ -316,8 +333,12 @@ class EaseView(context: Context) : ReactViewGroup(context) {
             }
 
             if (prevBorderRadius != null && mask and MASK_BORDER_RADIUS != 0 && prevBorderRadius != borderRadius) {
-                val from = getCurrentValue("borderRadius")
-                animateProperty("borderRadius", null, from, borderRadius)
+                val from = getCurrentValue("animateBorderRadius")
+                animateProperty("animateBorderRadius", null, from, borderRadius)
+            }
+
+            if (prevBackgroundColor != null && mask and MASK_BACKGROUND_COLOR != 0 && prevBackgroundColor != backgroundColor) {
+                animateBackgroundColor(getCurrentBackgroundColor(), backgroundColor)
             }
         }
 
@@ -330,6 +351,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         prevRotateX = rotateX
         prevRotateY = rotateY
         prevBorderRadius = borderRadius
+        prevBackgroundColor = backgroundColor
     }
 
     private fun getCurrentValue(propertyName: String): Float = when (propertyName) {
@@ -341,10 +363,63 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         "rotation" -> this.rotation
         "rotationX" -> this.rotationX
         "rotationY" -> this.rotationY
-        "borderRadius" -> getBorderRadius()
+        "animateBorderRadius" -> getAnimateBorderRadius()
         else -> 0f
     }
 
+    private fun getCurrentBackgroundColor(): Int {
+        return currentBackgroundColor
+    }
+
+    private fun applyBackgroundColor(color: Int) {
+        currentBackgroundColor = color
+        setBackgroundColor(color)
+    }
+
+    private fun animateBackgroundColor(fromColor: Int, toColor: Int, loop: Boolean = false) {
+        runningAnimators["backgroundColor"]?.cancel()
+
+        val batchId = animationBatchId
+        pendingBatchAnimationCount++
+
+        val animator = ValueAnimator.ofArgb(fromColor, toColor).apply {
+            duration = transitionDuration.toLong()
+            interpolator = PathInterpolator(
+                transitionEasingBezier[0], transitionEasingBezier[1],
+                transitionEasingBezier[2], transitionEasingBezier[3]
+            )
+            if (loop && transitionLoop != "none") {
+                repeatCount = ValueAnimator.INFINITE
+                repeatMode = if (transitionLoop == "reverse") ValueAnimator.REVERSE else ValueAnimator.RESTART
+            }
+            addUpdateListener { animation ->
+                val color = animation.animatedValue as Int
+                this@EaseView.currentBackgroundColor = color
+                this@EaseView.setBackgroundColor(color)
+            }
+            addListener(object : AnimatorListenerAdapter() {
+                private var cancelled = false
+                override fun onAnimationStart(animation: Animator) {
+                    this@EaseView.onEaseAnimationStart()
+                }
+                override fun onAnimationCancel(animation: Animator) { cancelled = true }
+                override fun onAnimationEnd(animation: Animator) {
+                    this@EaseView.onEaseAnimationEnd()
+                    if (batchId == animationBatchId) {
+                        if (cancelled) anyInterrupted = true
+                        pendingBatchAnimationCount--
+                        if (pendingBatchAnimationCount <= 0) {
+                            onTransitionEnd?.invoke(!anyInterrupted)
+                        }
+                    }
+                }
+            })
+        }
+
+        runningAnimators["backgroundColor"] = animator
+        animator.start()
+    }
+
     private fun animateProperty(
         propertyName: String,
         viewProperty: DynamicAnimation.ViewProperty?,
@@ -524,6 +599,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         prevRotateX = null
         prevRotateY = null
         prevBorderRadius = null
+        prevBackgroundColor = null
 
         this.alpha = 1f
         this.translationX = 0f
@@ -533,7 +609,8 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         this.rotation = 0f
         this.rotationX = 0f
         this.rotationY = 0f
-        setBorderRadius(0f)
+        setAnimateBorderRadius(0f)
+        applyBackgroundColor(Color.TRANSPARENT)
 
         isFirstMount = true
         transitionLoop = "none"

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

@@ -1,5 +1,6 @@
 package com.ease
 
+import android.graphics.Color
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.WritableMap
@@ -179,6 +180,18 @@ class EaseViewManager : ReactViewManager() {
         view.pendingBorderRadius = PixelUtil.toPixelFromDIP(value)
     }
 
+    // --- Background color ---
+
+    @ReactProp(name = "animateBackgroundColor", customType = "Color")
+    fun setAnimateBackgroundColor(view: EaseView, value: Int?) {
+        view.pendingBackgroundColor = value ?: Color.TRANSPARENT
+    }
+
+    @ReactProp(name = "initialAnimateBackgroundColor", customType = "Color")
+    fun setInitialAnimateBackgroundColor(view: EaseView, value: Int?) {
+        view.initialAnimateBackgroundColor = value ?: Color.TRANSPARENT
+    }
+
     // --- Hardware layer ---
 
     @ReactProp(name = "useHardwareLayer", defaultBoolean = false)

package/ios/EaseView.mm

@@ -9,12 +9,18 @@
 
 #import "RCTFabricComponentsPlugins.h"
 
+// Forward-declare private method so we can override it.
+@interface RCTViewComponentView ()
+- (void)invalidateLayer;
+@end
+
 using namespace facebook::react;
 
 // Animation key constants
 static NSString *const kAnimKeyOpacity = @"ease_opacity";
 static NSString *const kAnimKeyTransform = @"ease_transform";
 static NSString *const kAnimKeyCornerRadius = @"ease_cornerRadius";
+static NSString *const kAnimKeyBackgroundColor = @"ease_backgroundColor";
 
 static inline CGFloat degreesToRadians(CGFloat degrees) {
   return degrees * M_PI / 180.0;
@@ -47,6 +53,7 @@ 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 kMaskBackgroundColor = 1 << 9;
 static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
                                      kMaskScaleX | kMaskScaleY | kMaskRotate |
                                      kMaskRotateX | kMaskRotateY;
@@ -217,6 +224,8 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
   const auto &newViewProps =
       *std::static_pointer_cast<const EaseViewProps>(props);
 
+  [super updateProps:props oldProps:oldProps];
+
   [CATransaction begin];
   [CATransaction setDisableActions:YES];
 
@@ -255,6 +264,11 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
         (mask & kMaskBorderRadius) && newViewProps.initialAnimateBorderRadius !=
                                           newViewProps.animateBorderRadius;
 
+    BOOL hasInitialBackgroundColor =
+        (mask & kMaskBackgroundColor) &&
+        newViewProps.initialAnimateBackgroundColor !=
+            newViewProps.animateBackgroundColor;
+
     BOOL hasInitialTransform = NO;
     CATransform3D initialT = CATransform3DIdentity;
     CATransform3D targetT = CATransform3DIdentity;
@@ -265,7 +279,8 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
       hasInitialTransform = !CATransform3DEqualToTransform(initialT, targetT);
     }
 
-    if (hasInitialOpacity || hasInitialTransform || hasInitialBorderRadius) {
+    if (hasInitialOpacity || hasInitialTransform || hasInitialBorderRadius ||
+        hasInitialBackgroundColor) {
       // Set initial values
       if (mask & kMaskOpacity)
         self.layer.opacity = newViewProps.initialAnimateOpacity;
@@ -277,6 +292,11 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
             newViewProps.initialAnimateBorderRadius > 0 ||
             newViewProps.animateBorderRadius > 0;
       }
+      if (mask & kMaskBackgroundColor)
+        self.layer.backgroundColor =
+            RCTUIColorFromSharedColor(
+                newViewProps.initialAnimateBackgroundColor)
+                .CGColor;
 
       // Animate from initial to target
       if (hasInitialOpacity) {
@@ -307,6 +327,22 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
                                props:newViewProps
                                 loop:YES];
       }
+      if (hasInitialBackgroundColor) {
+        self.layer.backgroundColor =
+            RCTUIColorFromSharedColor(newViewProps.animateBackgroundColor)
+                .CGColor;
+        [self applyAnimationForKeyPath:@"backgroundColor"
+                          animationKey:kAnimKeyBackgroundColor
+                             fromValue:(__bridge id)RCTUIColorFromSharedColor(
+                                           newViewProps
+                                               .initialAnimateBackgroundColor)
+                                           .CGColor
+                               toValue:(__bridge id)RCTUIColorFromSharedColor(
+                                           newViewProps.animateBackgroundColor)
+                                           .CGColor
+                                 props:newViewProps
+                                  loop:YES];
+      }
     } else {
       // No initial animation — set target values directly
       if (mask & kMaskOpacity)
@@ -317,6 +353,10 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
         self.layer.cornerRadius = newViewProps.animateBorderRadius;
         self.layer.masksToBounds = newViewProps.animateBorderRadius > 0;
       }
+      if (mask & kMaskBackgroundColor)
+        self.layer.backgroundColor =
+            RCTUIColorFromSharedColor(newViewProps.animateBackgroundColor)
+                .CGColor;
     }
   } else if (newViewProps.transitionType == EaseViewTransitionType::None) {
     // No transition — set values immediately
@@ -329,6 +369,10 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
       self.layer.cornerRadius = newViewProps.animateBorderRadius;
       self.layer.masksToBounds = newViewProps.animateBorderRadius > 0;
     }
+    if (mask & kMaskBackgroundColor)
+      self.layer.backgroundColor =
+          RCTUIColorFromSharedColor(newViewProps.animateBackgroundColor)
+              .CGColor;
     if (_eventEmitter) {
       auto emitter =
           std::static_pointer_cast<const EaseViewEventEmitter>(_eventEmitter);
@@ -389,11 +433,58 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
                                props:newViewProps
                                 loop:NO];
     }
+
+    if ((mask & kMaskBackgroundColor) &&
+        oldViewProps.animateBackgroundColor !=
+            newViewProps.animateBackgroundColor) {
+      CGColorRef fromColor = (__bridge CGColorRef)
+          [self presentationValueForKeyPath:@"backgroundColor"];
+      CGColorRef toColor =
+          RCTUIColorFromSharedColor(newViewProps.animateBackgroundColor)
+              .CGColor;
+      self.layer.backgroundColor = toColor;
+      [self applyAnimationForKeyPath:@"backgroundColor"
+                        animationKey:kAnimKeyBackgroundColor
+                           fromValue:(__bridge id)fromColor
+                             toValue:(__bridge id)toColor
+                               props:newViewProps
+                                loop:NO];
+    }
   }
 
   [CATransaction commit];
+}
 
-  [super updateProps:props oldProps:oldProps];
+- (void)invalidateLayer {
+  [super invalidateLayer];
+
+  // super resets layer.opacity, layer.cornerRadius, and layer.backgroundColor
+  // from style props. Re-apply our animated values.
+  const auto &viewProps =
+      *std::static_pointer_cast<const EaseViewProps>(_props);
+  int mask = viewProps.animatedProperties;
+
+  if (!(mask & (kMaskOpacity | kMaskBorderRadius | kMaskBackgroundColor))) {
+    return;
+  }
+
+  [CATransaction begin];
+  [CATransaction setDisableActions:YES];
+  if (mask & kMaskOpacity) {
+    [self.layer removeAnimationForKey:@"opacity"];
+    self.layer.opacity = viewProps.animateOpacity;
+  }
+  if (mask & kMaskBorderRadius) {
+    [self.layer removeAnimationForKey:@"cornerRadius"];
+    self.layer.cornerRadius = viewProps.animateBorderRadius;
+    self.layer.masksToBounds = viewProps.animateBorderRadius > 0;
+  }
+  if (mask & kMaskBackgroundColor) {
+    [self.layer removeAnimationForKey:@"backgroundColor"];
+    self.layer.backgroundColor =
+        RCTUIColorFromSharedColor(viewProps.animateBackgroundColor).CGColor;
+  }
+  [CATransaction commit];
 }
 
 #pragma mark - CAAnimationDelegate
@@ -430,6 +521,7 @@ static const int kMaskAnyTransform = kMaskTranslateX | kMaskTranslateY |
   self.layer.transform = CATransform3DIdentity;
   self.layer.cornerRadius = 0;
   self.layer.masksToBounds = NO;
+  self.layer.backgroundColor = nil;
 }
 
 @end

package/lib/module/EaseView.js

@@ -27,6 +27,7 @@ const MASK_ROTATE = 1 << 5;
 const MASK_ROTATE_X = 1 << 6;
 const MASK_ROTATE_Y = 1 << 7;
 const MASK_BORDER_RADIUS = 1 << 8;
+const MASK_BACKGROUND_COLOR = 1 << 9;
 /* eslint-enable no-bitwise */
 
 /** Maps animate prop keys to style keys that conflict. */
@@ -40,7 +41,8 @@ const ANIMATE_TO_STYLE_KEYS = {
   rotate: 'transform',
   rotateX: 'transform',
   rotateY: 'transform',
-  borderRadius: 'borderRadius'
+  borderRadius: 'borderRadius',
+  backgroundColor: 'backgroundColor'
 };
 
 /** Preset easing curves as cubic bezier control points. */
@@ -73,6 +75,7 @@ export function EaseView({
   if (animate?.rotateX != null) animatedProperties |= MASK_ROTATE_X;
   if (animate?.rotateY != null) animatedProperties |= MASK_ROTATE_Y;
   if (animate?.borderRadius != null) animatedProperties |= MASK_BORDER_RADIUS;
+  if (animate?.backgroundColor != null) animatedProperties |= MASK_BACKGROUND_COLOR;
   /* eslint-enable no-bitwise */
 
   // Resolve animate values (identity defaults for non-animated — safe values).
@@ -99,6 +102,10 @@ export function EaseView({
     rotateY: initial?.rotateY ?? IDENTITY.rotateY
   };
 
+  // Resolve backgroundColor — passed as ColorValue directly (codegen handles conversion)
+  const animBgColor = animate?.backgroundColor ?? 'transparent';
+  const initialBgColor = initialAnimate?.backgroundColor ?? animBgColor;
+
   // Strip style keys that conflict with animated properties
   let cleanStyle = style;
   if (animate && style) {
@@ -161,6 +168,7 @@ export function EaseView({
     animateRotateX: resolved.rotateX,
     animateRotateY: resolved.rotateY,
     animateBorderRadius: resolved.borderRadius,
+    animateBackgroundColor: animBgColor,
     initialAnimateOpacity: resolvedInitial.opacity,
     initialAnimateTranslateX: resolvedInitial.translateX,
     initialAnimateTranslateY: resolvedInitial.translateY,
@@ -170,6 +178,7 @@ export function EaseView({
     initialAnimateRotateX: resolvedInitial.rotateX,
     initialAnimateRotateY: resolvedInitial.rotateY,
     initialAnimateBorderRadius: resolvedInitial.borderRadius,
+    initialAnimateBackgroundColor: initialBgColor,
     transitionType: transitionType,
     transitionDuration: transitionDuration,
     transitionEasingBezier: bezier,

package/lib/module/EaseView.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","NativeEaseView","jsx","_jsx","IDENTITY","opacity","translateX","translateY","scaleX","scaleY","rotate","rotateX","rotateY","borderRadius","MASK_OPACITY","MASK_TRANSLATE_X","MASK_TRANSLATE_Y","MASK_SCALE_X","MASK_SCALE_Y","MASK_ROTATE","MASK_ROTATE_X","MASK_ROTATE_Y","MASK_BORDER_RADIUS","ANIMATE_TO_STYLE_KEYS","scale","EASING_PRESETS","linear","easeIn","easeOut","easeInOut","EaseView","animate","initialAnimate","transition","onTransitionEnd","useHardwareLayer","transformOrigin","style","rest","animatedProperties","resolved","initial","resolvedInitial","cleanStyle","flat","flatten","conflicting","Set","key","Object","keys","styleKey","add","size","__DEV__","console","warn","join","cleaned","k","v","entries","has","transitionType","type","transitionDuration","duration","rawEasing","easing","Array","isArray","length","bezier","transitionDamping","damping","transitionStiffness","stiffness","transitionMass","mass","transitionLoop","loop","handleTransitionEnd","event","nativeEvent","undefined","animateOpacity","animateTranslateX","animateTranslateY","animateScaleX","animateScaleY","animateRotate","animateRotateX","animateRotateY","animateBorderRadius","initialAnimateOpacity","initialAnimateTranslateX","initialAnimateTranslateY","initialAnimateScaleX","initialAnimateScaleY","initialAnimateRotate","initialAnimateRotateX","initialAnimateRotateY","initialAnimateBorderRadius","transitionEasingBezier","transformOriginX","x","transformOriginY","y"],"sourceRoot":"../../src","sources":["EaseView.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["StyleSheet","NativeEaseView","jsx","_jsx","IDENTITY","opacity","translateX","translateY","scaleX","scaleY","rotate","rotateX","rotateY","borderRadius","MASK_OPACITY","MASK_TRANSLATE_X","MASK_TRANSLATE_Y","MASK_SCALE_X","MASK_SCALE_Y","MASK_ROTATE","MASK_ROTATE_X","MASK_ROTATE_Y","MASK_BORDER_RADIUS","MASK_BACKGROUND_COLOR","ANIMATE_TO_STYLE_KEYS","scale","backgroundColor","EASING_PRESETS","linear","easeIn","easeOut","easeInOut","EaseView","animate","initialAnimate","transition","onTransitionEnd","useHardwareLayer","transformOrigin","style","rest","animatedProperties","resolved","initial","resolvedInitial","animBgColor","initialBgColor","cleanStyle","flat","flatten","conflicting","Set","key","Object","keys","styleKey","add","size","__DEV__","console","warn","join","cleaned","k","v","entries","has","transitionType","type","transitionDuration","duration","rawEasing","easing","Array","isArray","length","bezier","transitionDamping","damping","transitionStiffness","stiffness","transitionMass","mass","transitionLoop","loop","handleTransitionEnd","event","nativeEvent","undefined","animateOpacity","animateTranslateX","animateTranslateY","animateScaleX","animateScaleY","animateRotate","animateRotateX","animateRotateY","animateBorderRadius","animateBackgroundColor","initialAnimateOpacity","initialAnimateTranslateX","initialAnimateTranslateY","initialAnimateScaleX","initialAnimateScaleY","initialAnimateRotate","initialAnimateRotateX","initialAnimateRotateY","initialAnimateBorderRadius","initialAnimateBackgroundColor","transitionEasingBezier","transformOriginX","x","transformOriginY","y"],"sourceRoot":"../../src","sources":["EaseView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/EaseViewNativeComponent.ts

@@ -3,6 +3,7 @@ import {
   type CodegenTypes,
   type ViewProps,
   type HostComponent,
+  type ColorValue,
 } from 'react-native';
 
 export interface NativeProps extends ViewProps {
@@ -19,6 +20,7 @@ export interface NativeProps extends ViewProps {
   animateRotateX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
   animateRotateY?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
   animateBorderRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
+  animateBackgroundColor?: ColorValue;
 
   // Initial values for enter animations
   initialAnimateOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1.0>;
@@ -33,6 +35,7 @@ export interface NativeProps extends ViewProps {
     CodegenTypes.Float,
     0.0
   >;
+  initialAnimateBackgroundColor?: ColorValue;
 
   // Transition config
   transitionType?: CodegenTypes.WithDefault<

package/lib/module/types.js

@@ -1,2 +1,4 @@
 "use strict";
+
+export {};
 //# sourceMappingURL=types.js.map

package/lib/typescript/src/EaseView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EaseView.d.ts","sourceRoot":"","sources":["../../../src/EaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EACV,YAAY,EAEZ,UAAU,EACV,kBAAkB,EAClB,eAAe,EAChB,MAAM,SAAS,CAAC;AAkDjB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wGAAwG;IACxG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtD;;;;;;;;;;;;;;;OAeG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gGAAgG;IAChG,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAwB,EACxB,eAAe,EACf,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CA8Jf"}
+{"version":3,"file":"EaseView.d.ts","sourceRoot":"","sources":["../../../src/EaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EACV,YAAY,EAEZ,UAAU,EACV,kBAAkB,EAClB,eAAe,EAChB,MAAM,SAAS,CAAC;AAoDjB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wGAAwG;IACxG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtD;;;;;;;;;;;;;;;OAeG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gGAAgG;IAChG,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAwB,EACxB,eAAe,EACf,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAsKf"}

package/lib/typescript/src/EaseViewNativeComponent.d.ts

@@ -1,4 +1,4 @@
-import { type CodegenTypes, type ViewProps, type HostComponent } from 'react-native';
+import { type CodegenTypes, type ViewProps, type HostComponent, type ColorValue } from 'react-native';
 export interface NativeProps extends ViewProps {
     animatedProperties?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
     animateOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1.0>;
@@ -10,6 +10,7 @@ export interface NativeProps extends ViewProps {
     animateRotateX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
     animateRotateY?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
     animateBorderRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
+    animateBackgroundColor?: ColorValue;
     initialAnimateOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1.0>;
     initialAnimateTranslateX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
     initialAnimateTranslateY?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
@@ -19,6 +20,7 @@ export interface NativeProps extends ViewProps {
     initialAnimateRotateX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
     initialAnimateRotateY?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
     initialAnimateBorderRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
+    initialAnimateBackgroundColor?: ColorValue;
     transitionType?: CodegenTypes.WithDefault<'timing' | 'spring' | 'none', 'timing'>;
     transitionDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, 300>;
     transitionEasingBezier?: ReadonlyArray<CodegenTypes.Float>;

package/lib/typescript/src/EaseViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EaseViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/EaseViewNativeComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"EaseViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/EaseViewNativeComponent.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/types.d.ts

@@ -1,3 +1,4 @@
+import type { ColorValue } from 'react-native';
 /** Cubic bezier control points: [x1, y1, x2, y2]. */
 export type CubicBezier = [number, number, number, number];
 /** Easing curve for timing animations. */
@@ -62,5 +63,7 @@ export type AnimateProps = {
     rotateY?: number;
     /** Border radius in pixels. Uses hardware-accelerated clipping (ViewOutlineProvider on Android, layer.cornerRadius on iOS). @default 0 */
     borderRadius?: number;
+    /** Background color. Accepts any React Native color value. @default 'transparent' */
+    backgroundColor?: ColorValue;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3D,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,CAAC;AAEhB,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,wFAAwF;IACxF,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wEAAwE;AACxE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE9E,2CAA2C;AAC3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uEAAuE;IACvE,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,eAAe,GAAG;IAC5B,yEAAyE;IACzE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,2FAA2F;AAC3F,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0IAA0I;IAC1I,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3D,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,CAAC;AAEhB,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,wFAAwF;IACxF,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wEAAwE;AACxE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,0CAA0C;AAC1C,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE9E,2CAA2C;AAC3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uEAAuE;IACvE,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,eAAe,GAAG;IAC5B,yEAAyE;IACzE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,2FAA2F;AAC3F,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0IAA0I;IAC1I,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,eAAe,CAAC,EAAE,UAAU,CAAC;CAC9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ease",
-  "version": "0.1.0-alpha.0",
+  "version": "0.2.0",
   "description": "Lightweight declarative animations powered by platform APIs",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/EaseView.tsx

@@ -32,6 +32,7 @@ const MASK_ROTATE = 1 << 5;
 const MASK_ROTATE_X = 1 << 6;
 const MASK_ROTATE_Y = 1 << 7;
 const MASK_BORDER_RADIUS = 1 << 8;
+const MASK_BACKGROUND_COLOR = 1 << 9;
 /* eslint-enable no-bitwise */
 
 /** Maps animate prop keys to style keys that conflict. */
@@ -46,6 +47,7 @@ const ANIMATE_TO_STYLE_KEYS: Record<keyof AnimateProps, string> = {
   rotateX: 'transform',
   rotateY: 'transform',
   borderRadius: 'borderRadius',
+  backgroundColor: 'backgroundColor',
 };
 
 /** Preset easing curves as cubic bezier control points. */
@@ -111,6 +113,8 @@ export function EaseView({
   if (animate?.rotateX != null) animatedProperties |= MASK_ROTATE_X;
   if (animate?.rotateY != null) animatedProperties |= MASK_ROTATE_Y;
   if (animate?.borderRadius != null) animatedProperties |= MASK_BORDER_RADIUS;
+  if (animate?.backgroundColor != null)
+    animatedProperties |= MASK_BACKGROUND_COLOR;
   /* eslint-enable no-bitwise */
 
   // Resolve animate values (identity defaults for non-animated — safe values).
@@ -137,6 +141,10 @@ export function EaseView({
     rotateY: initial?.rotateY ?? IDENTITY.rotateY,
   };
 
+  // Resolve backgroundColor — passed as ColorValue directly (codegen handles conversion)
+  const animBgColor = animate?.backgroundColor ?? 'transparent';
+  const initialBgColor = initialAnimate?.backgroundColor ?? animBgColor;
+
   // Strip style keys that conflict with animated properties
   let cleanStyle: ViewProps['style'] = style;
   if (animate && style) {
@@ -231,6 +239,7 @@ export function EaseView({
       animateRotateX={resolved.rotateX}
       animateRotateY={resolved.rotateY}
       animateBorderRadius={resolved.borderRadius}
+      animateBackgroundColor={animBgColor}
       initialAnimateOpacity={resolvedInitial.opacity}
       initialAnimateTranslateX={resolvedInitial.translateX}
       initialAnimateTranslateY={resolvedInitial.translateY}
@@ -240,6 +249,7 @@ export function EaseView({
       initialAnimateRotateX={resolvedInitial.rotateX}
       initialAnimateRotateY={resolvedInitial.rotateY}
       initialAnimateBorderRadius={resolvedInitial.borderRadius}
+      initialAnimateBackgroundColor={initialBgColor}
       transitionType={transitionType}
       transitionDuration={transitionDuration}
       transitionEasingBezier={bezier}

package/src/EaseViewNativeComponent.ts

@@ -3,6 +3,7 @@ import {
   type CodegenTypes,
   type ViewProps,
   type HostComponent,
+  type ColorValue,
 } from 'react-native';
 
 export interface NativeProps extends ViewProps {
@@ -19,6 +20,7 @@ export interface NativeProps extends ViewProps {
   animateRotateX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
   animateRotateY?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
   animateBorderRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.0>;
+  animateBackgroundColor?: ColorValue;
 
   // Initial values for enter animations
   initialAnimateOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1.0>;
@@ -33,6 +35,7 @@ export interface NativeProps extends ViewProps {
     CodegenTypes.Float,
     0.0
   >;
+  initialAnimateBackgroundColor?: ColorValue;
 
   // Transition config
   transitionType?: CodegenTypes.WithDefault<

package/src/types.ts

@@ -1,3 +1,5 @@
+import type { ColorValue } from 'react-native';
+
 /** Cubic bezier control points: [x1, y1, x2, y2]. */
 export type CubicBezier = [number, number, number, number];
 
@@ -75,4 +77,6 @@ export type AnimateProps = {
   rotateY?: number;
   /** Border radius in pixels. Uses hardware-accelerated clipping (ViewOutlineProvider on Android, layer.cornerRadius on iOS). @default 0 */
   borderRadius?: number;
+  /** Background color. Accepts any React Native color value. @default 'transparent' */
+  backgroundColor?: ColorValue;
 };