@tamagui/animations-react-native 1.0.1-beta.104 → 1.0.1-beta.107

package/dist/cjs/createAnimations.js

@@ -56,14 +56,10 @@ function createAnimations(animations) {
     View: AnimatedView,
     Text: AnimatedText,
     useAnimations: (props, helpers) => {
-      var _a, _b, _c;
-      const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
+      var _a;
+      const { onDidAnimate, delay, getStyle, state } = 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({
@@ -74,30 +70,57 @@ function createAnimations(animations) {
       });
       const animateStyles = (0, import_react.useRef)({});
       const animatedTranforms = (0, import_react.useRef)([]);
-      const interpolations = /* @__PURE__ */ new WeakMap();
+      const interpolations = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
       const runners = [];
-      function update(animated, valIn) {
-        let val = valIn;
-        let postfix = "";
-        if (typeof val === "string") {
-          const [numbers, after] = val.split(/[0-9]+/);
-          postfix = after;
-          val = +numbers;
+      const completions = [];
+      function update(key, animated, valIn) {
+        const [val, type] = getValue(valIn);
+        const value = animated || new import_react_native.Animated.Value(val);
+        if (type) {
+          interpolations.current.set(value, getInterpolated(value, type, val));
         }
         if (animated) {
-          const animationConfig = typeof props.animation === "string" && animations[props.animation];
+          const animationConfig = getAnimationConfig(key, animations, props.animation);
+          let resolve;
+          const promise = new Promise((res) => {
+            resolve = res;
+          });
+          completions.push(promise);
           runners.push(() => {
             import_react_native.Animated.spring(animated, __spreadValues({
               toValue: val,
               useNativeDriver: !import_core.isWeb
-            }, animationConfig)).start();
+            }, animationConfig)).start(({ finished }) => {
+              if (finished) {
+                resolve();
+              }
+            });
           });
-          return animated;
-        } else {
-          const res = new import_react_native.Animated.Value(val);
-          interpolations.set(res, postfix);
-          return res;
         }
+        return value;
+      }
+      function getValue(input) {
+        if (typeof input !== "string") {
+          return [input];
+        }
+        const neg = input[0] === "-";
+        if (neg)
+          input = input.slice(1);
+        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
+        return [+number * (neg ? -1 : 1), after];
+      }
+      function getInterpolated(val, postfix, next) {
+        const cur = val["_value"];
+        const inputRange = [cur, next];
+        const outputRange = [`${cur}deg`, `${next}deg`];
+        if (next < cur) {
+          inputRange.reverse();
+          outputRange.reverse();
+        }
+        return val.interpolate({
+          inputRange,
+          outputRange
+        });
       }
       const nonAnimatedStyle = {};
       for (const key of Object.keys(all)) {
@@ -110,19 +133,23 @@ function createAnimations(animations) {
                   continue;
                 const tkey = Object.keys(transform)[0];
                 animatedTranforms.current[index] = {
-                  [tkey]: update((_c = animatedTranforms.current[index]) == null ? void 0 : _c[tkey], transform[tkey])
+                  [tkey]: update(tkey, (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey], transform[tkey])
                 };
               }
             }
           } else {
-            animateStyles.current[key] = update(animateStyles.current[key], val);
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
           }
         } else {
           nonAnimatedStyle[key] = val;
         }
       }
