motion-on-native 1.2.6 → 1.2.8

package/lib/index.d.ts

@@ -92,6 +92,11 @@ 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;
+    ImageBackground: (props: MotionComponentProps & import("react-native").ImageBackgroundProps) => 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;
+    ScrollView: (props: MotionComponentProps & import("react-native").ScrollViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
+    FlatList: (props: MotionComponentProps & import("react-native").FlatListProps<unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
+    SectionList: (props: MotionComponentProps & import("react-native").SectionListProps<unknown, unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
+    Pressable: (props: MotionComponentProps & import("react-native").PressableProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
 };

package/lib/index.js

@@ -250,18 +250,23 @@ function createMotionComponent(Component) {
                 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) {
+                Object.entries(initial).forEach(([key, value]) => {
+                    const sharedValue = getSharedValue(key);
+                    if (sharedValue && value !== undefined) {
+                        sharedValue.value = value;
+                    }
+                });
+            }
+        }, []);
         // Mount animation: initial -> animate
         (0, react_1.useEffect)(() => {
             if (!hasAnimated && !isExitingRef.current) {
-                // Set initial values immediately
-                if (initial !== false) {
-                    Object.entries(initial).forEach(([key, value]) => {
-                        const sharedValue = getSharedValue(key);
-                        if (sharedValue && value !== undefined) {
-                            sharedValue.value = value;
-                        }
-                    });
-                }
                 // Animate to target values
                 const timer = setTimeout(() => {
                     if (!isExitingRef.current) {
@@ -272,9 +277,7 @@ function createMotionComponent(Component) {
                 return () => clearTimeout(timer);
             }
             return undefined;
-        }, []);
-        // Memoize animate prop to prevent unnecessary re-animations
-        const memoizedAnimate = (0, react_1.useMemo)(() => animate, [JSON.stringify(animate)]);
+        }, [memoizedAnimate]);
         // Handle animate prop changes (only animate if values actually changed)
         const prevAnimateRef = (0, react_1.useRef)(memoizedAnimate);
         (0, react_1.useEffect)(() => {
@@ -290,46 +293,40 @@ function createMotionComponent(Component) {
         // Handle shouldExit
         (0, react_1.useEffect)(() => {
             var _a;
-            if (shouldExit && !isExitingRef.current) {
+            if (shouldExit && !isExitingRef.current && exit && Object.keys(exit).length > 0) {
                 isExitingRef.current = true;
-                if (exit && Object.keys(exit).length > 0) {
-                    animateToValues(exit, transition);
-                    const exitDuration = (_a = transition.duration) !== null && _a !== void 0 ? _a : 300;
-                    setTimeout(() => {
-                        setIsPresent(false);
-                        if (onExitComplete) {
-                            onExitComplete();
-                        }
-                    }, exitDuration);
-                }
-                else {
+                animateToValues(exit, transition);
+                const exitDuration = (_a = transition.duration) !== null && _a !== void 0 ? _a : 300;
+                setTimeout(() => {
                     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
-                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
+                // Reset to initial values and animate
                 setTimeout(() => {
-                    if (!isExitingRef.current) {
-                        animateToValues(memoizedAnimate);
-                        setHasAnimated(true);
+                    if (initial !== false) {
+                        Object.entries(initial).forEach(([key, value]) => {
+                            const sharedValue = getSharedValue(key);
+                            if (sharedValue && value !== undefined) {
+                                sharedValue.value = value;
+                            }
+                        });
                     }
-                }, 16);
+                    // Animate to target after a frame
+                    setTimeout(() => {
+                        if (!isExitingRef.current) {
+                            animateToValues(memoizedAnimate);
+                            setHasAnimated(true);
+                        }
+                    }, 16);
+                }, 0);
             }
         }, [shouldExit]);
         // Animated style
@@ -507,6 +504,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.6",
+  "version": "1.2.8",
   "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",