moti - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

lib/commonjs/motify/use-map-animate-to-style.js

@@ -169,2 +169,8 @@ "use strict";
 
+const empty = {
+  object: {}
+};
+
+const debug = (...args) => console.log('[moti-bug]', ...args);
+
 function useMapAnimateToStyle({
@@ -181,11 +187,19 @@ animate,
   const isMounted = (0, _reactNativeReanimated.useSharedValue)(false, false);
-  const [isPresent, safeToUnmount] = (0, _framerMotion.usePresence)(); // is any of this necessary?
+  const [isPresent, safeToUnmount] = (0, _framerMotion.usePresence)();
+  const reanimatedSafeToUnmount = (0, _react.useCallback)(() => {
+    safeToUnmount === null || safeToUnmount === void 0 ? void 0 : safeToUnmount();
+  }, [safeToUnmount]);
+  const reanimatedOnDidAnimated = (0, _react.useCallback)((...args) => {
+    onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate(...args);
+  }, [onDidAnimate]); // is any of this necessary?
 
-  const initialSV = (0, _reactNativeReanimated.useSharedValue)(from);
-  const animateSV = (0, _reactNativeReanimated.useSharedValue)(animate);
-  const exitSV = (0, _reactNativeReanimated.useSharedValue)(exit);
-  const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit).length;
+  const initialSV = (0, _reactNativeReanimated.useSharedValue)(from || empty.object);
+  const animateSV = (0, _reactNativeReanimated.useSharedValue)(animate || empty.object);
+  const exitSV = (0, _reactNativeReanimated.useSharedValue)(exit || empty.object);
+  const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit !== null && exit !== void 0 ? exit : {}).length;
+  debug('before animated style');
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     var _state$__state;
 
