@tamagui/animations-css 1.75.6 → 1.75.8

package/dist/cjs/createAnimations.js

@@ -19,6 +19,7 @@ __export(createAnimations_exports, {
 module.exports = __toCommonJS(createAnimations_exports);
 var import_core = require("@tamagui/core"), import_use_presence = require("@tamagui/use-presence"), import_react = require("react");
 function createAnimations(animations) {
+  const reactionListeners = /* @__PURE__ */ new WeakMap();
   return {
     View: import_core.Stack,
     Text: import_core.Text,
@@ -29,29 +30,32 @@ function createAnimations(animations) {
       const [val, setVal] = (0, import_react.useState)(initial);
       return {
         getInstance() {
-          return val;
+          return setVal;
         },
         getValue() {
           return val;
         },
         setValue(next) {
           setVal(next);
+          const listeners = reactionListeners.get(setVal);
+          listeners && listeners.forEach((cb) => cb(next));
         },
         stop() {
         }
       };
     },
     useAnimatedNumberReaction({ hostRef, value }, onValue) {
-      (0, import_core.useIsomorphicLayoutEffect)(() => {
-        if (!hostRef.current)
-          return;
-        const onTransitionEvent = (e) => {
-          onValue(value.getValue());
-        }, node = hostRef.current;
-        return node.addEventListener("transitionstart", onTransitionEvent), node.addEventListener("transitioncancel", onTransitionEvent), node.addEventListener("transitionend", onTransitionEvent), () => {
-          node.removeEventListener("transitionstart", onTransitionEvent), node.removeEventListener("transitioncancel", onTransitionEvent), node.removeEventListener("transitionend", onTransitionEvent);
+      (0, import_react.useEffect)(() => {
+        const instance = value.getInstance();
+        let queue = reactionListeners.get(instance);
+        if (!queue) {
+          const next = /* @__PURE__ */ new Set();
+          reactionListeners.set(instance, next), queue = next;
+        }
+        return queue.add(onValue), () => {
+          queue == null || queue.delete(onValue);
         };
-      }, [hostRef, onValue]);
+      }, []);
     },
     useAnimatedNumberStyle(val, getStyle) {
       return getStyle(val.getValue());

package/dist/cjs/createAnimations.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,0BAEP,sBAA4B,kCAC5B,eAAiC;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,iDAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,aAAY,qCAAW,QAAO,IAC9B,mBAAmB,qCAAW,IAE9B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,iBA/CA,uCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,mDAAkB,IAAI,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,0BAEP,sBAA4B,kCAC5B,eAA2C;AAEpC,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AACrD,kCAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iCAAO,OAAO;AAAA,QAChB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,aAAY,qCAAW,QAAO,IAC9B,mBAAmB,qCAAW,IAE9B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,iBA/CA,uCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,mDAAkB,IAAI,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/createAnimations.native.js

@@ -20,6 +20,7 @@ __export(createAnimations_exports, {
 module.exports = __toCommonJS(createAnimations_exports);
 var import_core = require("@tamagui/core"), import_use_presence = require("@tamagui/use-presence"), import_react = require("react");
 function createAnimations(animations) {
+  const reactionListeners = /* @__PURE__ */ new WeakMap();
   return {
     View: import_core.Stack,
     Text: import_core.Text,
@@ -30,29 +31,32 @@ function createAnimations(animations) {
       const [val, setVal] = (0, import_react.useState)(initial);
       return {
         getInstance() {
-          return val;
+          return setVal;
         },
         getValue() {
           return val;
         },
         setValue(next) {
           setVal(next);
+          const listeners = reactionListeners.get(setVal);
+          listeners && listeners.forEach((cb) => cb(next));
         },
         stop() {
         }
       };
     },
     useAnimatedNumberReaction({ hostRef, value }, onValue) {
-      (0, import_core.useIsomorphicLayoutEffect)(() => {
-        if (!hostRef.current)
-          return;
-        const onTransitionEvent = (e) => {
-          onValue(value.getValue());
-        }, node = hostRef.current;
-        return node.addEventListener("transitionstart", onTransitionEvent), node.addEventListener("transitioncancel", onTransitionEvent), node.addEventListener("transitionend", onTransitionEvent), () => {
-          node.removeEventListener("transitionstart", onTransitionEvent), node.removeEventListener("transitioncancel", onTransitionEvent), node.removeEventListener("transitionend", onTransitionEvent);
+      (0, import_react.useEffect)(() => {
+        const instance = value.getInstance();
+        let queue = reactionListeners.get(instance);
+        if (!queue) {
+          const next = /* @__PURE__ */ new Set();
+          reactionListeners.set(instance, next), queue = next;
+        }
+        return queue.add(onValue), () => {
+          queue == null || queue.delete(onValue);
         };
-      }, [hostRef, onValue]);
+      }, []);
     },
     useAnimatedNumberStyle(val, getStyle) {
       return getStyle(val.getValue());

package/dist/cjs/createAnimations.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,0BAEP,sBAA4B,kCAC5B,eAAiC;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,iDAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,aAAY,qCAAW,QAAO,IAC9B,mBAAmB,qCAAW,IAE9B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,iBA/CA,uCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,mDAAkB,IAAI,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,0BAEP,sBAA4B,kCAC5B,eAA2C;AAEpC,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AACrD,kCAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iCAAO,OAAO;AAAA,QAChB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,aAAY,qCAAW,QAAO,IAC9B,mBAAmB,qCAAW,IAE9B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,iBA/CA,uCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,mDAAkB,IAAI,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/createAnimations.js

@@ -4,8 +4,9 @@ import {
   useIsomorphicLayoutEffect
 } from "@tamagui/core";
 import { usePresence } from "@tamagui/use-presence";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 function createAnimations(animations) {
+  const reactionListeners = /* @__PURE__ */ new WeakMap();
   return {
     View: Stack,
     Text,
@@ -16,29 +17,32 @@ function createAnimations(animations) {
       const [val, setVal] = useState(initial);
       return {
         getInstance() {
-          return val;
+          return setVal;
         },
         getValue() {
           return val;
         },
         setValue(next) {
           setVal(next);
+          const listeners = reactionListeners.get(setVal);
+          listeners && listeners.forEach((cb) => cb(next));
         },
         stop() {
         }
       };
     },
     useAnimatedNumberReaction({ hostRef, value }, onValue) {
-      useIsomorphicLayoutEffect(() => {
-        if (!hostRef.current)
-          return;
-        const onTransitionEvent = (e) => {
-          onValue(value.getValue());
-        }, node = hostRef.current;
-        return node.addEventListener("transitionstart", onTransitionEvent), node.addEventListener("transitioncancel", onTransitionEvent), node.addEventListener("transitionend", onTransitionEvent), () => {
-          node.removeEventListener("transitionstart", onTransitionEvent), node.removeEventListener("transitioncancel", onTransitionEvent), node.removeEventListener("transitionend", onTransitionEvent);
+      useEffect(() => {
+        const instance = value.getInstance();
+        let queue = reactionListeners.get(instance);
+        if (!queue) {
+          const next = /* @__PURE__ */ new Set();
+          reactionListeners.set(instance, next), queue = next;
+        }
+        return queue.add(onValue), () => {
+          queue?.delete(onValue);
         };
-      }, [hostRef, onValue]);
+      }, []);
     },
     useAnimatedNumberStyle(val, getStyle) {
       return getStyle(val.getValue());

package/dist/esm/createAnimations.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAiB,gBAAgB;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,kBAAkB,GAAG,CAAC,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
+  "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAS,WAAkB,gBAAgB;AAEpC,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AACrD,gBAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,kBAAkB,GAAG,CAAC,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/createAnimations.native.js

@@ -4,8 +4,9 @@ import {
   useIsomorphicLayoutEffect
 } from "@tamagui/core";
 import { usePresence } from "@tamagui/use-presence";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 function createAnimations(animations) {
+  const reactionListeners = /* @__PURE__ */ new WeakMap();
   return {
     View: Stack,
     Text,
@@ -16,29 +17,32 @@ function createAnimations(animations) {
       const [val, setVal] = useState(initial);
       return {
         getInstance() {
-          return val;
+          return setVal;
         },
         getValue() {
           return val;
         },
         setValue(next) {
           setVal(next);
+          const listeners = reactionListeners.get(setVal);
+          listeners && listeners.forEach((cb) => cb(next));
         },
         stop() {
         }
       };
     },
     useAnimatedNumberReaction({ hostRef, value }, onValue) {
-      useIsomorphicLayoutEffect(() => {
-        if (!hostRef.current)
-          return;
-        const onTransitionEvent = (e) => {
-          onValue(value.getValue());
-        }, node = hostRef.current;
-        return node.addEventListener("transitionstart", onTransitionEvent), node.addEventListener("transitioncancel", onTransitionEvent), node.addEventListener("transitionend", onTransitionEvent), () => {
-          node.removeEventListener("transitionstart", onTransitionEvent), node.removeEventListener("transitioncancel", onTransitionEvent), node.removeEventListener("transitionend", onTransitionEvent);
+      useEffect(() => {
+        const instance = value.getInstance();
+        let queue = reactionListeners.get(instance);
+        if (!queue) {
+          const next = /* @__PURE__ */ new Set();
+          reactionListeners.set(instance, next), queue = next;
+        }
+        return queue.add(onValue), () => {
+          queue?.delete(onValue);
         };
-      }, [hostRef, onValue]);
+      }, []);
     },
     useAnimatedNumberStyle(val, getStyle) {
       return getStyle(val.getValue());

package/dist/esm/createAnimations.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAiB,gBAAgB;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,kBAAkB,GAAG,CAAC,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
+  "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAS,WAAkB,gBAAgB;AAEpC,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AACrD,gBAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,kBAAkB,GAAG,CAAC,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.75.6",
+  "version": "1.75.8",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -13,12 +13,13 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/cubic-bezier-animator": "1.75.6",
-    "@tamagui/use-presence": "1.75.6",
-    "@tamagui/web": "1.75.6"
+    "@tamagui/cubic-bezier-animator": "1.75.8",
+    "@tamagui/use-presence": "1.75.8",
+    "@tamagui/web": "1.75.8",
+    "react": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.75.6"
+    "@tamagui/build": "1.75.8"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/createAnimations.tsx

@@ -7,9 +7,11 @@ import {
 } from '@tamagui/core'
 // import { animate } from '@tamagui/cubic-bezier-animator'
 import { usePresence } from '@tamagui/use-presence'
-import { useRef, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 
 export function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {
+  const reactionListeners = new WeakMap<any, Set<Function>>()
+
   return {
     View: Stack,
     Text: Text,
@@ -17,41 +19,41 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
     usePresence,
     supportsCSSVars: true,
 
-    useAnimatedNumber(initial): UniversalAnimatedNumber<number> {
+    useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {
       const [val, setVal] = useState(initial)
 
       return {
         getInstance() {
-          return val
+          return setVal
         },
         getValue() {
           return val
         },
         setValue(next) {
           setVal(next)
+          const listeners = reactionListeners.get(setVal)
+          if (listeners) {
+            listeners.forEach((cb) => cb(next))
+          }
         },
         stop() {},
       }
     },
 
     useAnimatedNumberReaction({ hostRef, value }, onValue) {
-      // doesn't make much sense given value the animated value is a state in this driver, but this is compatible
-      useIsomorphicLayoutEffect(() => {
-        if (!hostRef.current) return
-        const onTransitionEvent = (e: TransitionEvent) => {
-          onValue(value.getValue())
+      useEffect(() => {
+        const instance = value.getInstance()
+        let queue = reactionListeners.get(instance)
+        if (!queue) {
+          const next = new Set<Function>()
+          reactionListeners.set(instance, next)
+          queue = next!
         }
-
-        const node = hostRef.current as HTMLElement
-        node.addEventListener('transitionstart', onTransitionEvent)
-        node.addEventListener('transitioncancel', onTransitionEvent)
-        node.addEventListener('transitionend', onTransitionEvent)
+        queue.add(onValue)
         return () => {
-          node.removeEventListener('transitionstart', onTransitionEvent)
-          node.removeEventListener('transitioncancel', onTransitionEvent)
-          node.removeEventListener('transitionend', onTransitionEvent)
+          queue?.delete(onValue)
         }
-      }, [hostRef, onValue])
+      }, [])
     },
 
     useAnimatedNumberStyle(val, getStyle) {

package/types/createAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAA;AAKtB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAkIpF"}
+{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAA;AAKtB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAoIpF"}