motion-on-native 1.2.7 → 1.3.0

package/README.md

@@ -23,25 +23,19 @@ This package requires:
 ```tsx
 import { NativeMotion } from 'motion-on-native';
 
-// Basic animation
+// Controlled animation
 <NativeMotion.View
   initial={{ opacity: 0, x: -100 }}
   animate={{ opacity: 1, x: 0 }}
+  exit={{ opacity: 0, scale: 0 }}
+  shouldAnimate={shouldShow}
+  shouldDeAnimate={shouldHide}
+  shouldExit={shouldExit}
   transition={{ type: 'spring', damping: 15 }}
+  onExitComplete={() => console.log('Exit animation complete')}
 >
   <Text>Animated content</Text>
 </NativeMotion.View>
-
-// Exit animation
-<NativeMotion.View
-  initial={{ opacity: 0, scale: 0.5 }}
-  animate={{ opacity: 1, scale: 1 }}
-  exit={{ opacity: 0, scale: 0 }}
-  shouldExit={shouldHide}
-  onExitComplete={() => console.log('Animation complete')}
->
-  <Text>Content with exit animation</Text>
-</NativeMotion.View>
 ```
 
 ## Components
@@ -52,6 +46,13 @@ import { NativeMotion } from 'motion-on-native';
 - `NativeMotion.TextInput`
 - `NativeMotion.TouchableOpacity`
 
+## Animation Control Props
+
+- `shouldAnimate`: boolean - Triggers animation from `initial` to `animate`
+- `shouldDeAnimate`: boolean - Triggers animation from `animate` back to `initial`
+- `shouldExit`: boolean - Triggers animation from current state to `exit` (element stays mounted)
+- `onExitComplete`: callback - Called when exit animation completes
+
 ## Animation Properties
 
 - `opacity`: 0-1

package/lib/index.d.ts