+    debug('inside animated style');
     const final = {
@@ -200,3 +214,3 @@ // initializing here fixes reanimated object.__defineProperty bug(?)
     const isExiting = !isPresent && hasExitStyle;
-    let mergedStyles;
+    let mergedStyles = {};
 
@@ -213,9 +227,8 @@ if (stylePriority === 'state') {
 
-    if (isExiting) {
+    if (isExiting && exitStyle) {
       mergedStyles = exitStyle;
     }
 
+    debug('here');
     Object.keys(mergedStyles).forEach((key, index) => {
-      'worklet';
-
       const initialValue = initialStyle[key];
@@ -233,11 +246,11 @@ const value = mergedStyles[key];
         if (onDidAnimate) {
-          (0, _reactNativeReanimated.runOnJS)(onDidAnimate)(key, canceled, recentValue);
+          (0, _reactNativeReanimated.runOnJS)(reanimatedOnDidAnimated)(key, canceled, recentValue);
         }
 
         if (isExiting) {
-          // if this is true, then we've finished our exit animations
-          const isLastStyleKeyToAnimate = index + 1 === Object.keys(mergedStyles).length;
+          //   // if this is true, then we've finished our exit animations
+          const isLastStyleKeyToAnimate = index + 1 === Object.keys(mergedStyles || {}).length;
 
-          if (isLastStyleKeyToAnimate && safeToUnmount) {
-            (0, _reactNativeReanimated.runOnJS)(safeToUnmount)();
+          if (isLastStyleKeyToAnimate) {
+            (0, _reactNativeReanimated.runOnJS)(reanimatedSafeToUnmount)();
           }
@@ -273,3 +286,3 @@ }
         if (typeof value === 'string' && !value.startsWith('rgb') && !value.startsWith('#')) {
-          console.error("[".concat(_packageName.PackageName, "]: You passed ").concat(key, ": ").concat(value, ", but not all color values are supported yet in Reanimated 2. \u2639\uFE0F \n                  \nPlease use an rgb or hex formatted color.\n  Please go to https://github.com/software-mansion/react-native-reanimated/issues/845 and comment so that this bug can get fixed!"));
+          console.error("[".concat(_packageName.PackageName, "]: You passed ").concat(key, ": ").concat(value, ", but not all color values are supported yet in Reanimated 2. \u2639\uFE0F\n\n      Please use an rgb or hex formatted color."));
         } // }
@@ -392,3 +405,3 @@
         final[key] = {};
-        Object.keys(value).forEach(innerStyleKey => {
+        Object.keys(value || {}).forEach(innerStyleKey => {
           let finalValue = animation(value, config, callback);
@@ -420,2 +433,5 @@
     });
+    debug('end of UAS', {
+      final
+    });
     return final;
@@ -422,0 +438,0 @@ });

lib/module/motify/use-map-animate-to-style.js

 import { usePresence } from 'framer-motion';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAnimatedStyle, useSharedValue, withDecay, withSpring, withTiming, withDelay, withRepeat, withSequence, runOnJS } from 'react-native-reanimated';
@@ -159,2 +159,8 @@ import { PackageName } from '../constants/package-name';
 
+const empty = {
+  object: {}
+};
+
+const debug = (...args) => console.log('[moti-bug]', ...args);
+
 export default function useMapAnimateToStyle({
@@ -171,11 +177,19 @@ animate,
   const isMounted = useSharedValue(false, false);
-  const [isPresent, safeToUnmount] = usePresence(); // is any of this necessary?
+  const [isPresent, safeToUnmount] = usePresence();
+  const reanimatedSafeToUnmount = useCallback(() => {
+    safeToUnmount === null || safeToUnmount === void 0 ? void 0 : safeToUnmount();
+  }, [safeToUnmount]);
+  const reanimatedOnDidAnimated = useCallback((...args) => {
+    onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate(...args);
+  }, [onDidAnimate]); // is any of this necessary?
 
-  const initialSV = useSharedValue(from);
-  const animateSV = useSharedValue(animate);
-  const exitSV = useSharedValue(exit);
-  const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit).length;
+  const initialSV = useSharedValue(from || empty.object);
+  const animateSV = useSharedValue(animate || empty.object);
+  const exitSV = useSharedValue(exit || empty.object);
+  const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit !== null && exit !== void 0 ? exit : {}).length;
+  debug('before animated style');
   const style = useAnimatedStyle(() => {
     var _state$__state;
 
+    debug('inside animated style');
     const final = {
@@ -190,3 +204,3 @@ // initializing here fixes reanimated object.__defineProperty bug(?)
     const isExiting = !isPresent && hasExitStyle;
-    let mergedStyles;
+    let mergedStyles = {};
 
@@ -203,9 +217,8 @@ if (stylePriority === 'state') {
 
-    if (isExiting) {
+    if (isExiting && exitStyle) {
       mergedStyles = exitStyle;
     }
 
+    debug('here');
     Object.keys(mergedStyles).forEach((key, index) => {
-      'worklet';
-
       const initialValue = initialStyle[key];
@@ -223,11 +236,11 @@ const value = mergedStyles[key];
         if (onDidAnimate) {
-          runOnJS(onDidAnimate)(key, canceled, recentValue);
+          runOnJS(reanimatedOnDidAnimated)(key, canceled, recentValue);
         }
 
         if (isExiting) {
-          // if this is true, then we've finished our exit animations
-          const isLastStyleKeyToAnimate = index + 1 === Object.keys(mergedStyles).length;
+          //   // if this is true, then we've finished our exit animations
+          const isLastStyleKeyToAnimate = index + 1 === Object.keys(mergedStyles || {}).length;
 
-          if (isLastStyleKeyToAnimate && safeToUnmount) {
-            runOnJS(safeToUnmount)();
+          if (isLastStyleKeyToAnimate) {
+            runOnJS(reanimatedSafeToUnmount)();
           }
@@ -263,3 +276,3 @@ }
         if (typeof value === 'string' && !value.startsWith('rgb') && !value.startsWith('#')) {
-          console.error("[".concat(PackageName, "]: You passed ").concat(key, ": ").concat(value, ", but not all color values are supported yet in Reanimated 2. \u2639\uFE0F \n                  \nPlease use an rgb or hex formatted color.\n  Please go to https://github.com/software-mansion/react-native-reanimated/issues/845 and comment so that this bug can get fixed!"));
+          console.error("[".concat(PackageName, "]: You passed ").concat(key, ": ").concat(value, ", but not all color values are supported yet in Reanimated 2. \u2639\uFE0F\n\n      Please use an rgb or hex formatted color."));
         } // }
@@ -382,3 +395,3 @@
         final[key] = {};
-        Object.keys(value).forEach(innerStyleKey => {
+        Object.keys(value || {}).forEach(innerStyleKey => {
           let finalValue = animation(value, config, callback);
@@ -410,2 +423,5 @@
     });
+    debug('end of UAS', {
+      final
+    });
     return final;
@@ -412,0 +428,0 @@ });

package.json

 {
   "name": "moti",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": false,
@@ -5,0 +5,0 @@ "keywords": [

src/motify/use-map-animate-to-style.ts

 import { usePresence } from 'framer-motion'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import type { TransformsStyle } from 'react-native'
@@ -198,2 +198,8 @@ import Animated, {
 
+const empty = {
+  object: {},
+}
+
+const debug = (...args) => console.log('[moti-bug]', ...args)
+
 export default function useMapAnimateToStyle<Animate>({
@@ -212,9 +218,24 @@ animate,
 
+  const reanimatedSafeToUnmount = useCallback(() => {
+    safeToUnmount?.()
+  }, [safeToUnmount])
+
+  const reanimatedOnDidAnimated = useCallback<NonNullable<typeof onDidAnimate>>(
+    (...args) => {
+      onDidAnimate?.(...args)
+    },
+    [onDidAnimate]
+  )
+
   // is any of this necessary?
-  const initialSV = useSharedValue(from)
-  const animateSV = useSharedValue(animate)
-  const exitSV = useSharedValue(exit)
-  const hasExitStyle = typeof exit === 'object' && !!Object.keys(exit).length
+  const initialSV = useSharedValue(from || empty.object)
+  const animateSV = useSharedValue(animate || empty.object)
+  const exitSV = useSharedValue(exit || empty.object)
+  const hasExitStyle =
+    typeof exit === 'object' && !!Object.keys(exit ?? {}).length
 
+  debug('before animated style')
   const style = useAnimatedStyle(() => {
+    debug('inside animated style')
+
     const final = {
@@ -232,3 +253,3 @@ // initializing here fixes reanimated object.__defineProperty bug(?)
 
-    let mergedStyles: Animate
+    let mergedStyles: Animate = {} as Animate
     if (stylePriority === 'state') {
@@ -240,9 +261,9 @@ mergedStyles = { ...animateStyle, ...variantStyle }
 
-    if (isExiting) {
+    if (isExiting && exitStyle) {
       mergedStyles = exitStyle as any
     }
 
+    debug('here')
+
     Object.keys(mergedStyles).forEach((key, index) => {
-      'worklet'
-
       const initialValue = initialStyle[key]
@@ -264,11 +285,10 @@ const value = mergedStyles[key]
         if (onDidAnimate) {
-          runOnJS(onDidAnimate)(key as any, canceled, recentValue)
+          runOnJS(reanimatedOnDidAnimated)(key as any, canceled, recentValue)
         }
         if (isExiting) {
-          // if this is true, then we've finished our exit animations
+          //   // if this is true, then we've finished our exit animations
           const isLastStyleKeyToAnimate =
-            index + 1 === Object.keys(mergedStyles).length
-
-          if (isLastStyleKeyToAnimate && safeToUnmount) {
-            runOnJS(safeToUnmount)()
+            index + 1 === Object.keys(mergedStyles || {}).length
+          if (isLastStyleKeyToAnimate) {
+            runOnJS(reanimatedSafeToUnmount)()
           }
@@ -308,6 +328,5 @@ }
           console.error(
-            `[${PackageName}]: You passed ${key}: ${value}, but not all color values are supported yet in Reanimated 2. ☹️ 
-                  
-Please use an rgb or hex formatted color.
-  Please go to https://github.com/software-mansion/react-native-reanimated/issues/845 and comment so that this bug can get fixed!`
+            `[${PackageName}]: You passed ${key}: ${value}, but not all color values are supported yet in Reanimated 2. ☹️
+
+      Please use an rgb or hex formatted color.`
           )
@@ -424,3 +443,3 @@ }
         final[key] = {}
-        Object.keys(value).forEach((innerStyleKey) => {
+        Object.keys(value || {}).forEach((innerStyleKey) => {
           let finalValue = animation(value, config, callback)
@@ -452,2 +471,4 @@
 
+    debug('end of UAS', { final })
+
     return final
@@ -454,0 +475,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

423890

increased by0.99%

Lines of code

7522

increased by0.59%

No dependency changes