-      const animatedStyle = __spreadProps(__spreadValues({}, animateStyles.current), {
-        transform: animatedTranforms.current
+      const animatedStyle = __spreadProps(__spreadValues({}, Object.fromEntries(Object.entries(__spreadValues({}, animateStyles.current)).map(([k, v]) => [k, interpolations.current.get(v) || v]))), {
+        transform: animatedTranforms.current.map((r) => {
+          const key = Object.keys(r)[0];
+          const val = interpolations.current.get(r[key]) || r[key];
+          return { [key]: val };
+        })
       });
       const args = [
         JSON.stringify(all),
@@ -134,15 +161,19 @@ function createAnimations(animations) {
         delay,
         isPresent,
         onDidAnimate,
-        onDidAnimateCb,
         presence == null ? void 0 : presence.exitVariant,
         presence == null ? void 0 : presence.enterVariant
       ];
-      (0, import_react.useLayoutEffect)(() => {
+      (0, import_core.useIsomorphicLayoutEffect)(() => {
         for (const runner of runners) {
-          console.log("gogo");
           runner();
         }
+        Promise.all(completions).then(() => {
+          onDidAnimate == null ? void 0 : onDidAnimate();
+          if (isExiting) {
+            sendExitComplete == null ? void 0 : sendExitComplete();
+          }
+        });
       }, args);
       return (0, import_react.useMemo)(() => {
         return {
@@ -152,6 +183,34 @@ function createAnimations(animations) {
     }
   };
 }
+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 __spreadValues(__spreadValues({}, found), extraConf);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createAnimations

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, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, 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 = 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// | ({ 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\nconst animatedStyleKey = {\n  transform: true,\n  opacity: true,\n}\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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = new WeakMap<Animated.Value, string>()\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n\n      function update(animated: Animated.Value | undefined, valIn: any) {\n        let val = valIn\n        let postfix = ''\n        if (typeof val === 'string') {\n          const [numbers, after] = val.split(/[0-9]+/)\n          postfix = after\n          val = +numbers\n        }\n        if (animated) {\n          const animationConfig = typeof props.animation === 'string' && animations[props.animation]\n          runners.push(() => {\n            // console.log('animate to', val, animationConfig)\n            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start()\n          })\n          return animated\n        } else {\n          const res = new Animated.Value(val)\n          // console.log('set up', res, (val) =>\n          //   Animated.spring(res, { toValue: val, useNativeDriver: false }).start()\n          // )\n          interpolations.set(res, postfix)\n          return res\n        }\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                // console.log('tkey', tkey)\n                animatedTranforms.current[index] = {\n                  [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...animateStyles.current,\n        transform: animatedTranforms.current,\n      }\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      useLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          console.log('gogo')\n          runner()\n        }\n      }, args)\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;AAC7C,kBAAsD;AACtD,mBAAoF;AACpF,0BAAyB;AAyBzB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,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;AA7CvC;AA8CM,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,gBAAgB,yBAAuC,CAAC,CAAC;AAC/D,YAAM,oBAAoB,yBAA4C,CAAC,CAAC;AACxE,YAAM,iBAAiB,oBAAI,QAAgC;AAI3D,YAAM,UAAsB,CAAC;AAE7B,sBAAgB,UAAsC,OAAY;AAChE,YAAI,MAAM;AACV,YAAI,UAAU;AACd,YAAI,OAAO,QAAQ,UAAU;AAC3B,gBAAM,CAAC,SAAS,SAAS,IAAI,MAAM,QAAQ;AAC3C,oBAAU;AACV,gBAAM,CAAC;AAAA,QACT;AACA,YAAI,UAAU;AACZ,gBAAM,kBAAkB,OAAO,MAAM,cAAc,YAAY,WAAW,MAAM;AAChF,kBAAQ,KAAK,MAAM;AAEjB,yCAAS,OAAO,UAAU;AAAA,cACxB,SAAS;AAAA,cACT,iBAAiB,CAAC;AAAA,eACf,gBACJ,EAAE,MAAM;AAAA,UACX,CAAC;AACD,iBAAO;AAAA,QACT,OAAO;AACL,gBAAM,MAAM,IAAI,6BAAS,MAAM,GAAG;AAIlC,yBAAe,IAAI,KAAK,OAAO;AAC/B,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,YAAM,mBAAmB,CAAC;AAC1B,iBAAW,OAAO,OAAO,KAAK,GAAG,GAAG;AAClC,cAAM,MAAM,IAAI;AAChB,YAAI,iBAAiB,MAAM;AACzB,cAAI,QAAQ,aAAa;AAEvB,gBAAI,KAAK;AACP,yBAAW,CAAC,OAAO,cAAc,IAAI,QAAQ,GAAG;AAC9C,oBAAI,CAAC;AAAW;AAChB,sBAAM,OAAO,OAAO,KAAK,SAAS,EAAE;AAEpC,kCAAkB,QAAQ,SAAS;AAAA,kBACjC,CAAC,OAAO,OAAO,wBAAkB,QAAQ,WAA1B,mBAAmC,OAAO,UAAU,KAAK;AAAA,gBAC1E;AAAA,cACF;AAAA,YACF;AAAA,UACF,OAAO;AACL,0BAAc,QAAQ,OAAO,OAAO,cAAc,QAAQ,MAAM,GAAG;AAAA,UACrE;AAAA,QACF,OAAO;AACL,2BAAiB,OAAO;AAAA,QAC1B;AAAA,MACF;AAEA,YAAM,gBAAgB,iCACjB,cAAc,UADG;AAAA,QAEpB,WAAW,kBAAkB;AAAA,MAC/B;AAEA,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;AAEA,wCAAgB,MAAM;AAEpB,mBAAW,UAAU,SAAS;AAC5B,kBAAQ,IAAI,MAAM;AAClB,iBAAO;AAAA,QACT;AAAA,MACF,GAAG,IAAI;AAuBP,aAAO,0BAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MACF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useContext, useMemo, useRef } 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 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 { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n      const completions: Promise<void>[] = []\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        if (type) {\n          interpolations.current.set(value, getInterpolated(value, type, val))\n        }\n        if (animated) {\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            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start(({ finished }) => {\n              if (finished) {\n                resolve()\n              }\n            })\n          })\n        }\n        return value\n      }\n\n      function getValue(input: number | string) {\n        if (typeof input !== 'string') {\n          return [input] as const\n        }\n        const neg = input[0] === '-'\n        if (neg) input = input.slice(1)\n        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n        return [+number * (neg ? -1 : 1), after] as const\n      }\n\n      function getInterpolated(val: Animated.Value, postfix: string, next: number) {\n        const cur = val['_value'] as number\n        const inputRange = [cur, next]\n        const outputRange = [`${cur}deg`, `${next}deg`]\n        if (next < cur) {\n          inputRange.reverse()\n          outputRange.reverse()\n        }\n        return val.interpolate({\n          inputRange,\n          outputRange,\n        })\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                animatedTranforms.current[index] = {\n                  [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(key, animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...Object.fromEntries(\n          Object.entries({\n            ...animateStyles.current,\n          }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n        ),\n        transform: animatedTranforms.current.map((r) => {\n          const key = Object.keys(r)[0]\n          const val = interpolations.current.get(r[key]) || r[key]\n          return { [key]: val }\n        }),\n      }\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        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      useIsomorphicLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          runner()\n        }\n        Promise.all(completions).then(() => {\n          onDidAnimate?.()\n          if (isExiting) {\n            sendExitComplete?.()\n          }\n        })\n      }, args)\n\n      return useMemo(() => {\n        return {\n          style: [nonAnimatedStyle, animatedStyle],\n        }\n      }, args)\n    },\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/index.js

@@ -14,5 +14,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,4 @@
+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": []
+}

package/dist/esm/createAnimations.js

@@ -18,8 +18,8 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { PresenceContext, usePresence } from "@tamagui/animate-presence";
-import { isWeb } from "@tamagui/core";
-import { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
+import { useContext, useMemo, useRef } from "react";
 import { Animated } from "react-native";
 const animatedStyleKey = {
   transform: true,
@@ -36,14 +36,10 @@ function createAnimations(animations) {
     View: AnimatedView,
     Text: AnimatedText,
     useAnimations: (props, helpers) => {
-      var _a, _b, _c;
-      const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
+      var _a;
+      const { onDidAnimate, delay, getStyle, state } = helpers;
       const [isPresent, sendExitComplete] = usePresence();
       const presence = useContext(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 = useCallback((...args2) => {
-        onDidAnimate == null ? void 0 : onDidAnimate(...args2);
-      }, [onDidAnimate]);
       const isExiting = isPresent === false;
       const isEntering = !state.mounted;
       const all = getStyle({
@@ -54,30 +50,57 @@ function createAnimations(animations) {
       });
       const animateStyles = useRef({});
       const animatedTranforms = useRef([]);
-      const interpolations = /* @__PURE__ */ new WeakMap();
+      const interpolations = useRef(/* @__PURE__ */ new WeakMap());
       const runners = [];
-      function update(animated, valIn) {
-        let val = valIn;
-        let postfix = "";
-        if (typeof val === "string") {
-          const [numbers, after] = val.split(/[0-9]+/);
-          postfix = after;
-          val = +numbers;
+      const completions = [];
+      function update(key, animated, valIn) {
+        const [val, type] = getValue(valIn);
+        const value = animated || new Animated.Value(val);
+        if (type) {
+          interpolations.current.set(value, getInterpolated(value, type, val));
         }
         if (animated) {
-          const animationConfig = typeof props.animation === "string" && animations[props.animation];
+          const animationConfig = getAnimationConfig(key, animations, props.animation);
+          let resolve;
+          const promise = new Promise((res) => {
+            resolve = res;
+          });
+          completions.push(promise);
           runners.push(() => {
             Animated.spring(animated, __spreadValues({
               toValue: val,
               useNativeDriver: !isWeb
-            }, animationConfig)).start();
+            }, animationConfig)).start(({ finished }) => {
+              if (finished) {
+                resolve();
+              }
+            });
           });
-          return animated;
-        } else {
-          const res = new Animated.Value(val);
-          interpolations.set(res, postfix);
-          return res;
         }
+        return value;
+      }
+      function getValue(input) {
+        if (typeof input !== "string") {
+          return [input];
+        }
+        const neg = input[0] === "-";
+        if (neg)
+          input = input.slice(1);
+        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? [];
+        return [+number * (neg ? -1 : 1), after];
+      }
+      function getInterpolated(val, postfix, next) {
+        const cur = val["_value"];
+        const inputRange = [cur, next];
+        const outputRange = [`${cur}deg`, `${next}deg`];
+        if (next < cur) {
+          inputRange.reverse();
+          outputRange.reverse();
+        }
+        return val.interpolate({
+          inputRange,
+          outputRange
+        });
       }
       const nonAnimatedStyle = {};
       for (const key of Object.keys(all)) {
@@ -90,19 +113,23 @@ function createAnimations(animations) {
                   continue;
                 const tkey = Object.keys(transform)[0];
                 animatedTranforms.current[index] = {
-                  [tkey]: update((_c = animatedTranforms.current[index]) == null ? void 0 : _c[tkey], transform[tkey])
+                  [tkey]: update(tkey, (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey], transform[tkey])
                 };
               }
             }
           } else {
-            animateStyles.current[key] = update(animateStyles.current[key], val);
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
           }
         } else {
           nonAnimatedStyle[key] = val;
         }
       }
-      const animatedStyle = __spreadProps(__spreadValues({}, animateStyles.current), {
-        transform: animatedTranforms.current
+      const animatedStyle = __spreadProps(__spreadValues({}, Object.fromEntries(Object.entries(__spreadValues({}, animateStyles.current)).map(([k, v]) => [k, interpolations.current.get(v) || v]))), {
+        transform: animatedTranforms.current.map((r) => {
+          const key = Object.keys(r)[0];
+          const val = interpolations.current.get(r[key]) || r[key];
+          return { [key]: val };
+        })
       });
       const args = [
         JSON.stringify(all),
@@ -114,15 +141,19 @@ function createAnimations(animations) {
         delay,
         isPresent,
         onDidAnimate,
-        onDidAnimateCb,
         presence == null ? void 0 : presence.exitVariant,
         presence == null ? void 0 : presence.enterVariant
       ];
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         for (const runner of runners) {
-          console.log("gogo");
           runner();
         }
+        Promise.all(completions).then(() => {
+          onDidAnimate == null ? void 0 : onDidAnimate();
+          if (isExiting) {
+            sendExitComplete == null ? void 0 : sendExitComplete();
+          }
+        });
       }, args);
       return useMemo(() => {
         return {
@@ -132,6 +163,34 @@ function createAnimations(animations) {
     }
   };
 }
+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 __spreadValues(__spreadValues({}, found), extraConf);
+}
 export {
   createAnimations
 };

package/dist/esm/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, 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 = 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// | ({ 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\nconst animatedStyleKey = {\n  transform: true,\n  opacity: true,\n}\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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = new WeakMap<Animated.Value, string>()\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n\n      function update(animated: Animated.Value | undefined, valIn: any) {\n        let val = valIn\n        let postfix = ''\n        if (typeof val === 'string') {\n          const [numbers, after] = val.split(/[0-9]+/)\n          postfix = after\n          val = +numbers\n        }\n        if (animated) {\n          const animationConfig = typeof props.animation === 'string' && animations[props.animation]\n          runners.push(() => {\n            // console.log('animate to', val, animationConfig)\n            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start()\n          })\n          return animated\n        } else {\n          const res = new Animated.Value(val)\n          // console.log('set up', res, (val) =>\n          //   Animated.spring(res, { toValue: val, useNativeDriver: false }).start()\n          // )\n          interpolations.set(res, postfix)\n          return res\n        }\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                // console.log('tkey', tkey)\n                animatedTranforms.current[index] = {\n                  [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...animateStyles.current,\n        transform: animatedTranforms.current,\n      }\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      useLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          console.log('gogo')\n          runner()\n        }\n      }, args)\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;AACA;AACA;AACA;AAyBA,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,EACX,SAAS;AACX;AAEO,0BAAsD,YAAmC;AAC9F,QAAM,eAAe,SAAS;AAC9B,QAAM,eAAe,SAAS;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;AA7CvC;AA8CM,YAAM,EAAE,SAAS,cAAc,OAAO,UAAU,OAAO,iBAAiB;AACxE,YAAM,CAAC,WAAW,oBAAoB,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAE3C,YAAM,YAAY,sCAAU,eACxB,0BAAa,mBAAb,mBAA8B,SAAS,iBAAvC,mBAAqD,SAAQ,QAAQ,YACrE,QAAQ;AAEZ,YAAM,iBAAiB,YACrB,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,gBAAgB,OAAuC,CAAC,CAAC;AAC/D,YAAM,oBAAoB,OAA4C,CAAC,CAAC;AACxE,YAAM,iBAAiB,oBAAI,QAAgC;AAI3D,YAAM,UAAsB,CAAC;AAE7B,sBAAgB,UAAsC,OAAY;AAChE,YAAI,MAAM;AACV,YAAI,UAAU;AACd,YAAI,OAAO,QAAQ,UAAU;AAC3B,gBAAM,CAAC,SAAS,SAAS,IAAI,MAAM,QAAQ;AAC3C,oBAAU;AACV,gBAAM,CAAC;AAAA,QACT;AACA,YAAI,UAAU;AACZ,gBAAM,kBAAkB,OAAO,MAAM,cAAc,YAAY,WAAW,MAAM;AAChF,kBAAQ,KAAK,MAAM;AAEjB,qBAAS,OAAO,UAAU;AAAA,cACxB,SAAS;AAAA,cACT,iBAAiB,CAAC;AAAA,eACf,gBACJ,EAAE,MAAM;AAAA,UACX,CAAC;AACD,iBAAO;AAAA,QACT,OAAO;AACL,gBAAM,MAAM,IAAI,SAAS,MAAM,GAAG;AAIlC,yBAAe,IAAI,KAAK,OAAO;AAC/B,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,YAAM,mBAAmB,CAAC;AAC1B,iBAAW,OAAO,OAAO,KAAK,GAAG,GAAG;AAClC,cAAM,MAAM,IAAI;AAChB,YAAI,iBAAiB,MAAM;AACzB,cAAI,QAAQ,aAAa;AAEvB,gBAAI,KAAK;AACP,yBAAW,CAAC,OAAO,cAAc,IAAI,QAAQ,GAAG;AAC9C,oBAAI,CAAC;AAAW;AAChB,sBAAM,OAAO,OAAO,KAAK,SAAS,EAAE;AAEpC,kCAAkB,QAAQ,SAAS;AAAA,kBACjC,CAAC,OAAO,OAAO,wBAAkB,QAAQ,WAA1B,mBAAmC,OAAO,UAAU,KAAK;AAAA,gBAC1E;AAAA,cACF;AAAA,YACF;AAAA,UACF,OAAO;AACL,0BAAc,QAAQ,OAAO,OAAO,cAAc,QAAQ,MAAM,GAAG;AAAA,UACrE;AAAA,QACF,OAAO;AACL,2BAAiB,OAAO;AAAA,QAC1B;AAAA,MACF;AAEA,YAAM,gBAAgB,iCACjB,cAAc,UADG;AAAA,QAEpB,WAAW,kBAAkB;AAAA,MAC/B;AAEA,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;AAEA,sBAAgB,MAAM;AAEpB,mBAAW,UAAU,SAAS;AAC5B,kBAAQ,IAAI,MAAM;AAClB,iBAAO;AAAA,QACT;AAAA,MACF,GAAG,IAAI;AAuBP,aAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,OAAO,CAAC,kBAAkB,aAAa;AAAA,QACzC;AAAA,MACF,GAAG,IAAI;AAAA,IACT;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useContext, useMemo, useRef } 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 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 { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n      const completions: Promise<void>[] = []\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        if (type) {\n          interpolations.current.set(value, getInterpolated(value, type, val))\n        }\n        if (animated) {\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            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start(({ finished }) => {\n              if (finished) {\n                resolve()\n              }\n            })\n          })\n        }\n        return value\n      }\n\n      function getValue(input: number | string) {\n        if (typeof input !== 'string') {\n          return [input] as const\n        }\n        const neg = input[0] === '-'\n        if (neg) input = input.slice(1)\n        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n        return [+number * (neg ? -1 : 1), after] as const\n      }\n\n      function getInterpolated(val: Animated.Value, postfix: string, next: number) {\n        const cur = val['_value'] as number\n        const inputRange = [cur, next]\n        const outputRange = [`${cur}deg`, `${next}deg`]\n        if (next < cur) {\n          inputRange.reverse()\n          outputRange.reverse()\n        }\n        return val.interpolate({\n          inputRange,\n          outputRange,\n        })\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                animatedTranforms.current[index] = {\n                  [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(key, animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...Object.fromEntries(\n          Object.entries({\n            ...animateStyles.current,\n          }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n        ),\n        transform: animatedTranforms.current.map((r) => {\n          const key = Object.keys(r)[0]\n          const val = interpolations.current.get(r[key]) || r[key]\n          return { [key]: val }\n        }),\n      }\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        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      useIsomorphicLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          runner()\n        }\n        Promise.all(completions).then(() => {\n          onDidAnimate?.()\n          if (isExiting) {\n            sendExitComplete?.()\n          }\n        })\n      }, args)\n\n      return useMemo(() => {\n        return {\n          style: [nonAnimatedStyle, animatedStyle],\n        }\n      }, args)\n    },\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -1,2 +1,3 @@
+import "./polyfill";
 export * from "./createAnimations";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/polyfill.js

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

package/dist/esm/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": []
+}

package/dist/jsx/createAnimations.js

@@ -1,6 +1,6 @@
 import { PresenceContext, usePresence } from "@tamagui/animate-presence";
-import { isWeb } from "@tamagui/core";
-import { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
+import { useContext, useMemo, useRef } from "react";
 import { Animated } from "react-native";
 const animatedStyleKey = {
   transform: true,
@@ -17,14 +17,10 @@ function createAnimations(animations) {
     View: AnimatedView,
     Text: AnimatedText,
     useAnimations: (props, helpers) => {
-      var _a, _b, _c;
-      const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
+      var _a;
+      const { onDidAnimate, delay, getStyle, state } = helpers;
       const [isPresent, sendExitComplete] = usePresence();
       const presence = useContext(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 = useCallback((...args2) => {
-        onDidAnimate == null ? void 0 : onDidAnimate(...args2);
-      }, [onDidAnimate]);
       const isExiting = isPresent === false;
       const isEntering = !state.mounted;
       const all = getStyle({
@@ -35,31 +31,59 @@ function createAnimations(animations) {
       });
       const animateStyles = useRef({});
       const animatedTranforms = useRef([]);
-      const interpolations = /* @__PURE__ */ new WeakMap();
+      const interpolations = useRef(/* @__PURE__ */ new WeakMap());
       const runners = [];
-      function update(animated, valIn) {
-        let val = valIn;
-        let postfix = "";
-        if (typeof val === "string") {
-          const [numbers, after] = val.split(/[0-9]+/);
-          postfix = after;
-          val = +numbers;
+      const completions = [];
+      function update(key, animated, valIn) {
+        const [val, type] = getValue(valIn);
+        const value = animated || new Animated.Value(val);
+        if (type) {
+          interpolations.current.set(value, getInterpolated(value, type, val));
         }
         if (animated) {
-          const animationConfig = typeof props.animation === "string" && animations[props.animation];
+          const animationConfig = getAnimationConfig(key, animations, props.animation);
+          let resolve;
+          const promise = new Promise((res) => {
+            resolve = res;
+          });
+          completions.push(promise);
           runners.push(() => {
             Animated.spring(animated, {
               toValue: val,
               useNativeDriver: !isWeb,
               ...animationConfig
-            }).start();
+            }).start(({ finished }) => {
+              if (finished) {
+                resolve();
+              }
+            });
           });
-          return animated;
-        } else {
-          const res = new Animated.Value(val);
-          interpolations.set(res, postfix);
-          return res;
         }
+        return value;
+      }
+      function getValue(input) {
+        var _a2;
+        if (typeof input !== "string") {
+          return [input];
+        }
+        const neg = input[0] === "-";
+        if (neg)
+          input = input.slice(1);
+        const [_, number, after] = (_a2 = input.match(/([-0-9]+)(deg|%)/)) != null ? _a2 : [];
+        return [+number * (neg ? -1 : 1), after];
+      }
+      function getInterpolated(val, postfix, next) {
+        const cur = val["_value"];
+        const inputRange = [cur, next];
+        const outputRange = [`${cur}deg`, `${next}deg`];
+        if (next < cur) {
+          inputRange.reverse();
+          outputRange.reverse();
+        }
+        return val.interpolate({
+          inputRange,
+          outputRange
+        });
       }
       const nonAnimatedStyle = {};
       for (const key of Object.keys(all)) {
@@ -72,20 +96,26 @@ function createAnimations(animations) {
                   continue;
                 const tkey = Object.keys(transform)[0];
                 animatedTranforms.current[index] = {
-                  [tkey]: update((_c = animatedTranforms.current[index]) == null ? void 0 : _c[tkey], transform[tkey])
+                  [tkey]: update(tkey, (_a = animatedTranforms.current[index]) == null ? void 0 : _a[tkey], transform[tkey])
                 };
               }
             }
           } else {
-            animateStyles.current[key] = update(animateStyles.current[key], val);
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
           }
         } else {
           nonAnimatedStyle[key] = val;
         }
       }
       const animatedStyle = {
-        ...animateStyles.current,
-        transform: animatedTranforms.current
+        ...Object.fromEntries(Object.entries({
+          ...animateStyles.current
+        }).map(([k, v]) => [k, interpolations.current.get(v) || v])),
+        transform: animatedTranforms.current.map((r) => {
+          const key = Object.keys(r)[0];
+          const val = interpolations.current.get(r[key]) || r[key];
+          return { [key]: val };
+        })
       };
       const args = [
         JSON.stringify(all),
@@ -97,15 +127,19 @@ function createAnimations(animations) {
         delay,
         isPresent,
         onDidAnimate,
-        onDidAnimateCb,
         presence == null ? void 0 : presence.exitVariant,
         presence == null ? void 0 : presence.enterVariant
       ];
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         for (const runner of runners) {
-          console.log("gogo");
           runner();
         }
+        Promise.all(completions).then(() => {
+          onDidAnimate == null ? void 0 : onDidAnimate();
+          if (isExiting) {
+            sendExitComplete == null ? void 0 : sendExitComplete();
+          }
+        });
       }, args);
       return useMemo(() => {
         return {
@@ -115,6 +149,37 @@ function createAnimations(animations) {
     }
   };
 }
+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
+  };
+}
 export {
   createAnimations
 };

package/dist/jsx/createAnimations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, 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 = 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// | ({ 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\nconst animatedStyleKey = {\n  transform: true,\n  opacity: true,\n}\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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = new WeakMap<Animated.Value, string>()\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n\n      function update(animated: Animated.Value | undefined, valIn: any) {\n        let val = valIn\n        let postfix = ''\n        if (typeof val === 'string') {\n          const [numbers, after] = val.split(/[0-9]+/)\n          postfix = after\n          val = +numbers\n        }\n        if (animated) {\n          const animationConfig = typeof props.animation === 'string' && animations[props.animation]\n          runners.push(() => {\n            // console.log('animate to', val, animationConfig)\n            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start()\n          })\n          return animated\n        } else {\n          const res = new Animated.Value(val)\n          // console.log('set up', res, (val) =>\n          //   Animated.spring(res, { toValue: val, useNativeDriver: false }).start()\n          // )\n          interpolations.set(res, postfix)\n          return res\n        }\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                // console.log('tkey', tkey)\n                animatedTranforms.current[index] = {\n                  [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...animateStyles.current,\n        transform: animatedTranforms.current,\n      }\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      useLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          console.log('gogo')\n          runner()\n        }\n      }, args)\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": "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",
+  "sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useContext, useMemo, useRef } 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 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 { onDidAnimate, delay, getStyle, state } = 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 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 animateStyles = useRef<Record<string, Animated.Value>>({})\n      const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n      const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())\n\n      // TODO loop and create values, run them if they change\n\n      const runners: Function[] = []\n      const completions: Promise<void>[] = []\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        if (type) {\n          interpolations.current.set(value, getInterpolated(value, type, val))\n        }\n        if (animated) {\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            Animated.spring(animated, {\n              toValue: val,\n              useNativeDriver: !isWeb,\n              ...animationConfig,\n            }).start(({ finished }) => {\n              if (finished) {\n                resolve()\n              }\n            })\n          })\n        }\n        return value\n      }\n\n      function getValue(input: number | string) {\n        if (typeof input !== 'string') {\n          return [input] as const\n        }\n        const neg = input[0] === '-'\n        if (neg) input = input.slice(1)\n        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []\n        return [+number * (neg ? -1 : 1), after] as const\n      }\n\n      function getInterpolated(val: Animated.Value, postfix: string, next: number) {\n        const cur = val['_value'] as number\n        const inputRange = [cur, next]\n        const outputRange = [`${cur}deg`, `${next}deg`]\n        if (next < cur) {\n          inputRange.reverse()\n          outputRange.reverse()\n        }\n        return val.interpolate({\n          inputRange,\n          outputRange,\n        })\n      }\n\n      const nonAnimatedStyle = {}\n      for (const key of Object.keys(all)) {\n        const val = all[key]\n        if (animatedStyleKey[key]) {\n          if (key === 'transform') {\n            // for now just support one transform key\n            if (val) {\n              for (const [index, transform] of val.entries()) {\n                if (!transform) continue\n                const tkey = Object.keys(transform)[0]\n                animatedTranforms.current[index] = {\n                  [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),\n                }\n              }\n            }\n          } else {\n            animateStyles.current[key] = update(key, animateStyles.current[key], val)\n          }\n        } else {\n          nonAnimatedStyle[key] = val\n        }\n      }\n\n      const animatedStyle = {\n        ...Object.fromEntries(\n          Object.entries({\n            ...animateStyles.current,\n          }).map(([k, v]) => [k, interpolations.current.get(v) || v])\n        ),\n        transform: animatedTranforms.current.map((r) => {\n          const key = Object.keys(r)[0]\n          const val = interpolations.current.get(r[key]) || r[key]\n          return { [key]: val }\n        }),\n      }\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        presence?.exitVariant,\n        presence?.enterVariant,\n      ]\n\n      useIsomorphicLayoutEffect(() => {\n        //\n        for (const runner of runners) {\n          runner()\n        }\n        Promise.all(completions).then(() => {\n          onDidAnimate?.()\n          if (isExiting) {\n            sendExitComplete?.()\n          }\n        })\n      }, args)\n\n      return useMemo(() => {\n        return {\n          style: [nonAnimatedStyle, animatedStyle],\n        }\n      }, args)\n    },\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/index.js

@@ -1,2 +1,3 @@
+import "./polyfill";
 export * from "./createAnimations";
 //# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

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

package/dist/jsx/polyfill.js

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

package/dist/jsx/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": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-react-native",
-  "version": "1.0.1-beta.104",
+  "version": "1.0.1-beta.107",
   "source": "src/index.ts",
   "sideEffects": true,
   "license": "MIT",
@@ -14,11 +14,11 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/animate-presence": "^1.0.1-beta.104",
-    "@tamagui/core": "^1.0.1-beta.104"
+    "@tamagui/animate-presence": "^1.0.1-beta.107",
+    "@tamagui/core": "^1.0.1-beta.107"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.104",
+    "@tamagui/build": "^1.0.1-beta.107",
     "react": "*",
     "react-dom": "*",
     "react-native": "*"

package/src/createAnimations.tsx

@@ -1,6 +1,6 @@
 import { PresenceContext, usePresence } from '@tamagui/animate-presence'
-import { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'
-import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { AnimationDriver, AnimationProp, isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'
+import { useContext, useMemo, useRef } from 'react'
 import { Animated } from 'react-native'
 
 type AnimationsConfig<A extends Object = any> = {
@@ -22,9 +22,6 @@ type AnimationConfig = Partial<
     | 'velocity'
   >
 >
-// | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)
-// | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)
-// | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)
 
 const animatedStyleKey = {
   transform: true,
@@ -44,20 +41,13 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
     View: AnimatedView,
     Text: AnimatedText,
     useAnimations: (props, helpers) => {
-      const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers
+      const { onDidAnimate, delay, getStyle, state } = helpers
       const [isPresent, sendExitComplete] = usePresence()
       const presence = useContext(PresenceContext)
 
-      const exitStyle = presence?.exitVariant
-        ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle
-        : pseudos.exitStyle
-
-      const onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(
-        (...args) => {
-          onDidAnimate?.(...args)
-        },
-        [onDidAnimate]
-      )
+      // const exitStyle = presence?.exitVariant
+      //   ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle
+      //   : pseudos.exitStyle
 
       const isExiting = isPresent === false
       const isEntering = !state.mounted
@@ -71,39 +61,65 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
 
       const animateStyles = useRef<Record<string, Animated.Value>>({})
       const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])
-      const interpolations = new WeakMap<Animated.Value, string>()
+      const interpolations = useRef(new WeakMap<Animated.Value, Animated.AnimatedInterpolation>())
 
       // TODO loop and create values, run them if they change
 
       const runners: Function[] = []
+      const completions: Promise<void>[] = []
 
-      function update(animated: Animated.Value | undefined, valIn: any) {
-        let val = valIn
-        let postfix = ''
-        if (typeof val === 'string') {
-          const [numbers, after] = val.split(/[0-9]+/)
-          postfix = after
-          val = +numbers
+      function update(key: string, animated: Animated.Value | undefined, valIn: string | number) {
+        const [val, type] = getValue(valIn)
+        const value = animated || new Animated.Value(val)
+        if (type) {
+          interpolations.current.set(value, getInterpolated(value, type, val))
         }
         if (animated) {
-          const animationConfig = typeof props.animation === 'string' && animations[props.animation]
+          const animationConfig = getAnimationConfig(key, animations, props.animation)
+
+          let resolve
+          const promise = new Promise<void>((res) => {
+            resolve = res
+          })
+          completions.push(promise)
+
           runners.push(() => {
-            // console.log('animate to', val, animationConfig)
             Animated.spring(animated, {
               toValue: val,
               useNativeDriver: !isWeb,
               ...animationConfig,
-            }).start()
+            }).start(({ finished }) => {
+              if (finished) {
+                resolve()
+              }
+            })
           })
-          return animated
-        } else {
-          const res = new Animated.Value(val)
-          // console.log('set up', res, (val) =>
-          //   Animated.spring(res, { toValue: val, useNativeDriver: false }).start()
-          // )
-          interpolations.set(res, postfix)
-          return res
         }
+        return value
+      }
+
+      function getValue(input: number | string) {
+        if (typeof input !== 'string') {
+          return [input] as const
+        }
+        const neg = input[0] === '-'
+        if (neg) input = input.slice(1)
+        const [_, number, after] = input.match(/([-0-9]+)(deg|%)/) ?? []
+        return [+number * (neg ? -1 : 1), after] as const
+      }
+
+      function getInterpolated(val: Animated.Value, postfix: string, next: number) {
+        const cur = val['_value'] as number
+        const inputRange = [cur, next]
+        const outputRange = [`${cur}deg`, `${next}deg`]
+        if (next < cur) {
+          inputRange.reverse()
+          outputRange.reverse()
+        }
+        return val.interpolate({
+          inputRange,
+          outputRange,
+        })
       }
 
       const nonAnimatedStyle = {}
@@ -116,14 +132,13 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
               for (const [index, transform] of val.entries()) {
                 if (!transform) continue
                 const tkey = Object.keys(transform)[0]
-                // console.log('tkey', tkey)
                 animatedTranforms.current[index] = {
-                  [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),
+                  [tkey]: update(tkey, animatedTranforms.current[index]?.[tkey], transform[tkey]),
                 }
               }
             }
           } else {
-            animateStyles.current[key] = update(animateStyles.current[key], val)
+            animateStyles.current[key] = update(key, animateStyles.current[key], val)
           }
         } else {
           nonAnimatedStyle[key] = val
@@ -131,8 +146,16 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
       }
 
       const animatedStyle = {
-        ...animateStyles.current,
-        transform: animatedTranforms.current,
+        ...Object.fromEntries(
+          Object.entries({
+            ...animateStyles.current,
+          }).map(([k, v]) => [k, interpolations.current.get(v) || v])
+        ),
+        transform: animatedTranforms.current.map((r) => {
+          const key = Object.keys(r)[0]
+          const val = interpolations.current.get(r[key]) || r[key]
+          return { [key]: val }
+        }),
       }
 
       const args = [
@@ -145,40 +168,23 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
         delay,
         isPresent,
         onDidAnimate,
-        onDidAnimateCb,
         presence?.exitVariant,
         presence?.enterVariant,
       ]
 
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         //
         for (const runner of runners) {
-          console.log('gogo')
           runner()
         }
+        Promise.all(completions).then(() => {
+          onDidAnimate?.()
+          if (isExiting) {
+            sendExitComplete?.()
+          }
+        })
       }, args)
 
-      // const callback = (
-      //   isExiting: boolean,
-      //   exitingStyleProps: Record<string, boolean>,
-      //   key: string,
-      //   value: any
-      // ) => {
-      //   return (completed, current) => {
-      //     onDidAnimateCb(key, completed, current, {
-      //       attemptedValue: value,
-      //     })
-      //     if (isExiting) {
-      //       exitingStyleProps[key] = false
-      //       const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)
-      //       // if this is true, then we've finished our exit animations
-      //       if (!areStylesExiting) {
-      //         sendExitComplete?.()
-      //       }
-      //     }
-      //   }
-      // }
-
       return useMemo(() => {
         return {
           style: [nonAnimatedStyle, animatedStyle],
@@ -187,3 +193,35 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
     },
   }
 }
+
+function getAnimationConfig(key: string, animations: AnimationsConfig, animation?: AnimationProp) {
+  if (typeof animation === 'string') {
+    return animations[animation]
+  }
+  let type = ''
+  let extraConf: any
+  if (Array.isArray(animation)) {
+    type = animation[0] as string
+    const conf = animation[1] && animation[1][key]
+    if (conf) {
+      if (typeof conf === 'string') {
+        type = conf
+      } else {
+        type = (conf as any).type || type
+        extraConf = conf
+      }
+    }
+  } else {
+    const val = animation?.[key]
+    type = val?.type
+    extraConf = val
+  }
+  const found = animations[type]
+  if (!found) {
+    throw new Error(`No animation of type "${type}" for key "${key}"`)
+  }
+  return {
+    ...found,
+    ...extraConf,
+  }
+}

package/src/index.tsx

@@ -1 +1,3 @@
+import './polyfill'
+
 export * from './createAnimations'

package/src/polyfill.ts

@@ -0,0 +1,4 @@
+// for SSR
+if (typeof requestAnimationFrame === 'undefined') {
+  globalThis['requestAnimationFrame'] = setImmediate
+}

package/types/createAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAAG,OAAO,CAC5B,IAAI,CACF,QAAQ,CAAC,qBAAqB,EAC5B,OAAO,GACP,YAAY,GACZ,SAAS,GACT,UAAU,GACV,MAAM,GACN,mBAAmB,GACnB,OAAO,GACP,WAAW,GACX,SAAS,GACT,UAAU,CACb,CACF,CAAA;AAUD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA2J9F"}
+{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAmD,MAAM,eAAe,CAAA;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAAG,OAAO,CAC5B,IAAI,CACF,QAAQ,CAAC,qBAAqB,EAC5B,OAAO,GACP,YAAY,GACZ,SAAS,GACT,UAAU,GACV,MAAM,GACN,mBAAmB,GACnB,OAAO,GACP,WAAW,GACX,SAAS,GACT,UAAU,CACb,CACF,CAAA;AAOD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAoK9F"}

package/types/index.d.ts

@@ -1,2 +1,3 @@
+import './polyfill';
 export * from './createAnimations';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAEnB,cAAc,oBAAoB,CAAA"}

package/types/polyfill.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=polyfill.d.ts.map

package/types/polyfill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polyfill.d.ts","sourceRoot":"","sources":["../src/polyfill.ts"],"names":[],"mappings":""}