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

package/.claude-plugin/marketplace.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-native-ease-plugins",
+  "owner": {
+    "name": "AppAndFlow",
+    "email": "devops@appandflow.com"
+  },
+  "metadata": {
+    "description": "Claude Code skills for react-native-ease — migrate Reanimated/Animated code to react-native-ease"
+  },
+  "plugins": [
+    {
+      "name": "react-native-ease",
+      "source": "./",
+      "description": "Scan for Animated/Reanimated code and migrate to react-native-ease",
+      "version": "0.2.0",
+      "author": {
+        "name": "AppAndFlow"
+      }
+    }
+  ]
+}

package/.claude-plugin/plugin.json

@@ -0,0 +1,5 @@
+{
+  "name": "react-native-ease",
+  "description": "Declarative native animations for React Native — migration tools",
+  "version": "0.2.0"
+}

package/README.md

@@ -1,32 +1,17 @@
-# 🍃 react-native-ease
+<img width="100%" height="auto" alt="react-native-ease by App & Flow" src="https://github.com/user-attachments/assets/8006ed51-d373-4c97-9e80-9937eb9a569e" />
 
 Lightweight declarative animations powered by platform APIs. Uses Core Animation on iOS and Animator on Android — zero JS overhead.
 
-## Goals
+## About
+App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. team@appandflow.com
 
-- **Fast** — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
-- **Simple** — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
-- **Lightweight** — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
-- **Interruptible** — Changing values mid-animation smoothly redirects to the new target. No jumps.
+## Demo
 
-## Non-Goals
+![ease-demo](https://github.com/user-attachments/assets/09658b07-803e-4b7e-a23c-831a6c63df84)
 
-- **Complex gesture-driven animations** — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated).
-- **Layout animations** — Animating width/height/layout changes is not supported.
-- **Shared element transitions** — Use Reanimated or React Navigation's shared element transitions.
-- **Old architecture** — Fabric (new architecture) only.
-
-## When to use this vs Reanimated
-
-| Use react-native-ease | Use Reanimated |
-|---|---|
-| Fade in a view | Gesture-driven animations |
-| Slide/translate on state change | Complex interpolations |
-| Scale/rotate on press | Shared values across components |
-| Simple enter animations | Layout animations |
-| You want zero config | You need animation worklets |
+## Getting started
 
-## Installation
+### Installation
 
 ```bash
 npm install react-native-ease
@@ -34,7 +19,25 @@ npm install react-native-ease
 yarn add react-native-ease
 ```
 
