@tamagui/animations-react-native 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/esm/createAnimations.mjs

@@ -1,56 +1,66 @@
-import { normalizeTransition, getEffectiveAnimation } from "@tamagui/animation-helpers";
+import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import { useEvent, useThemeWithState } from "@tamagui/web";
 import React from "react";
 import { Animated } from "react-native-web";
-const resolveDynamicValue = (value, isDark) => value && typeof value == "object" && "dynamic" in value ? isDark ? value.dynamic.dark : value.dynamic.light : value,
-  animatedStyleKey = {
-    transform: !0,
-    opacity: !0
-  },
-  colorStyleKey = {
-    backgroundColor: !0,
-    color: !0,
-    borderColor: !0,
-    borderLeftColor: !0,
-    borderRightColor: !0,
-    borderTopColor: !0,
-    borderBottomColor: !0
-  },
-  costlyToAnimateStyleKey = {
-    borderRadius: !0,
-    borderTopLeftRadius: !0,
-    borderTopRightRadius: !0,
-    borderBottomLeftRadius: !0,
-    borderBottomRightRadius: !0,
-    borderWidth: !0,
-    borderLeftWidth: !0,
-    borderRightWidth: !0,
-    borderTopWidth: !0,
-    borderBottomWidth: !0,
-    ...colorStyleKey
-    // TODO for other keys like height or width, it's better to not add them here till layout animations are ready
-  },
-  AnimatedView = Animated.View,
-  AnimatedText = Animated.Text;
+const isFabric = !isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
+const resolveDynamicValue = (value, isDark) => {
+  if (value && typeof value === "object" && "dynamic" in value) {
+    const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
+    return dynamicValue;
+  }
+  return value;
+};
+const animatedStyleKey = {
+  transform: true,
+  opacity: true
+};
+const colorStyleKey = {
+  backgroundColor: true,
+  color: true,
+  borderColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderTopColor: true,
+  borderBottomColor: true
+};
+const costlyToAnimateStyleKey = {
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderTopWidth: true,
+  borderBottomWidth: true,
+  ...colorStyleKey
+};
+const AnimatedView = Animated.View;
+const AnimatedText = Animated.Text;
 function useAnimatedNumber(initial) {
   const state = React.useRef(null);
-  return state.current || (state.current = {
-    composite: null,
-    val: new Animated.Value(initial),
-    strategy: {
-      type: "spring"
-    }
-  }), {
+  if (!state.current) {
+    state.current = {
+      composite: null,
+      val: new Animated.Value(initial),
+      strategy: {
+        type: "spring"
+      }
+    };
+  }
+  return {
     getInstance() {
       return state.current.val;
     },
     getValue() {
-      return state.current.val._value;
+      return state.current.val["_value"];
     },
     stop() {
-      state.current.composite?.stop(), state.current.composite = null;
+      state.current.composite?.stop();
+      state.current.composite = null;
     },
     setValue(next, {
       type,
@@ -58,55 +68,68 @@ function useAnimatedNumber(initial) {
     } = {
       type: "spring"
     }, onFinish) {
-      const val = state.current.val,
-        handleFinish = onFinish ? ({
-          finished
-        }) => finished ? onFinish() : null : void 0;
-      if (type === "direct") val.setValue(next);else if (type === "spring") {
+      const val = state.current.val;
+      const handleFinish = onFinish ? ({
+        finished
+      }) => finished ? onFinish() : null : void 0;
+      if (type === "direct") {
+        val.setValue(next);
+      } else if (type === "spring") {
         state.current.composite?.stop();
         const composite = Animated.spring(val, {
           ...config,
           toValue: next,
-          useNativeDriver: !isWeb
+          useNativeDriver: isFabric
         });
-        composite.start(handleFinish), state.current.composite = composite;
+        composite.start(handleFinish);
+        state.current.composite = composite;
       } else {
         state.current.composite?.stop();
         const composite = Animated.timing(val, {
           ...config,
           toValue: next,
-          useNativeDriver: !isWeb
+          useNativeDriver: isFabric
         });
-        composite.start(handleFinish), state.current.composite = composite;
+        composite.start(handleFinish);
+        state.current.composite = composite;
       }
     }
   };
 }
 const useAnimatedNumberReaction = ({
-    value
-  }, onValue) => {
-    const onChange = useEvent(current => {
-      onValue(current.value);
-    });
-    React.useEffect(() => {
-      const id = value.getInstance().addListener(onChange);
-      return () => {
-        value.getInstance().removeListener(id);
-      };
-    }, [value, onChange]);
-  },
-  useAnimatedNumberStyle = (value, getStyle) => getStyle(value.getInstance());
-function createAnimations(animations) {
+  value
+}, onValue) => {
+  const onChange = useEvent(current => {
+    onValue(current.value);
+  });
+  React.useEffect(() => {
+    const id = value.getInstance().addListener(onChange);
+    return () => {
+      value.getInstance().removeListener(id);
+    };
+  }, [value, onChange]);
+};
+const useAnimatedNumberStyle = (value, getStyle) => {
+  return getStyle(value.getInstance());
+};
+const useAnimatedNumbersStyle = (vals, getStyle) => {
+  return getStyle(...vals.map(v => v.getInstance()));
+};
+function createAnimations(animations, options) {
+  const nativeDriver = options?.useNativeDriver ?? isFabric;
   return {
-    isReactNative: !0,
+    isReactNative: true,
     inputStyle: "value",
     outputStyle: "inline",
+    avoidReRenders: true,
     animations,
+    needsCustomComponent: true,
     View: AnimatedView,
     Text: AnimatedText,
     useAnimatedNumber,
     useAnimatedNumberReaction,
     useAnimatedNumberStyle,
+    useAnimatedNumbersStyle,
     usePresence,
     ResetPresence,
     useAnimations: ({
@@ -114,163 +137,300 @@ function createAnimations(animations) {
       onDidAnimate,
       style,
       componentState,
-      presence
+      presence,
+      useStyleEmitter
     }) => {
-      const isDisabled = isWeb && componentState.unmounted === !0,
-        isExiting = presence?.[0] === !1,
-        sendExitComplete = presence?.[1],
-        [, themeState] = useThemeWithState({}),
-        isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark"),
-        animateStyles = React.useRef({}),
-        animatedTranforms = React.useRef([]),
-        animationsState = React.useRef(/* @__PURE__ */new WeakMap()),
-        animateOnly = props.animateOnly || [],
-        hasTransitionOnly = !!props.animateOnly,
-        isEntering = !!componentState.unmounted,
-        wasEnteringRef = React.useRef(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+      const isDisabled = isWeb && componentState.unmounted === true;
+      const isExiting = presence?.[0] === false;
+      const sendExitComplete = presence?.[1];
+      const [, themeState] = useThemeWithState({});
+      const isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark");
+      const animateStyles = React.useRef({});
+      const animatedTranforms = React.useRef([]);
+      const animationsState = React.useRef(/* @__PURE__ */new WeakMap());
+      const exitCycleIdRef = React.useRef(0);
+      const exitCompletedRef = React.useRef(false);
+      const wasExitingRef = React.useRef(false);
+      const justStartedExiting = isExiting && !wasExitingRef.current;
+      const justStoppedExiting = !isExiting && wasExitingRef.current;
+      if (justStartedExiting) {
+        exitCycleIdRef.current++;
+        exitCompletedRef.current = false;
+      }
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++;
+      }
+      const animateOnly = props.animateOnly || [];
+      const hasTransitionOnly = !!props.animateOnly;
+      const isEntering = !!componentState.unmounted;
+      const wasEnteringRef = React.useRef(isEntering);
+      const justFinishedEntering = wasEnteringRef.current && !isEntering;
       React.useEffect(() => {
         wasEnteringRef.current = isEntering;
       });
-      const args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering],
-        isThereNoNativeStyleKeys = React.useMemo(() => isWeb ? !0 : Object.keys(style).some(key => animateOnly ? !animatedStyleKey[key] && animateOnly.indexOf(key) === -1 : !animatedStyleKey[key]), args),
-        res = React.useMemo(() => {
-          const runners = [],
-            completions = [],
-            animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default",
-            nonAnimatedStyle = {};
-          for (const key in style) {
-            const rawVal = style[key],
-              val = resolveDynamicValue(rawVal, isDark);
-            if (val !== void 0 && !isDisabled) {
-              if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
-                nonAnimatedStyle[key] = val;
-                continue;
-              }
-              if (hasTransitionOnly && !animateOnly.includes(key)) {
-                nonAnimatedStyle[key] = val;
-                continue;
-              }
-              if (key !== "transform") {
-                animateStyles.current[key] = update(key, animateStyles.current[key], val);
-                continue;
-              }
-              if (val) {
-                if (typeof val == "string") {
-                  console.warn("Warning: Tamagui can't animate string transforms yet!");
-                  continue;
-                }
-                for (const [index, transform] of val.entries()) {
-                  if (!transform) continue;
-                  const tkey = Object.keys(transform)[0],
-                    currentTransform = animatedTranforms.current[index]?.[tkey];
-                  animatedTranforms.current[index] = {
-                    [tkey]: update(tkey, currentTransform, transform[tkey])
-                  }, animatedTranforms.current = [...animatedTranforms.current];
-                }
-              }
-            }
+      const args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering, hasTransitionOnly];
+      const res = React.useMemo(() => {
+        const runners = [];
+        const completions = [];
+        const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+        const nonAnimatedStyle = {};
+        for (const key in style) {
+          const rawVal = style[key];
+          const val = resolveDynamicValue(rawVal, isDark);
+          if (val === void 0) continue;
+          if (isDisabled) {
+            continue;
           }
-          const animatedStyle = {
-            ...Object.fromEntries(Object.entries(animateStyles.current).map(([k, v]) => [k, animationsState.current.get(v)?.interpolation || v])),
-            transform: animatedTranforms.current.map(r => {
-              const key = Object.keys(r)[0],
-                val = animationsState.current.get(r[key])?.interpolation || r[key];
-              return {
-                [key]: val
-              };
-            })
-          };
-          return {
-            runners,
-            completions,
-            style: [nonAnimatedStyle, animatedStyle]
-          };
-          function update(key, animated, valIn) {
-            const isColorStyleKey = colorStyleKey[key],
-              [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
-            let animateToValue = val;
-            const value = animated || new Animated.Value(val),
-              curInterpolation = animationsState.current.get(value);
-            let interpolateArgs;
-            if (type && (interpolateArgs = getInterpolated(curInterpolation?.current ?? value._value, val, type), animationsState.current.set(value, {
+          if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
+            nonAnimatedStyle[key] = val;
+            continue;
+          }
+          if (hasTransitionOnly && !animateOnly.includes(key)) {
+            nonAnimatedStyle[key] = val;
+            continue;
+          }
+          if (key !== "transform") {
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
+            continue;
+          }
+          if (!val) continue;
+          if (typeof val === "string") {
+            console.warn(`Warning: Tamagui can't animate string transforms yet!`);
+            continue;
+          }
+          for (const [index, transform] of val.entries()) {
+            if (!transform) continue;
+            const tkey = Object.keys(transform)[0];
+            const currentTransform = animatedTranforms.current[index]?.[tkey];
+            animatedTranforms.current[index] = {
+              [tkey]: update(tkey, currentTransform, transform[tkey])
+            };
+            animatedTranforms.current = [...animatedTranforms.current];
+          }
+        }
+        const animatedTransformStyle = animatedTranforms.current.length > 0 ? {
+          transform: animatedTranforms.current.map(r => {
+            const key = Object.keys(r)[0];
+            const val = animationsState.current.get(r[key])?.interpolation || r[key];
+            return {
+              [key]: val
+            };
+          })
+        } : {};
+        const animatedStyle = {
+          ...Object.fromEntries(Object.entries(animateStyles.current).map(([k, v]) => [k, animationsState.current.get(v)?.interpolation || v])),
+          ...animatedTransformStyle
+        };
+        return {
+          runners,
+          completions,
+          style: [nonAnimatedStyle, animatedStyle]
+        };
+        function update(key, animated, valIn) {
+          const isColorStyleKey = colorStyleKey[key];
+          const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
+          let animateToValue = val;
+          const value = animated || new Animated.Value(val);
+          const curInterpolation = animationsState.current.get(value);
+          let interpolateArgs;
+          if (type) {
+            interpolateArgs = getInterpolated(curInterpolation?.current ?? value["_value"], val, type);
+            animationsState.current.set(value, {
               interpolation: value.interpolate(interpolateArgs),
               current: val
-            })), isColorStyleKey && (animateToValue = curInterpolation?.animateToValue ? 0 : 1, interpolateArgs = getColorInterpolated(curInterpolation?.current,
+            });
+          }
+          if (isColorStyleKey) {
+            animateToValue = curInterpolation?.animateToValue ? 0 : 1;
+            interpolateArgs = getColorInterpolated(curInterpolation?.current,
             // valIn is the next color
-            valIn, animateToValue), animationsState.current.set(value, {
+            valIn, animateToValue);
+            animationsState.current.set(value, {
               current: valIn,
               interpolation: value.interpolate(interpolateArgs),
               animateToValue: curInterpolation?.animateToValue ? 0 : 1
-            })), value) {
-              const animationConfig = getAnimationConfig(key, animations, props.transition, animationState);
-              let resolve;
-              const promise = new Promise(res2 => {
-                resolve = res2;
-              });
-              completions.push(promise), runners.push(() => {
-                value.stopAnimation();
-                function getAnimation() {
-                  return Animated[animationConfig.type || "spring"](value, {
-                    toValue: animateToValue,
-                    useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
-                    ...animationConfig
-                  });
-                }
-                (animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation()).start(({
-                  finished
-                }) => {
-                  finished && resolve();
+            });
+          }
+          if (value) {
+            const animationConfig = getAnimationConfig(key, animations, props.transition, animationState);
+            let resolve;
+            const promise = new Promise(res2 => {
+              resolve = res2;
+            });
+            completions.push(promise);
+            runners.push(() => {
+              value.stopAnimation();
+              function getAnimation() {
+                return Animated[animationConfig.type || "spring"](value, {
+                  toValue: animateToValue,
+                  useNativeDriver: nativeDriver,
+                  ...animationConfig
                 });
+              }
+              const animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
+              animation.start(({
+                finished
+              }) => {
+                if (finished || isExiting) {
+                  resolve();
+                }
               });
+            });
+          }
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"] === "verbose") {
+              console.info(" \u{1F4A0} animate", key, `from (${value["_value"]}) to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
             }
-            return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F4A0} animate", key, `from (${value._value}) to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs), value;
           }
-        }, args);
-      return useIsomorphicLayoutEffect(() => {
+          return value;
+        }
+      }, args);
+      React.useEffect(() => {
+        wasExitingRef.current = isExiting;
+      });
+      useIsomorphicLayoutEffect(() => {
         res.runners.forEach(r => r());
-        let cancel = !1;
-        return Promise.all(res.completions).then(() => {
-          cancel || (onDidAnimate?.(), isExiting && sendExitComplete?.());
-        }), () => {
-          cancel = !0;
+        const cycleId = exitCycleIdRef.current;
+        if (res.completions.length === 0) {
+          onDidAnimate?.();
+          if (isExiting && !exitCompletedRef.current) {
+            exitCompletedRef.current = true;
+            sendExitComplete?.();
+          }
+          return;
+        }
+        let cancel = false;
+        Promise.all(res.completions).then(() => {
+          if (cancel) return;
+          if (isExiting && cycleId !== exitCycleIdRef.current) return;
+          if (isExiting && exitCompletedRef.current) return;
+          onDidAnimate?.();
+          if (isExiting) {
+            exitCompletedRef.current = true;
+            sendExitComplete?.();
+          }
+        });
+        return () => {
+          cancel = true;
         };
-      }, args), process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("Animated", {
-        response: res,
-        inputStyle: style,
-        isExiting
-      }), res;
+      }, args);
+      useStyleEmitter?.(nextStyle => {
+        for (const key in nextStyle) {
+          const rawVal = nextStyle[key];
+          const val = resolveDynamicValue(rawVal, isDark);
+          if (val === void 0) continue;
+          if (key === "transform" && Array.isArray(val)) {
+            for (const [index, transform] of val.entries()) {
+              if (!transform) continue;
+              const tkey = Object.keys(transform)[0];
+              const currentTransform = animatedTranforms.current[index]?.[tkey];
+              animatedTranforms.current[index] = {
+                [tkey]: update(tkey, currentTransform, transform[tkey])
+              };
+            }
+          } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key]) {
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
+          }
+        }
+        res.runners.forEach(r => r());
+        function update(key, animated, valIn) {
+          const isColor = colorStyleKey[key];
+          const [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
+          let animateToValue = numVal;
+          const value = animated || new Animated.Value(numVal);
+          const curInterpolation = animationsState.current.get(value);
+          if (type) {
+            animationsState.current.set(value, {
+              interpolation: value.interpolate(getInterpolated(curInterpolation?.current ?? value["_value"], numVal, type)),
+              current: numVal
+            });
+          }
+          if (isColor) {
+            animateToValue = curInterpolation?.animateToValue ? 0 : 1;
+            animationsState.current.set(value, {
+              current: valIn,
+              interpolation: value.interpolate(getColorInterpolated(curInterpolation?.current, valIn, animateToValue)),
+              animateToValue: curInterpolation?.animateToValue ? 0 : 1
+            });
+          }
+          const animationConfig = getAnimationConfig(key, animations, props.transition, "default");
+          res.runners.push(() => {
+            value.stopAnimation();
+            const anim = Animated[animationConfig.type || "spring"](value, {
+              toValue: animateToValue,
+              useNativeDriver: nativeDriver,
+              ...animationConfig
+            });
+            (animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), anim]) : anim).start();
+          });
+          return value;
+        }
+      });
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"] === "verbose") {
+          console.info(`Animated`, {
+            response: res,
+            inputStyle: style,
+            isExiting
+          });
+        }
+      }
+      return res;
     }
   };
 }
 function getColorInterpolated(currentColor, nextColor, animateToValue) {
-  const inputRange = [0, 1],
-    outputRange = [currentColor || nextColor, nextColor];
-  return animateToValue === 0 && outputRange.reverse(), {
+  const inputRange = [0, 1];
+  const outputRange = [currentColor ? currentColor : nextColor, nextColor];
+  if (animateToValue === 0) {
+    outputRange.reverse();
+  }
+  return {
     inputRange,
     outputRange
   };
 }
 function getInterpolated(current, next, postfix = "deg") {
-  next === current && (current = next - 1e-9);
-  const inputRange = [current, next],
-    outputRange = [`${current}${postfix}`, `${next}${postfix}`];
-  return next < current && (inputRange.reverse(), outputRange.reverse()), {
+  if (next === current) {
+    current = next - 1e-9;
+  }
+  const inputRange = [current, next];
+  const outputRange = [`${current}${postfix}`, `${next}${postfix}`];
+  if (next < current) {
+    inputRange.reverse();
+    outputRange.reverse();
+  }
+  return {
     inputRange,
     outputRange
   };
 }
 function getAnimationConfig(key, animations, transition, animationState = "default") {
-  const normalized = normalizeTransition(transition),
-    shortKey = transformShorthands[key],
-    propAnimation = normalized.properties[key] ?? normalized.properties[shortKey];
-  let animationType = null,
-    extraConf = {};
-  return typeof propAnimation == "string" ? animationType = propAnimation : propAnimation && typeof propAnimation == "object" ? (animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState), extraConf = propAnimation) : animationType = getEffectiveAnimation(normalized, animationState), normalized.delay && !extraConf.delay && (extraConf = {
-    ...extraConf,
-    delay: normalized.delay
-  }), {
-    ...(animationType ? animations[animationType] : {}),
+  const normalized = normalizeTransition(transition);
+  const shortKey = transformShorthands[key];
+  const propAnimation = normalized.properties[key] ?? normalized.properties[shortKey];
+  let animationType = null;
+  let extraConf = {};
+  if (typeof propAnimation === "string") {
+    animationType = propAnimation;
+  } else if (propAnimation && typeof propAnimation === "object") {
+    animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState);
+    extraConf = propAnimation;
+  } else {
+    animationType = getEffectiveAnimation(normalized, animationState);
+  }
+  if (normalized.delay && !extraConf.delay) {
+    extraConf = {
+      ...extraConf,
+      delay: normalized.delay
+    };
+  }
+  const found = animationType ? animations[animationType] : {};
+  return {
+    ...found,
+    // Apply global spring config overrides (from transition={['bouncy', { stiffness: 1000 }]})
+    ...normalized.config,
+    // Property-specific config takes highest precedence
     ...extraConf
   };
 }
@@ -280,10 +440,12 @@ const transformShorthands = {
   translateX: "x",
   translateY: "y"
 };
-function getValue(input, isColor = !1) {
-  if (typeof input != "string") return [input];
+function getValue(input, isColor = false) {
+  if (typeof input !== "string") {
+    return [input];
+  }
   const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? [];
   return [+number, after];
 }
-export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle };
+export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle, useAnimatedNumbersStyle };
 //# sourceMappingURL=createAnimations.mjs.map