@tamagui/animations-react-native 1.0.1-beta.99 → 1.0.1-rc.0

package/dist/cjs/createAnimations.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -17,77 +18,286 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var createAnimations_exports = {};
 __export(createAnimations_exports, {
-  createAnimations: () => createAnimations
+  AnimatedText: () => AnimatedText,
+  AnimatedView: () => AnimatedView,
+  createAnimations: () => createAnimations,
+  useAnimatedNumber: () => useAnimatedNumber,
+  useAnimatedNumberReaction: () => useAnimatedNumberReaction,
+  useAnimatedNumberStyle: () => useAnimatedNumberStyle
 });
 module.exports = __toCommonJS(createAnimations_exports);
-var import_animate_presence = require("@tamagui/animate-presence");
+var import_core = require("@tamagui/core");
+var import_use_presence = require("@tamagui/use-presence");
 var import_react = require("react");
 var import_react_native = require("react-native");
+const animatedStyleKey = {
+  transform: true,
+  opacity: true
+};
+const AnimatedView = import_react_native.Animated.View;
+const AnimatedText = import_react_native.Animated.Text;
+function useAnimatedNumber(initial) {
+  const state = (0, import_core.useSafeRef)(
+    null
+  );
+  if (!state.current) {
+    state.current = {
+      composite: null,
+      val: new import_react_native.Animated.Value(initial),
+      strategy: { type: "spring" }
+    };
+  }
+  return {
+    getInstance() {
+      return state.current.val;
+    },
+    getValue() {
+      return state.current.val["_value"];
+    },
+    stop() {
+      var _a;
+      (_a = state.current.composite) == null ? void 0 : _a.stop();
+      state.current.composite = null;
+    },
+    setValue(next, { type, ...config } = { type: "spring" }) {
+      var _a, _b;
+      const val = state.current.val;
+      if (type === "direct") {
+        val.setValue(next);
+      } else if (type === "spring") {
+        (_a = state.current.composite) == null ? void 0 : _a.stop();
+        const composite = import_react_native.Animated.spring(val, {
+          ...config,
+          toValue: next,
+          useNativeDriver: !import_core.isWeb
+        });
+        composite.start();
+        state.current.composite = composite;
+      } else {
+        (_b = state.current.composite) == null ? void 0 : _b.stop();
+        const composite = import_react_native.Animated.timing(val, {
+          ...config,
+          toValue: next,
+          useNativeDriver: !import_core.isWeb
+        });
+        composite.start();
+        state.current.composite = composite;
+      }
+    }
+  };
+}
+function useAnimatedNumberReaction(value, cb) {
+  const onChange = (0, import_core.useEvent)((current) => {
+    cb(current.value);
+  });
+  (0, import_react.useEffect)(() => {
+    const id = value.getInstance().addListener(onChange);
+    return () => {
+      value.getInstance().removeListener(id);
+    };
+  }, [value, onChange]);
+}
+function useAnimatedNumberStyle(value, getStyle) {
+  return getStyle(value.getInstance());
+}
 function createAnimations(animations) {
-  const AnimatedView = import_react_native.Animated.View;
-  const AnimatedText = import_react_native.Animated.Text;
   AnimatedView["displayName"] = "AnimatedView";
   AnimatedText["displayName"] = "AnimatedText";
   return {
-    avoidClasses: true,
+    isReactNative: true,
     animations,
     View: AnimatedView,
     Text: AnimatedText,
-    useAnimations: (props, helpers) => {
-      var _a, _b;
-      const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
-      const [isPresent, sendExitComplete] = (0, import_animate_presence.usePresence)();
-      const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
-      const exitStyle = (presence == null ? void 0 : presence.exitVariant) ? ((_b = (_a = staticConfig.variantsParsed) == null ? void 0 : _a[presence.exitVariant]) == null ? void 0 : _b.true) || pseudos.exitStyle : pseudos.exitStyle;
-      const onDidAnimateCb = (0, import_react.useCallback)((...args2) => {
-        onDidAnimate == null ? void 0 : onDidAnimate(...args2);
-      }, [onDidAnimate]);
-      const isExiting = isPresent === false;
-      const isEntering = !state.mounted;
-      const all = getStyle({
-        isExiting,
-        isEntering,
-        exitVariant: presence == null ? void 0 : presence.exitVariant,
-        enterVariant: presence == null ? void 0 : presence.enterVariant
-      });
-      const animatedValues = (0, import_react.useRef)({});
-      const [animatedStyles, nonAnimatedStyle] = [{}, {}];
-      const animatedStyleKey = {
-        transform: true,
-        opacity: true
-      };
-      for (const key of Object.keys(all)) {
-        if (animatedStyleKey[key]) {
-          animatedStyles[key] = all[key];
-        } else {
-          nonAnimatedStyle[key] = all[key];
-        }
+    useAnimatedNumber,
+    useAnimatedNumberReaction,
+    useAnimatedNumberStyle,
+    usePresence: import_use_presence.usePresence,
+    useAnimations: ({ props, onDidAnimate, style, state, presence }) => {
+      const isExiting = (presence == null ? void 0 : presence[0]) === false;
+      const sendExitComplete = presence == null ? void 0 : presence[1];
+      const mergedStyles = style;
+      const animateStyles = (0, import_core.useSafeRef)({});
+      const animatedTranforms = (0, import_core.useSafeRef)([]);
+      const animationsState = (0, import_core.useSafeRef)(null);
+      if (!animationsState.current) {
+        animationsState.current = /* @__PURE__ */ new WeakMap();
       }
-      const animatedStyle = animatedStyleKey;
-      const args = [
-        JSON.stringify(all),
-        state.mounted,
-        state.hover,
-        state.press,
-        state.pressIn,
-        state.focus,
-        delay,
-        isPresent,
-        onDidAnimate,
-        onDidAnimateCb,
-        presence == null ? void 0 : presence.exitVariant,
-        presence == null ? void 0 : presence.enterVariant
-      ];
-      return (0, import_react.useMemo)(() => {
+      const runners = [];
+      const completions = [];
+      const args = [JSON.stringify(mergedStyles), JSON.stringify(state), isExiting, !!onDidAnimate];
+      const res = (0, import_react.useMemo)(() => {
+        var _a;
+        const nonAnimatedStyle = {};
+        for (const key in mergedStyles) {
+          const val = mergedStyles[key];
+          if (!animatedStyleKey[key]) {
+            nonAnimatedStyle[key] = val;
+            continue;
+          }
+          if (key !== "transform") {
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
+            continue;
+          }
+          if (!val)
+            continue;
+          for (const [index, transform] of val.entries()) {
+            if (!transform)
+              continue;
+            const tkey = Object.keys(transform)[0];
+            const currentTransform = (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey];
+            animatedTranforms.current[index] = {
+              [tkey]: update(tkey, currentTransform, transform[tkey])
+            };
+            animatedTranforms.current = [...animatedTranforms.current];
+          }
+        }
+        const animatedStyle = {
+          ...Object.fromEntries(
+            Object.entries({
+              ...animateStyles.current
+            }).map(([k, v]) => {
+              var _a2;
+              return [k, ((_a2 = animationsState.current.get(v)) == null ? void 0 : _a2.interopolation) || v];
+            })
+          ),
+          transform: animatedTranforms.current.map((r) => {
+            var _a2;
+            const key = Object.keys(r)[0];
+            const val = ((_a2 = animationsState.current.get(r[key])) == null ? void 0 : _a2.interopolation) || r[key];
+            return { [key]: val };
+          })
+        };
         return {
           style: [nonAnimatedStyle, animatedStyle]
         };
+        function update(key, animated, valIn) {
+          const [val, type] = getValue(valIn);
+          const value = animated || new import_react_native.Animated.Value(val);
+          let interpolateArgs;
+          if (type) {
+            const curInterpolation = animationsState.current.get(value);
+            interpolateArgs = getInterpolated(
+              (curInterpolation == null ? void 0 : curInterpolation.current) ?? value["_value"],
+              val,
+              type
+            );
+            animationsState.current.set(value, {
+              interopolation: value.interpolate(interpolateArgs),
+              current: val
+            });
+          }
+          if (value) {
+            const animationConfig = getAnimationConfig(key, animations, props.animation);
+            let resolve;
+            const promise = new Promise((res2) => {
+              resolve = res2;
+            });
+            completions.push(promise);
+            runners.push(() => {
+              value.stopAnimation();
+              import_react_native.Animated.spring(value, {
+                toValue: val,
+                useNativeDriver: !import_core.isWeb,
+                ...animationConfig
+              }).start(({ finished }) => {
+                if (finished) {
+                  resolve();
+                }
+              });
+            });
+          }
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"]) {
+              console.log(" \u{1F4A0} animate", key, `from ${value["_value"]} to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
+            }
+          }
+          return value;
+        }
+      }, args);
+      (0, import_core.useIsomorphicLayoutEffect)(() => {
+        runners.forEach((r) => r());
+        let cancel = false;
+        Promise.all(completions).then(() => {
+          if (cancel)
+            return;
+          onDidAnimate == null ? void 0 : onDidAnimate();
+          if (isExiting) {
+            sendExitComplete == null ? void 0 : sendExitComplete();
+          }
+        });
+        return () => {
+          cancel = true;
+        };
       }, args);
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"]) {
+          console.log(`Returning animated`, res);
+        }
+      }
+      return res;
     }
   };
 }
+function getInterpolated(current, next, postfix = "deg") {
+  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, animation) {
+  if (typeof animation === "string") {
+    return animations[animation];
+  }
+  let type = "";
+  let extraConf;
+  if (Array.isArray(animation)) {
+    type = animation[0];
+    const conf = animation[1] && animation[1][key];
+    if (conf) {
+      if (typeof conf === "string") {
+        type = conf;
+      } else {
+        type = conf.type || type;
+        extraConf = conf;
+      }
+    }
+  } else {
+    const val = animation == null ? void 0 : animation[key];
+    type = val == null ? void 0 : val.type;
+    extraConf = val;
+  }
+  const found = animations[type];
+  if (!found) {
+    throw new Error(`No animation of type "${type}" for key "${key}"`);
+  }
+  return {
+    ...found,
+    ...extraConf
+  };
+}
+function getValue(input) {
+  if (typeof input !== "string") {
+    return [input];
+  }
+  const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? [];
+  return [+number, after];
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createAnimations
+  AnimatedText,
+  AnimatedView,
+  createAnimations,
+  useAnimatedNumber,
+  useAnimatedNumberReaction,
+  useAnimatedNumberStyle
 });
 //# sourceMappingURL=createAnimations.js.map

package/dist/cjs/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n  [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = {}\n// | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n// | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n// | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n  const AnimatedView = Animated.View\n  const AnimatedText = Animated.Text\n\n  AnimatedView['displayName'] = 'AnimatedView'\n  AnimatedText['displayName'] = 'AnimatedText'\n\n  return {\n    avoidClasses: true,\n    animations,\n    View: AnimatedView,\n    Text: AnimatedText,\n    useAnimations: (props, helpers) => {\n      const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n      const [isPresent, sendExitComplete] = usePresence()\n      const presence = useContext(PresenceContext)\n\n      const exitStyle = presence?.exitVariant\n        ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n        : pseudos.exitStyle\n\n      const onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n        (...args) => {\n          onDidAnimate?.(...args)\n        },\n        [onDidAnimate]\n      )\n\n      const isExiting = isPresent === false\n      const isEntering = !state.mounted\n\n      const all = getStyle({\n        isExiting,\n        isEntering,\n        exitVariant: presence?.exitVariant,\n        enterVariant: presence?.enterVariant,\n      })\n\n      const animatedValues = useRef<Record<string, Animated.Value>>({})\n\n      // TODO loop and create values, run them if they change\n\n      const [animatedStyles, nonAnimatedStyle] = [{}, {}]\n      const animatedStyleKey = {\n        transform: true,\n        opacity: true,\n      }\n      for (const key of Object.keys(all)) {\n        if (animatedStyleKey[key]) {\n          animatedStyles[key] = all[key]\n        } else {\n          nonAnimatedStyle[key] = all[key]\n        }\n      }\n\n      const animatedStyle = animatedStyleKey\n\n      const args = [\n        JSON.stringify(all),\n        state.mounted,\n        state.hover,\n        state.press,\n        state.pressIn,\n        state.focus,\n        delay,\n        isPresent,\n        onDidAnimate,\n        onDidAnimateCb,\n        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      // const callback = (\n      //   isExiting: boolean,\n      //   exitingStyleProps: Record<string, boolean>,\n      //   key: string,\n      //   value: any\n      // ) => {\n      //   return (completed, current) => {\n      //     onDidAnimateCb(key, completed, current, {\n      //       attemptedValue: value,\n      //     })\n      //     if (isExiting) {\n      //       exitingStyleProps[key] = false\n      //       const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n      //       // if this is true, then we've finished our exit animations\n      //       if (!areStylesExiting) {\n      //         sendExitComplete?.()\n      //       }\n      //     }\n      //   }\n      // }\n\n      return useMemo(() => {\n        return {\n          style: [nonAnimatedStyle, animatedStyle],\n        }\n      }, args)\n    },\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6C;AAE7C,mBAAmE;AACnE,0BAAyB;AAWlB,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,6BAAS;AAC9B,QAAM,eAAe,6BAAS;AAE9B,eAAa,iBAAiB;AAC9B,eAAa,iBAAiB;AAE9B,SAAO;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,eAAe,CAAC,OAAO,YAAY;AA1BvC;AA2BM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,yCAAY;AAClD,YAAM,WAAW,6BAAW,uCAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,iBAAiB,8BACrB,IAAI,UAAS;AACX,qDAAe,GAAG;AAAA,MACpB,GACA,CAAC,YAAY,CACf;AAEA,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAE1B,YAAM,MAAM,SAAS;AAAA,QACnB;AAAA,QACA;AAAA,QACA,aAAa,qCAAU;AAAA,QACvB,cAAc,qCAAU;AAAA,MAC1B,CAAC;AAED,YAAM,iBAAiB,yBAAuC,CAAC,CAAC;AAIhE,YAAM,CAAC,gBAAgB,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC;AAClD,YAAM,mBAAmB;AAAA,QACvB,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AACA,iBAAW,OAAO,OAAO,KAAK,GAAG,GAAG;AAClC,YAAI,iBAAiB,MAAM;AACzB,yBAAe,OAAO,IAAI;AAAA,QAC5B,OAAO;AACL,2BAAiB,OAAO,IAAI;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,gBAAgB;AAEtB,YAAM,OAAO;AAAA,QACX,KAAK,UAAU,GAAG;AAAA,QAClB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,qCAAU;AAAA,QACV,qCAAU;AAAA,MACZ;AAuBA,aAAO,0BAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MACF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["import {\n  AnimatedNumberStrategy,\n  AnimationDriver,\n  AnimationProp,\n  UniversalAnimatedNumber,\n  isWeb,\n  useEvent,\n  useIsomorphicLayoutEffect,\n  useSafeRef,\n} from '@tamagui/core'\nimport { usePresence } from '@tamagui/use-presence'\nimport { useEffect, useMemo } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n  [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n  Pick<\n    Animated.SpringAnimationConfig,\n    | 'delay'\n    | 'bounciness'\n    | 'damping'\n    | 'friction'\n    | 'mass'\n    | 'overshootClamping'\n    | 'speed'\n    | 'stiffness'\n    | 'tension'\n    | 'velocity'\n  >\n>\n\nconst animatedStyleKey = {\n  transform: true,\n  opacity: true,\n}\n\nexport const AnimatedView = Animated.View\nexport const AnimatedText = Animated.Text\n\nexport function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value> {\n  const state = useSafeRef(\n    null as any as {\n      val: Animated.Value\n      composite: Animated.CompositeAnimation | null\n      strategy: AnimatedNumberStrategy\n    }\n  )\n  if (!state.current) {\n    state.current = {\n      composite: null,\n      val: new Animated.Value(initial),\n      strategy: { type: 'spring' },\n    }\n  }\n\n  return {\n    getInstance() {\n      return state.current.val\n    },\n    getValue() {\n      return state.current.val['_value']\n    },\n    stop() {\n      state.current.composite?.stop()\n      state.current.composite = null\n    },\n    setValue(next: number, { type, ...config } = { type: 'spring' }) {\n      const val = state.current.val\n      if (type === 'direct') {\n        val.setValue(next)\n      } else if (type === 'spring') {\n        state.current.composite?.stop()\n        const composite = Animated.spring(val, {\n          ...config,\n          toValue: next,\n          useNativeDriver: !isWeb,\n        })\n        composite.start()\n        state.current.composite = composite\n      } else {\n        state.current.composite?.stop()\n        const composite = Animated.timing(val, {\n          ...config,\n          toValue: next,\n          useNativeDriver: !isWeb,\n        })\n        composite.start()\n        state.current.composite = composite\n      }\n    },\n  }\n}\n\nexport function useAnimatedNumberReaction(\n  value: UniversalAnimatedNumber<Animated.Value>,\n  cb: (current: number) => void\n) {\n  const onChange = useEvent((current) => {\n    cb(current.value)\n  })\n\n  useEffect(() => {\n    const id = value.getInstance().addListener(onChange)\n    return () => {\n      value.getInstance().removeListener(id)\n    }\n  }, [value, onChange])\n}\n\nexport function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(\n  value: V,\n  getStyle: (value: any) => any\n) {\n  return getStyle(value.getInstance())\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n  AnimatedView['displayName'] = 'AnimatedView'\n  AnimatedText['displayName'] = 'AnimatedText'\n\n  return {\n    isReactNative: true,\n    animations,\n    View: AnimatedView,\n    Text: AnimatedText,\n    useAnimatedNumber,\n    useAnimatedNumberReaction,\n    useAnimatedNumberStyle,\n    usePresence,\n    useAnimations: ({ props, onDidAnimate, style, state, presence }) => {\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n      const mergedStyles = style\n      const animateStyles = useSafeRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useSafeRef<{ [key: string]: Animated.Value }[]>([])\n      const animationsState = useSafeRef<\n        WeakMap<\n          Animated.Value,\n          {\n            interopolation: Animated.AnimatedInterpolation\n            current?: number | undefined\n          }\n        >\n      >(null as any)\n      if (!animationsState.current) {\n        animationsState.current = new WeakMap()\n      }\n\n      const runners: Function[] = []\n      const completions: Promise<void>[] = []\n\n      // const args = [JSON.stringify(mergedStyles)]\n      const args = [JSON.stringify(mergedStyles), JSON.stringify(state), isExiting, !!onDidAnimate]\n\n      const res = useMemo(() => {\n        const nonAnimatedStyle = {}\n        for (const key in mergedStyles) {\n          const val = mergedStyles[key]\n          if (!animatedStyleKey[key]) {\n            nonAnimatedStyle[key] = val\n            continue\n          }\n          if (key !== 'transform') {\n            animateStyles.current[key] = update(key, animateStyles.current[key], val)\n            continue\n          }\n          // key: 'transform'\n          // for now just support one transform key\n          if (!val) continue\n          for (const [index, transform] of val.entries()) {\n            if (!transform) continue\n            const tkey = Object.keys(transform)[0]\n            const currentTransform = animatedTranforms.current[index]?.[tkey]\n            animatedTranforms.current[index] = {\n              [tkey]: update(tkey, currentTransform, transform[tkey]),\n            }\n            animatedTranforms.current = [...animatedTranforms.current]\n          }\n        }\n\n        const animatedStyle = {\n          ...Object.fromEntries(\n            Object.entries({\n              ...animateStyles.current,\n            }).map(([k, v]) => [k, animationsState.current!.get(v)?.interopolation || v])\n          ),\n          transform: animatedTranforms.current.map((r) => {\n            const key = Object.keys(r)[0]\n            const val = animationsState.current!.get(r[key])?.interopolation || r[key]\n            return { [key]: val }\n          }),\n        }\n\n        return {\n          style: [nonAnimatedStyle, animatedStyle],\n        }\n\n        function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {\n          const [val, type] = getValue(valIn)\n          const value = animated || new Animated.Value(val)\n          let interpolateArgs: any\n          if (type) {\n            const curInterpolation = animationsState.current.get(value)\n            interpolateArgs = getInterpolated(\n              curInterpolation?.current ?? value['_value'],\n              val,\n              type\n            )\n            animationsState.current!.set(value, {\n              interopolation: value.interpolate(interpolateArgs),\n              current: val,\n            })\n          }\n          if (value) {\n            const animationConfig = getAnimationConfig(key, animations, props.animation)\n\n            let resolve\n            const promise = new Promise<void>((res) => {\n              resolve = res\n            })\n            completions.push(promise)\n\n            runners.push(() => {\n              value.stopAnimation()\n              Animated.spring(value, {\n                toValue: val,\n                useNativeDriver: !isWeb,\n                ...animationConfig,\n              }).start(({ finished }) => {\n                if (finished) {\n                  resolve()\n                }\n              })\n            })\n          }\n          if (process.env.NODE_ENV === 'development') {\n            if (props['debug']) {\n              // prettier-ignore\n              // eslint-disable-next-line no-console\n              console.log(' \uD83D\uDCA0 animate', key, `from ${value['_value']} to`, valIn, `(${val})`, 'type', type, 'interpolate', interpolateArgs)\n            }\n          }\n          return value\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, args)\n\n      useIsomorphicLayoutEffect(() => {\n        runners.forEach((r) => r())\n        let cancel = false\n        Promise.all(completions).then(() => {\n          if (cancel) return\n          onDidAnimate?.()\n          if (isExiting) {\n            sendExitComplete?.()\n          }\n        })\n        return () => {\n          cancel = true\n        }\n      }, args)\n\n      if (process.env.NODE_ENV === 'development') {\n        if (props['debug']) {\n          // eslint-disable-next-line no-console\n          console.log(`Returning animated`, res)\n        }\n      }\n\n      return res\n    },\n  }\n}\n\nfunction getInterpolated(current: number, next: number, postfix = 'deg') {\n  if (next === current) {\n    current = next - 0.000000001\n  }\n  const inputRange = [current, next]\n  const outputRange = [`${current}${postfix}`, `${next}${postfix}`]\n  if (next < current) {\n    inputRange.reverse()\n    outputRange.reverse()\n  }\n  return {\n    inputRange,\n    outputRange,\n  }\n}\n\nfunction getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {\n  if (typeof animation === 'string') {\n    return animations[animation]\n  }\n  let type = ''\n  let extraConf: any\n  if (Array.isArray(animation)) {\n    type = animation[0] as string\n    const conf = animation[1] && animation[1][key]\n    if (conf) {\n      if (typeof conf === 'string') {\n        type = conf\n      } else {\n        type = (conf as any).type || type\n        extraConf = conf\n      }\n    }\n  } else {\n    const val = animation?.[key]\n    type = val?.type\n    extraConf = val\n  }\n  const found = animations[type]\n  if (!found) {\n    throw new Error(`No animation of type \"${type}\" for key \"${key}\"`)\n  }\n  return {\n    ...found,\n    ...extraConf,\n  }\n}\n\nfunction getValue(input: number | string) {\n  if (typeof input !== 'string') {\n    return [input] as const\n  }\n  const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? []\n  return [+number, after] as const\n}\n"],
+  "mappings": "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",
+  "names": ["_a", "res"]
 }

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -14,5 +15,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
+var import_polyfill = require("./polyfill");
 __reExport(src_exports, require("./createAnimations"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from './createAnimations'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,+BAAd;",
+  "sourcesContent": ["import './polyfill'\n\nexport * from './createAnimations'\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sBAAO;AAEP,wBAAc,+BAFd;",
   "names": []
 }

package/dist/cjs/polyfill.js

@@ -0,0 +1,5 @@
+"use strict";
+if (typeof requestAnimationFrame === "undefined") {
+  globalThis["requestAnimationFrame"] = setImmediate;
+}
+//# sourceMappingURL=polyfill.js.map

package/dist/cjs/polyfill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/polyfill.ts"],
+  "sourcesContent": ["// for SSR\nif (typeof requestAnimationFrame === 'undefined') {\n  globalThis['requestAnimationFrame'] = setImmediate\n}\n"],
+  "mappings": ";AACA,IAAI,OAAO,0BAA0B,aAAa;AAChD,aAAW,2BAA2B;AACxC;",
+  "names": []
+}