-## Quick Start
+### Migration Skill
+
+If you're already using `react-native-reanimated` or React Native's `Animated` API, this project includes an [Agent Skill](https://agentskills.io) that scans your codebase for animations that can be replaced with `react-native-ease` and migrates them automatically.
+
+```bash
+npx skills add appandflow/react-native-ease
+```
+
+Then invoke the skill in your agent (e.g., `/react-native-ease-refactor` in Claude Code).
+
+The skill will:
+
+1. Scan your project for Reanimated/Animated code
+2. Classify which animations can be migrated (and which can't, with reasons)
+3. Show a migration report with before/after details
+4. Let you select which components to migrate
+5. Apply the changes, preserving all non-animation logic
+
+### Example
 
 ```tsx
 import { EaseView } from 'react-native-ease';
@@ -54,6 +57,32 @@ function FadeCard({ visible, children }) {
 
 `EaseView` works like a regular `View` — it accepts children, styles, and all standard view props. When values in `animate` change, it smoothly transitions to the new values using native platform animations.
 
+## Why
+
+### Goals
+
+- **Fast** — Animations run entirely on native platform APIs (CAAnimation, ObjectAnimator/SpringAnimation). No JS animation loop, no worklets, no shared values.
+- **Simple** — CSS-transition-like API. Set target values, get smooth animations. One component, a few props.
+- **Lightweight** — Minimal native code, no C++ runtime, no custom animation engine. Just a thin declarative wrapper around what the OS already provides.
+- **Interruptible** — Changing values mid-animation smoothly redirects to the new target. No jumps.
+
+### Non-Goals
+
+- **Complex gesture-driven animations** — If you need pan/pinch-driven animations, animation worklets, or shared values across components, use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated).
+- **Layout animations** — Animating width/height/layout changes is not supported.
+- **Shared element transitions** — Use Reanimated or React Navigation's shared element transitions.
+- **Old architecture** — Fabric (new architecture) only.
+
+### When to use this vs Reanimated
+
+| Use case                               | Ease | Reanimated |
+| -------------------------------------- | ---- | ---------- |
+| Fade/slide/scale on state change       | ✅   |            |
+| Enter/exit animations                  | ✅   |            |
+| Gesture-driven animations (pan, pinch) |      | ✅         |
+| Layout animations (width, height)      |      | ✅         |
+| Complex interpolations & chaining      |      | ✅         |
+
 ## Guide
 
 ### Timing Animations
@@ -67,11 +96,11 @@ Timing animations transition from one value to another over a fixed duration wit
 />
 ```
 
-| Parameter | Type | Default | Description |
-|---|---|---|---|
-| `duration` | `number` | `300` | Duration in milliseconds |
-| `easing` | `EasingType` | `'easeInOut'` | Easing curve (preset name or `[x1, y1, x2, y2]` cubic bezier) |
-| `loop` | `string` | — | `'repeat'` restarts from the beginning, `'reverse'` alternates direction |
+| Parameter  | Type         | Default       | Description                                                              |
+| ---------- | ------------ | ------------- | ------------------------------------------------------------------------ |
+| `duration` | `number`     | `300`         | Duration in milliseconds                                                 |
+| `easing`   | `EasingType` | `'easeInOut'` | Easing curve (preset name or `[x1, y1, x2, y2]` cubic bezier)            |
+| `loop`     | `string`     | —             | `'repeat'` restarts from the beginning, `'reverse'` alternates direction |
 
 Available easing curves:
 
@@ -112,11 +141,11 @@ Spring animations use a physics-based model for natural-feeling motion. Great fo
 />
 ```
 
-| Parameter | Type | Default | Description |
-|---|---|---|---|
-| `damping` | `number` | `15` | Friction — higher values reduce oscillation |
-| `stiffness` | `number` | `120` | Spring constant — higher values mean faster animation |
-| `mass` | `number` | `1` | Mass of the object — higher values mean slower, more momentum |
+| Parameter   | Type     | Default | Description                                                   |
+| ----------- | -------- | ------- | ------------------------------------------------------------- |
+| `damping`   | `number` | `15`    | Friction — higher values reduce oscillation                   |
+| `stiffness` | `number` | `120`   | Spring constant — higher values mean faster animation         |
+| `mass`      | `number` | `1`     | Mass of the object — higher values mean slower, more momentum |
 
 Spring presets for common feels:
 
@@ -164,6 +193,26 @@ 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.
+
+> **Note:** On Android, background color animation uses `ValueAnimator.ofArgb()` which only supports timing transitions. Spring transitions for `backgroundColor` are not supported on Android and will fall back to timing with the default duration. On iOS, both timing and spring transitions work for background color.
+
+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).
@@ -171,16 +220,17 @@ All properties are set in the `animate` prop as flat values (no transform array)
 ```tsx
 <EaseView
   animate={{
-    opacity: 1,       // 0 to 1
-    translateX: 0,    // pixels
-    translateY: 0,    // pixels
-    scale: 1,         // 1 = normal size (shorthand for scaleX + scaleY)
-    scaleX: 1,        // horizontal scale
-    scaleY: 1,        // vertical scale
-    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)
+    opacity: 1, // 0 to 1
+    translateX: 0, // pixels
+    translateY: 0, // pixels
+    scale: 1, // 1 = normal size (shorthand for scaleX + scaleY)
+    scaleX: 1, // horizontal scale
+    scaleY: 1, // vertical scale
+    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)
+    backgroundColor: 'transparent', // any RN color value
   }}
 />
 ```
@@ -261,11 +311,11 @@ By default, scale and rotation animate from the view's center. Use `transformOri
 />
 ```
 
-| Value | Position |
-|---|---|
-| `{ x: 0, y: 0 }` | Top-left |
+| Value                | Position         |
+| -------------------- | ---------------- |
+| `{ x: 0, y: 0 }`     | Top-left         |
 | `{ x: 0.5, y: 0.5 }` | Center (default) |
-| `{ x: 1, y: 1 }` | Bottom-right |
+| `{ x: 1, y: 1 }`     | Bottom-right     |
 
 ### Style Handling
 
@@ -299,32 +349,33 @@ By default, scale and rotation animate from the view's center. Use `transformOri
 
 A `View` that animates property changes using native platform APIs.
 