@@ -78,6 +78,8 @@ export interface MotionComponentProps {
     animate?: AnimationProps;
     exit?: AnimationProps;
     transition?: TransitionProps;
+    shouldAnimate?: boolean;
+    shouldDeAnimate?: boolean;
     shouldExit?: boolean;
     onExitComplete?: () => void;
     whileHover?: AnimationProps;
@@ -89,9 +91,14 @@ export interface MotionComponentProps {
     children?: React.ReactNode;
 }
 export declare const NativeMotion: {
-    View: (props: MotionComponentProps & import("react-native").ViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
-    Text: (props: MotionComponentProps & import("react-native").TextProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
-    Image: (props: MotionComponentProps & import("react-native").ImageProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
-    TextInput: (props: MotionComponentProps & import("react-native").TextInputProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
-    TouchableOpacity: (props: MotionComponentProps & import("react-native").TouchableOpacityProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
+    View: (props: MotionComponentProps & import("react-native").ViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    Text: (props: MotionComponentProps & import("react-native").TextProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    Image: (props: MotionComponentProps & import("react-native").ImageProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    ImageBackground: (props: MotionComponentProps & import("react-native").ImageBackgroundProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    TextInput: (props: MotionComponentProps & import("react-native").TextInputProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    TouchableOpacity: (props: MotionComponentProps & import("react-native").TouchableOpacityProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    ScrollView: (props: MotionComponentProps & import("react-native").ScrollViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    FlatList: (props: MotionComponentProps & import("react-native").FlatListProps<unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    SectionList: (props: MotionComponentProps & import("react-native").SectionListProps<unknown, unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
+    Pressable: (props: MotionComponentProps & import("react-native").PressableProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
 };

package/lib/index.js

@@ -58,10 +58,7 @@ const DEFAULT_TRANSITION = {
 };
 function createMotionComponent(Component) {
     return function MotionComponent(props) {
-        const { initial = {}, animate = {}, exit = {}, transition = DEFAULT_TRANSITION, shouldExit = false, onExitComplete, whileHover, whileTap, whileFocus, layout, layoutId, style = {}, children } = props, rest = __rest(props, ["initial", "animate", "exit", "transition", "shouldExit", "onExitComplete", "whileHover", "whileTap", "whileFocus", "layout", "layoutId", "style", "children"]);
-        const [isPresent, setIsPresent] = (0, react_1.useState)(true);
-        const [hasAnimated, setHasAnimated] = (0, react_1.useState)(false);
-        const isExitingRef = (0, react_1.useRef)(false);
+        const { initial = {}, animate = {}, exit = {}, transition = DEFAULT_TRANSITION, shouldAnimate = false, shouldDeAnimate = false, shouldExit = false, onExitComplete, whileHover, whileTap, whileFocus, layout, layoutId, style = {}, children } = props, rest = __rest(props, ["initial", "animate", "exit", "transition", "shouldAnimate", "shouldDeAnimate", "shouldExit", "onExitComplete", "whileHover", "whileTap", "whileFocus", "layout", "layoutId", "style", "children"]);
         // Create shared values
         const opacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('opacity', initial));
         const x = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('x', initial));
@@ -111,42 +108,96 @@ function createMotionComponent(Component) {
         const borderBottomWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomWidth', initial));
         const borderLeftWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftWidth', initial));
         const borderRightWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightWidth', initial));
-        const borderColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderColor', initial));
         const borderTopColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopColor', initial));
         const borderBottomColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomColor', initial));
         const borderLeftColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftColor', initial));
         const borderRightColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightColor', initial));
-        // Color properties
-        const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', initial));
-        const color = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('color', initial));
+        // Color properties - use progress values for interpolation
+        const backgroundColorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+        const colorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+        const borderColorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+        const shadowColorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+        // Store color values for interpolation
+        const backgroundColorFrom = (0, react_1.useRef)(getInitialValue('backgroundColor', initial));
+        const backgroundColorTo = (0, react_1.useRef)(getInitialValue('backgroundColor', initial));
+        const colorFrom = (0, react_1.useRef)(getInitialValue('color', initial));
+        const colorTo = (0, react_1.useRef)(getInitialValue('color', initial));
+        const borderColorFrom = (0, react_1.useRef)(getInitialValue('borderColor', initial));
+        const borderColorTo = (0, react_1.useRef)(getInitialValue('borderColor', initial));
+        const shadowColorFrom = (0, react_1.useRef)(getInitialValue('shadowColor', initial));
+        const shadowColorTo = (0, react_1.useRef)(getInitialValue('shadowColor', initial));
         // Position properties
         const top = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('top', initial));
         const bottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('bottom', initial));
         const left = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('left', initial));
         const right = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('right', initial));
         // Shadow properties
-        const shadowColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowColor', initial));
         const shadowOpacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowOpacity', initial));
         const shadowRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowRadius', initial));
         const elevation = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('elevation', initial));
         // Animation helper
         const animateToValues = (targetValues, transitionConfig = transition) => {
             Object.entries(targetValues).forEach(([key, value]) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
                 if (value !== undefined) {
+                    // Handle color properties with interpolation
+                    if (key === 'backgroundColor') {
+                        backgroundColorTo.current = value;
+                        const config = transitionConfig.type === 'spring'
+                            ? (0, react_native_reanimated_1.withSpring)(1, {
+                                damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
+                                stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
+                            })
+                            : (0, react_native_reanimated_1.withTiming)(1, { duration: (_c = transitionConfig.duration) !== null && _c !== void 0 ? _c : DEFAULT_TRANSITION.duration });
+                        backgroundColorProgress.value = config;
+                        return;
+                    }
+                    if (key === 'color') {
+                        colorTo.current = value;
+                        const config = transitionConfig.type === 'spring'
+                            ? (0, react_native_reanimated_1.withSpring)(1, {
+                                damping: (_d = transitionConfig.damping) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.damping,
+                                stiffness: (_e = transitionConfig.stiffness) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.stiffness,
+                            })
+                            : (0, react_native_reanimated_1.withTiming)(1, { duration: (_f = transitionConfig.duration) !== null && _f !== void 0 ? _f : DEFAULT_TRANSITION.duration });
+                        colorProgress.value = config;
+                        return;
+                    }
+                    if (key === 'borderColor') {
+                        borderColorTo.current = value;
+                        const config = transitionConfig.type === 'spring'
+                            ? (0, react_native_reanimated_1.withSpring)(1, {
+                                damping: (_g = transitionConfig.damping) !== null && _g !== void 0 ? _g : DEFAULT_TRANSITION.damping,
+                                stiffness: (_h = transitionConfig.stiffness) !== null && _h !== void 0 ? _h : DEFAULT_TRANSITION.stiffness,
+                            })
+                            : (0, react_native_reanimated_1.withTiming)(1, { duration: (_j = transitionConfig.duration) !== null && _j !== void 0 ? _j : DEFAULT_TRANSITION.duration });
+                        borderColorProgress.value = config;
+                        return;
+                    }
+                    if (key === 'shadowColor') {
+                        shadowColorTo.current = value;
+                        const config = transitionConfig.type === 'spring'
+                            ? (0, react_native_reanimated_1.withSpring)(1, {
+                                damping: (_k = transitionConfig.damping) !== null && _k !== void 0 ? _k : DEFAULT_TRANSITION.damping,
+                                stiffness: (_l = transitionConfig.stiffness) !== null && _l !== void 0 ? _l : DEFAULT_TRANSITION.stiffness,
+                            })
+                            : (0, react_native_reanimated_1.withTiming)(1, { duration: (_m = transitionConfig.duration) !== null && _m !== void 0 ? _m : DEFAULT_TRANSITION.duration });
+                        shadowColorProgress.value = config;
+                        return;
+                    }
+                    // Handle non-color properties
                     const sharedValue = getSharedValue(key);
                     if (sharedValue) {
                         let config;
                         if (transitionConfig.repeat && (transitionConfig.repeat > 0 || transitionConfig.repeat === 'infinity')) {
-                            // Use withRepeat for repeated animations
                             const baseAnimation = transitionConfig.type === 'spring'
                                 ? (0, react_native_reanimated_1.withSpring)(value, {
-                                    damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
-                                    stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
-                                    mass: (_c = transitionConfig.mass) !== null && _c !== void 0 ? _c : 1,
+                                    damping: (_o = transitionConfig.damping) !== null && _o !== void 0 ? _o : DEFAULT_TRANSITION.damping,
+                                    stiffness: (_p = transitionConfig.stiffness) !== null && _p !== void 0 ? _p : DEFAULT_TRANSITION.stiffness,
+                                    mass: (_q = transitionConfig.mass) !== null && _q !== void 0 ? _q : 1,
                                 })
                                 : (0, react_native_reanimated_1.withTiming)(value, {
-                                    duration: (_d = transitionConfig.duration) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.duration,
+                                    duration: (_r = transitionConfig.duration) !== null && _r !== void 0 ? _r : DEFAULT_TRANSITION.duration,
                                     easing: react_native_reanimated_1.Easing.linear,
                                 });
                             const repeatCount = transitionConfig.repeat === 'infinity' ? -1 : transitionConfig.repeat;
@@ -154,15 +205,14 @@ function createMotionComponent(Component) {
                             config = (0, react_native_reanimated_1.withRepeat)(baseAnimation, repeatCount, reverse);
                         }
                         else {
-                            // Single animation
                             config = transitionConfig.type === 'spring'
                                 ? (0, react_native_reanimated_1.withSpring)(value, {
-                                    damping: (_e = transitionConfig.damping) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.damping,
-                                    stiffness: (_f = transitionConfig.stiffness) !== null && _f !== void 0 ? _f : DEFAULT_TRANSITION.stiffness,
-                                    mass: (_g = transitionConfig.mass) !== null && _g !== void 0 ? _g : 1,
+                                    damping: (_s = transitionConfig.damping) !== null && _s !== void 0 ? _s : DEFAULT_TRANSITION.damping,
+                                    stiffness: (_t = transitionConfig.stiffness) !== null && _t !== void 0 ? _t : DEFAULT_TRANSITION.stiffness,
+                                    mass: (_u = transitionConfig.mass) !== null && _u !== void 0 ? _u : 1,
                                 })
                                 : (0, react_native_reanimated_1.withTiming)(value, {
-                                    duration: (_h = transitionConfig.duration) !== null && _h !== void 0 ? _h : DEFAULT_TRANSITION.duration,
+                                    duration: (_v = transitionConfig.duration) !== null && _v !== void 0 ? _v : DEFAULT_TRANSITION.duration,
                                 });
                         }
                         if (transitionConfig.delay) {
@@ -229,30 +279,22 @@ function createMotionComponent(Component) {
                 case 'borderBottomWidth': return borderBottomWidth;
                 case 'borderLeftWidth': return borderLeftWidth;
                 case 'borderRightWidth': return borderRightWidth;
-                case 'borderColor': return borderColor;
                 case 'borderTopColor': return borderTopColor;
                 case 'borderBottomColor': return borderBottomColor;
                 case 'borderLeftColor': return borderLeftColor;
                 case 'borderRightColor': return borderRightColor;
-                // Color properties
-                case 'backgroundColor': return backgroundColor;
-                case 'color': return color;
                 // Position properties
                 case 'top': return top;
                 case 'bottom': return bottom;
                 case 'left': return left;
                 case 'right': return right;
                 // Shadow properties
-                case 'shadowColor': return shadowColor;
                 case 'shadowOpacity': return shadowOpacity;
                 case 'shadowRadius': return shadowRadius;
                 case 'elevation': return elevation;
                 default: return null;
             }
         };
-        // Memoize animate prop to prevent unnecessary re-animations
-        const animateString = JSON.stringify(animate);
-        const memoizedAnimate = (0, react_1.useMemo)(() => animate, [animateString]);
         // Set initial values on mount
         (0, react_1.useEffect)(() => {
             if (initial !== false) {
@@ -264,78 +306,90 @@ function createMotionComponent(Component) {
                 });
             }
         }, []);
-        // Mount animation: initial -> animate
+        // Handle shouldAnimate: initial -> animate
         (0, react_1.useEffect)(() => {
-            if (!hasAnimated && !isExitingRef.current) {
-                // Animate to target values
-                const timer = setTimeout(() => {
-                    if (!isExitingRef.current) {
-                        animateToValues(memoizedAnimate);
-                        setHasAnimated(true);
-                    }
-                }, 16);
-                return () => clearTimeout(timer);
+            if (shouldAnimate) {
+                // Reset color progress and update from/to values
+                if (animate.backgroundColor) {
+                    backgroundColorFrom.current = backgroundColorTo.current;
+                    backgroundColorProgress.value = 0;
+                }
+                if (animate.color) {
+                    colorFrom.current = colorTo.current;
+                    colorProgress.value = 0;
+                }
+                if (animate.borderColor) {
+                    borderColorFrom.current = borderColorTo.current;
+                    borderColorProgress.value = 0;
+                }
+                if (animate.shadowColor) {
+                    shadowColorFrom.current = shadowColorTo.current;
+                    shadowColorProgress.value = 0;
+                }
+                animateToValues(animate);
             }
-            return undefined;
-        }, [memoizedAnimate]);
-        // Handle animate prop changes (only animate if values actually changed)
-        const prevAnimateRef = (0, react_1.useRef)(memoizedAnimate);
+        }, [shouldAnimate]);
+        // Handle shouldDeAnimate: animate -> initial
         (0, react_1.useEffect)(() => {
-            if (hasAnimated && !isExitingRef.current) {
-                // Only animate if animate prop actually changed
-                const hasChanged = JSON.stringify(prevAnimateRef.current) !== JSON.stringify(memoizedAnimate);
-                if (hasChanged) {
-                    animateToValues(memoizedAnimate);
-                    prevAnimateRef.current = memoizedAnimate;
+            if (shouldDeAnimate && initial !== false) {
+                const initialProps = initial;
+                // Reset color progress and update from/to values
+                if (initialProps.backgroundColor) {
+                    backgroundColorFrom.current = backgroundColorTo.current;
+                    backgroundColorTo.current = initialProps.backgroundColor;
+                    backgroundColorProgress.value = 0;
+                }
+                if (initialProps.color) {
+                    colorFrom.current = colorTo.current;
+                    colorTo.current = initialProps.color;
+                    colorProgress.value = 0;
                 }
+                if (initialProps.borderColor) {
+                    borderColorFrom.current = borderColorTo.current;
+                    borderColorTo.current = initialProps.borderColor;
+                    borderColorProgress.value = 0;
+                }
+                if (initialProps.shadowColor) {
+                    shadowColorFrom.current = shadowColorTo.current;
+                    shadowColorTo.current = initialProps.shadowColor;
+                    shadowColorProgress.value = 0;
+                }
+                animateToValues(initialProps);
             }
-        }, [memoizedAnimate]);
-        // Handle shouldExit
+        }, [shouldDeAnimate]);
+        // Handle shouldExit: animate -> exit (no unmount)
         (0, react_1.useEffect)(() => {
             var _a;
-            if (shouldExit && !isExitingRef.current) {
-                isExitingRef.current = true;
-                if (exit && Object.keys(exit).length > 0) {
-                    animateToValues(exit, transition);
+            if (shouldExit && exit && Object.keys(exit).length > 0) {
+                // Reset color progress and update from/to values
+                if (exit.backgroundColor) {
+                    backgroundColorFrom.current = backgroundColorTo.current;
+                    backgroundColorTo.current = exit.backgroundColor;
+                    backgroundColorProgress.value = 0;
+                }
+                if (exit.color) {
+                    colorFrom.current = colorTo.current;
+                    colorTo.current = exit.color;
+                    colorProgress.value = 0;
+                }
+                if (exit.borderColor) {
+                    borderColorFrom.current = borderColorTo.current;
+                    borderColorTo.current = exit.borderColor;
+                    borderColorProgress.value = 0;
+                }
+                if (exit.shadowColor) {
+                    shadowColorFrom.current = shadowColorTo.current;
+                    shadowColorTo.current = exit.shadowColor;
+                    shadowColorProgress.value = 0;
+                }
+                animateToValues(exit, transition);
+                if (onExitComplete) {
                     const exitDuration = (_a = transition.duration) !== null && _a !== void 0 ? _a : 300;
                     setTimeout(() => {
-                        setIsPresent(false);
-                        if (onExitComplete) {
-                            onExitComplete();
-                        }
-                    }, exitDuration);
-                }
-                else {
-                    setIsPresent(false);
-                    if (onExitComplete) {
                         onExitComplete();
-                    }
+                    }, exitDuration);
                 }
             }
-            else if (!shouldExit && isExitingRef.current) {
-                // Re-entering: reset everything
-                isExitingRef.current = false;
-                setIsPresent(true);
-                setHasAnimated(false);
-                // Reset to initial values and animate
-                setTimeout(() => {
-                    if (initial !== false) {
-                        Object.entries(initial).forEach(([key, value]) => {
-                            const sharedValue = getSharedValue(key);
-                            if (sharedValue && value !== undefined) {
-                                sharedValue.value = value;
-                            }
-                        });
-                    }
-                    // Animate to target after a frame
-                    setTimeout(() => {
-                        if (!isExitingRef.current) {
-                            animateToValues(memoizedAnimate);
-                            setHasAnimated(true);
-                        }
-                    }, 16);
-                }, 0);
-            }
         }, [shouldExit]);
         // Animated style
         const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
@@ -436,21 +490,18 @@ function createMotionComponent(Component) {
                 style.borderLeftWidth = borderLeftWidth.value;
             if (borderRightWidth.value !== 0)
                 style.borderRightWidth = borderRightWidth.value;
-            if (borderColor.value !== 0)
-                style.borderColor = borderColor.value;
-            if (borderTopColor.value !== 0)
+            style.borderColor = (0, react_native_reanimated_1.interpolateColor)(borderColorProgress.value, [0, 1], [borderColorFrom.current, borderColorTo.current]);
+            if (borderTopColor.value !== 'transparent')
                 style.borderTopColor = borderTopColor.value;
-            if (borderBottomColor.value !== 0)
+            if (borderBottomColor.value !== 'transparent')
                 style.borderBottomColor = borderBottomColor.value;
-            if (borderLeftColor.value !== 0)
+            if (borderLeftColor.value !== 'transparent')
                 style.borderLeftColor = borderLeftColor.value;
-            if (borderRightColor.value !== 0)
+            if (borderRightColor.value !== 'transparent')
                 style.borderRightColor = borderRightColor.value;
-            // Color properties
-            if (backgroundColor.value !== 0)
-                style.backgroundColor = backgroundColor.value;
-            if (color.value !== 0)
-                style.color = color.value;
+            // Color properties with interpolation
+            style.backgroundColor = (0, react_native_reanimated_1.interpolateColor)(backgroundColorProgress.value, [0, 1], [backgroundColorFrom.current, backgroundColorTo.current]);
+            style.color = (0, react_native_reanimated_1.interpolateColor)(colorProgress.value, [0, 1], [colorFrom.current, colorTo.current]);
             // Position properties
             if (top.value !== 0)
                 style.top = top.value;
@@ -461,8 +512,7 @@ function createMotionComponent(Component) {
             if (right.value !== 0)
                 style.right = right.value;
             // Shadow properties
-            if (shadowColor.value !== 0)
-                style.shadowColor = shadowColor.value;
+            style.shadowColor = (0, react_native_reanimated_1.interpolateColor)(shadowColorProgress.value, [0, 1], [shadowColorFrom.current, shadowColorTo.current]);
             if (shadowOpacity.value !== 0)
                 style.shadowOpacity = shadowOpacity.value;
             if (shadowRadius.value !== 0)
@@ -472,8 +522,6 @@ function createMotionComponent(Component) {
             return style;
         });
         const AnimatedComponent = react_native_reanimated_1.default.createAnimatedComponent(Component);
-        if (!isPresent)
-            return null;
         return react_1.default.createElement(AnimatedComponent, Object.assign({ style: [style, animatedStyle] }, rest), children);
     };
 }
@@ -504,6 +552,15 @@ function getDefaultValue(key) {
         case 'skewX':
         case 'skewY':
             return '0deg';
+        case 'backgroundColor':
+        case 'color':
+        case 'borderColor':
+        case 'borderTopColor':
+        case 'borderBottomColor':
+        case 'borderLeftColor':
+        case 'borderRightColor':
+        case 'shadowColor':
+            return 'transparent';
         default:
             return 0;
     }
@@ -512,6 +569,11 @@ exports.NativeMotion = {
     View: createMotionComponent(react_native_1.View),
     Text: createMotionComponent(react_native_1.Text),
     Image: createMotionComponent(react_native_1.Image),
+    ImageBackground: createMotionComponent(react_native_1.ImageBackground),
     TextInput: createMotionComponent(react_native_1.TextInput),
     TouchableOpacity: createMotionComponent(react_native_1.TouchableOpacity),
+    ScrollView: createMotionComponent(react_native_1.ScrollView),
+    FlatList: createMotionComponent(react_native_1.FlatList),
+    SectionList: createMotionComponent(react_native_1.SectionList),
+    Pressable: createMotionComponent(react_native_1.Pressable),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-on-native",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "Framer Motion-inspired animation library for React Native with Reanimated. Easy spring animations, gestures, and transitions for mobile apps.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",