-| Prop | Type | Description |
-|---|---|---|
-| `animate` | `AnimateProps` | Target values for animated properties |
-| `initialAnimate` | `AnimateProps` | Starting values for enter animations (animates to `animate` on mount) |
-| `transition` | `Transition` | Animation configuration (timing, spring, or none) |
-| `onTransitionEnd` | `(event) => void` | Called when all animations complete with `{ finished: boolean }` |
-| `transformOrigin` | `{ x?: number; y?: number }` | Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center) |
-| `useHardwareLayer` | `boolean` | Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false` |
-| `style` | `ViewStyle` | Non-animated styles (layout, colors, borders, etc.) |
-| `children` | `ReactNode` | Child elements |
-| ...rest | `ViewProps` | All other standard View props |
+| Prop               | Type                         | Description                                                                                                                  |
+| ------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `animate`          | `AnimateProps`               | Target values for animated properties                                                                                        |
+| `initialAnimate`   | `AnimateProps`               | Starting values for enter animations (animates to `animate` on mount)                                                        |
+| `transition`       | `Transition`                 | Animation configuration (timing, spring, or none)                                                                            |
+| `onTransitionEnd`  | `(event) => void`            | Called when all animations complete with `{ finished: boolean }`                                                             |
+| `transformOrigin`  | `{ x?: number; y?: number }` | Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center)                                      |
+| `useHardwareLayer` | `boolean`                    | Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false` |
+| `style`            | `ViewStyle`                  | Non-animated styles (layout, colors, borders, etc.)                                                                          |
+| `children`         | `ReactNode`                  | Child elements                                                                                                               |
+| ...rest            | `ViewProps`                  | All other standard View props                                                                                                |
 
 ### `AnimateProps`
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `opacity` | `number` | `1` | View opacity (0–1) |
-| `translateX` | `number` | `0` | Horizontal translation in pixels |
-| `translateY` | `number` | `0` | Vertical translation in pixels |
-| `scale` | `number` | `1` | Uniform scale factor (shorthand for `scaleX` + `scaleY`) |
-| `scaleX` | `number` | `1` | Horizontal scale factor (overrides `scale` for X axis) |
-| `scaleY` | `number` | `1` | Vertical scale factor (overrides `scale` for Y axis) |
-| `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) |
+| Property          | Type         | Default         | Description                                                                          |
+| ----------------- | ------------ | --------------- | ------------------------------------------------------------------------------------ |
+| `opacity`         | `number`     | `1`             | View opacity (0–1)                                                                   |
+| `translateX`      | `number`     | `0`             | Horizontal translation in pixels                                                     |
+| `translateY`      | `number`     | `0`             | Vertical translation in pixels                                                       |
+| `scale`           | `number`     | `1`             | Uniform scale factor (shorthand for `scaleX` + `scaleY`)                             |
+| `scaleX`          | `number`     | `1`             | Horizontal scale factor (overrides `scale` for X axis)                               |
+| `scaleY`          | `number`     | `1`             | Vertical scale factor (overrides `scale` for Y axis)                                 |
+| `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)                       |
+| `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.
 
@@ -365,10 +416,7 @@ Applies values instantly with no animation. `onTransitionEnd` fires immediately
 Setting `useHardwareLayer` rasterizes the view into a GPU texture for the duration of the animation. This means animated property changes (opacity, scale, rotation) are composited on the RenderThread without redrawing the view hierarchy — useful for complex views with many children.
 
 ```tsx
-<EaseView
-  animate={{ opacity: isVisible ? 1 : 0 }}
-  useHardwareLayer
-/>
+<EaseView animate={{ opacity: isVisible ? 1 : 0 }} useHardwareLayer />
 ```
 
 **Trade-offs:**

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
@@ -38,6 +42,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     var transitionStiffness: Float = 120.0f
     var transitionMass: Float = 1.0f
     var transitionLoop: String = "none"
+    var transitionDelay: Long = 0L
 
     // --- Transform origin (0–1 fractions) ---
     var transformOriginX: Float = 0.5f
@@ -52,11 +57,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 +96,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,10 +108,12 @@ 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>()
+    private val pendingDelayedRunnables = mutableListOf<Runnable>()
 
     // --- Animated properties bitmask (set by ViewManager) ---
     var animatedProperties: Int = 0
@@ -120,6 +130,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 +180,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 +192,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 +218,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 +231,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 +260,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 +275,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 +289,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 +335,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 +353,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 +365,64 @@ 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()
+            startDelay = transitionDelay
+            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?,
@@ -368,6 +446,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
 
         val animator = ObjectAnimator.ofFloat(this, propertyName, fromValue, toValue).apply {
             duration = transitionDuration.toLong()
+            startDelay = transitionDelay
             interpolator = PathInterpolator(
                 transitionEasingBezier[0], transitionEasingBezier[1],
                 transitionEasingBezier[2], transitionEasingBezier[3]
@@ -445,10 +524,20 @@ class EaseView(context: Context) : ReactViewGroup(context) {
 
         onEaseAnimationStart()
         runningSpringAnimations[viewProperty] = spring
-        spring.start()
+        if (transitionDelay > 0) {
+            val runnable = Runnable { spring.start() }
+            pendingDelayedRunnables.add(runnable)
+            postDelayed(runnable, transitionDelay)
+        } else {
+            spring.start()
+        }
     }
 
     private fun cancelAllAnimations() {
+        for (runnable in pendingDelayedRunnables) {
+            removeCallbacks(runnable)
+        }
+        pendingDelayedRunnables.clear()
         for (animator in runningAnimators.values) {
             animator.cancel()
         }
@@ -498,6 +587,10 @@ class EaseView(context: Context) : ReactViewGroup(context) {
     }
 
     fun cleanup() {
+        for (runnable in pendingDelayedRunnables) {
+            removeCallbacks(runnable)
+        }
+        pendingDelayedRunnables.clear()
         for (animator in runningAnimators.values) {
             animator.cancel()
         }
@@ -524,6 +617,7 @@ class EaseView(context: Context) : ReactViewGroup(context) {
         prevRotateX = null
         prevRotateY = null
         prevBorderRadius = null
+        prevBackgroundColor = null
 
         this.alpha = 1f
         this.translationX = 0f
@@ -533,7 +627,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
@@ -172,6 +173,11 @@ class EaseViewManager : ReactViewManager() {
         view.transitionLoop = value ?: "none"
     }
 
+    @ReactProp(name = "transitionDelay", defaultInt = 0)
+    fun setTransitionDelay(view: EaseView, value: Int) {
+        view.transitionDelay = value.toLong()
+    }
+
     // --- Border radius ---
 
     @ReactProp(name = "animateBorderRadius", defaultFloat = 0f)
@@ -179,6 +185,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)