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

package/dist/esm/createAnimations.native.js

@@ -1,4 +1,4 @@
-import { normalizeTransition, getEffectiveAnimation } from "@tamagui/animation-helpers";
+import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import { useEvent, useThemeWithState } from "@tamagui/web";
@@ -7,61 +7,66 @@ import { Animated } from "react-native";
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
+var isFabric = !isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
 var resolveDynamicValue = function (value, isDark) {
-    if (value && (typeof value > "u" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
-      var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
-      return dynamicValue;
-    }
-    return value;
-  },
-  animatedStyleKey = {
-    transform: !0,
-    opacity: !0
-  },
-  colorStyleKey = {
-    backgroundColor: !0,
-    color: !0,
-    borderColor: !0,
-    borderLeftColor: !0,
-    borderRightColor: !0,
-    borderTopColor: !0,
-    borderBottomColor: !0
-  },
-  costlyToAnimateStyleKey = {
-    borderRadius: !0,
-    borderTopLeftRadius: !0,
-    borderTopRightRadius: !0,
-    borderBottomLeftRadius: !0,
-    borderBottomRightRadius: !0,
-    borderWidth: !0,
-    borderLeftWidth: !0,
-    borderRightWidth: !0,
-    borderTopWidth: !0,
-    borderBottomWidth: !0,
-    ...colorStyleKey
-  },
-  AnimatedView = Animated.View,
-  AnimatedText = Animated.Text;
+  if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
+    var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
+    return dynamicValue;
+  }
+  return value;
+};
+var animatedStyleKey = {
+  transform: true,
+  opacity: true
+};
+var colorStyleKey = {
+  backgroundColor: true,
+  color: true,
+  borderColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderTopColor: true,
+  borderBottomColor: true
+};
+var costlyToAnimateStyleKey = {
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderTopWidth: true,
+  borderBottomWidth: true,
+  ...colorStyleKey
+};
+var AnimatedView = Animated.View;
+var AnimatedText = Animated.Text;
 function useAnimatedNumber(initial) {
   var state = React.useRef(null);
-  return state.current || (state.current = {
-    composite: null,
-    val: new Animated.Value(initial),
-    strategy: {
-      type: "spring"
-    }
-  }), {
+  if (!state.current) {
+    state.current = {
+      composite: null,
+      val: new Animated.Value(initial),
+      strategy: {
+        type: "spring"
+      }
+    };
+  }
+  return {
     getInstance() {
       return state.current.val;
     },
     getValue() {
-      return state.current.val._value;
+      return state.current.val["_value"];
     },
     stop() {
       var _state_current_composite;
-      (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 || _state_current_composite.stop(), state.current.composite = null;
+      (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
+      state.current.composite = null;
     },
     setValue(next) {
       var {
@@ -70,268 +75,436 @@ function useAnimatedNumber(initial) {
         } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
           type: "spring"
         },
-        onFinish = arguments.length > 2 ? arguments[2] : void 0,
-        val = state.current.val,
-        handleFinish = onFinish ? function (param) {
-          var {
-            finished
-          } = param;
-          return finished ? onFinish() : null;
-        } : void 0;
-      if (type === "direct") val.setValue(next);else if (type === "spring") {
+        onFinish = arguments.length > 2 ? arguments[2] : void 0;
+      var val = state.current.val;
+      var handleFinish = onFinish ? function (param) {
+        var {
+          finished
+        } = param;
+        return finished ? onFinish() : null;
+      } : void 0;
+      if (type === "direct") {
+        val.setValue(next);
+      } else if (type === "spring") {
         var _state_current_composite;
-        (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 || _state_current_composite.stop();
+        (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
         var composite = Animated.spring(val, {
           ...config,
           toValue: next,
-          useNativeDriver: !isWeb
+          useNativeDriver: isFabric
         });
-        composite.start(handleFinish), state.current.composite = composite;
+        composite.start(handleFinish);
+        state.current.composite = composite;
       } else {
         var _state_current_composite1;
-        (_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 || _state_current_composite1.stop();
+        (_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
         var composite1 = Animated.timing(val, {
           ...config,
           toValue: next,
-          useNativeDriver: !isWeb
+          useNativeDriver: isFabric
         });
-        composite1.start(handleFinish), state.current.composite = composite1;
+        composite1.start(handleFinish);
+        state.current.composite = composite1;
       }
     }
   };
 }
 var useAnimatedNumberReaction = function (param, onValue) {
-    var {
-        value
-      } = param,
-      onChange = useEvent(function (current) {
-        onValue(current.value);
-      });
-    React.useEffect(function () {
-      var id = value.getInstance().addListener(onChange);
-      return function () {
-        value.getInstance().removeListener(id);
-      };
-    }, [value, onChange]);
-  },
-  useAnimatedNumberStyle = function (value, getStyle) {
-    return getStyle(value.getInstance());
-  };
-function createAnimations(animations) {
+  var {
+    value
+  } = param;
+  var onChange = useEvent(function (current) {
+    onValue(current.value);
+  });
+  React.useEffect(function () {
+    var id = value.getInstance().addListener(onChange);
+    return function () {
+      value.getInstance().removeListener(id);
+    };
+  }, [value, onChange]);
+};
+var useAnimatedNumberStyle = function (value, getStyle) {
+  return getStyle(value.getInstance());
+};
+var useAnimatedNumbersStyle = function (vals, getStyle) {
+  return getStyle(...vals.map(function (v) {
+    return v.getInstance();
+  }));
+};
+function createAnimations(animations, options) {
+  var _options_useNativeDriver;
+  var nativeDriver = (_options_useNativeDriver = options === null || options === void 0 ? void 0 : options.useNativeDriver) !== null && _options_useNativeDriver !== void 0 ? _options_useNativeDriver : isFabric;
   return {
-    isReactNative: !0,
+    isReactNative: true,
     inputStyle: "value",
     outputStyle: "inline",
+    avoidReRenders: true,
     animations,
+    needsCustomComponent: true,
     View: AnimatedView,
     Text: AnimatedText,
     useAnimatedNumber,
     useAnimatedNumberReaction,
     useAnimatedNumberStyle,
+    useAnimatedNumbersStyle,
     usePresence,
     ResetPresence,
     useAnimations: function (param) {
       var {
-          props,
-          onDidAnimate,
-          style,
-          componentState,
-          presence
-        } = param,
-        _themeState_name,
-        isDisabled = isWeb && componentState.unmounted === !0,
-        isExiting = presence?.[0] === !1,
-        sendExitComplete = presence?.[1],
-        [, themeState] = useThemeWithState({}),
-        isDark = themeState?.scheme === "dark" || (themeState == null || (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark")),
-        animateStyles = React.useRef({}),
-        animatedTranforms = React.useRef([]),
-        animationsState = React.useRef(/* @__PURE__ */new WeakMap()),
-        animateOnly = props.animateOnly || [],
-        hasTransitionOnly = !!props.animateOnly,
-        isEntering = !!componentState.unmounted,
-        wasEnteringRef = React.useRef(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+        props,
+        onDidAnimate,
+        style,
+        componentState,
+        presence,
+        useStyleEmitter
+      } = param;
+      var _themeState_name;
+      var isDisabled = isWeb && componentState.unmounted === true;
+      var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
+      var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
+      var [, themeState] = useThemeWithState({});
+      var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
+      var animateStyles = React.useRef({});
+      var animatedTranforms = React.useRef([]);
+      var animationsState = React.useRef(/* @__PURE__ */new WeakMap());
+      var exitCycleIdRef = React.useRef(0);
+      var exitCompletedRef = React.useRef(false);
+      var wasExitingRef = React.useRef(false);
+      var justStartedExiting = isExiting && !wasExitingRef.current;
+      var justStoppedExiting = !isExiting && wasExitingRef.current;
+      if (justStartedExiting) {
+        exitCycleIdRef.current++;
+        exitCompletedRef.current = false;
+      }
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++;
+      }
+      var animateOnly = props.animateOnly || [];
+      var hasTransitionOnly = !!props.animateOnly;
+      var isEntering = !!componentState.unmounted;
+      var wasEnteringRef = React.useRef(isEntering);
+      var justFinishedEntering = wasEnteringRef.current && !isEntering;
       React.useEffect(function () {
         wasEnteringRef.current = isEntering;
       });
-      var args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering],
-        isThereNoNativeStyleKeys = React.useMemo(function () {
-          return isWeb ? !0 : Object.keys(style).some(function (key) {
-            return animateOnly ? !animatedStyleKey[key] && animateOnly.indexOf(key) === -1 : !animatedStyleKey[key];
-          });
-        }, args),
-        res = React.useMemo(function () {
-          var runners = [],
-            completions = [],
-            animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default",
-            nonAnimatedStyle = {};
-          for (var key in style) {
-            var rawVal = style[key],
-              val = resolveDynamicValue(rawVal, isDark);
-            if (val !== void 0 && !isDisabled) {
-              if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
-                nonAnimatedStyle[key] = val;
-                continue;
-              }
-              if (hasTransitionOnly && !animateOnly.includes(key)) {
-                nonAnimatedStyle[key] = val;
-                continue;
-              }
-              if (key !== "transform") {
-                animateStyles.current[key] = update(key, animateStyles.current[key], val);
-                continue;
+      var args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering, hasTransitionOnly];
+      var res = React.useMemo(function () {
+        var runners = [];
+        var completions = [];
+        var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+        var nonAnimatedStyle = {};
+        for (var key in style) {
+          var rawVal = style[key];
+          var val = resolveDynamicValue(rawVal, isDark);
+          if (val === void 0) continue;
+          if (isDisabled) {
+            continue;
+          }
+          if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
+            nonAnimatedStyle[key] = val;
+            continue;
+          }
+          if (hasTransitionOnly && !animateOnly.includes(key)) {
+            nonAnimatedStyle[key] = val;
+            continue;
+          }
+          if (key !== "transform") {
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
+            continue;
+          }
+          if (!val) continue;
+          if (typeof val === "string") {
+            console.warn(`Warning: Tamagui can't animate string transforms yet!`);
+            continue;
+          }
+          var _iteratorNormalCompletion = true,
+            _didIteratorError = false,
+            _iteratorError = void 0;
+          try {
+            for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var [index, transform] = _step.value;
+              var _animatedTranforms_current_index;
+              if (!transform) continue;
+              var tkey = Object.keys(transform)[0];
+              var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
+              animatedTranforms.current[index] = {
+                [tkey]: update(tkey, currentTransform, transform[tkey])
+              };
+              animatedTranforms.current = [...animatedTranforms.current];
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
               }
-              if (val) {
-                if (typeof val == "string") {
-                  console.warn("Warning: Tamagui can't animate string transforms yet!");
-                  continue;
-                }
-                var _iteratorNormalCompletion = !0,
-                  _didIteratorError = !1,
-                  _iteratorError = void 0;
-                try {
-                  for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-                    var [index, transform] = _step.value,
-                      _animatedTranforms_current_index;
-                    if (transform) {
-                      var tkey = Object.keys(transform)[0],
-                        currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
-                      animatedTranforms.current[index] = {
-                        [tkey]: update(tkey, currentTransform, transform[tkey])
-                      }, animatedTranforms.current = [...animatedTranforms.current];
-                    }
-                  }
-                } catch (err) {
-                  _didIteratorError = !0, _iteratorError = err;
-                } finally {
-                  try {
-                    !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-                  } finally {
-                    if (_didIteratorError) throw _iteratorError;
-                  }
-                }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
               }
             }
           }
-          var animatedStyle = {
-            ...Object.fromEntries(Object.entries(animateStyles.current).map(function (param2) {
-              var [k, v] = param2,
-                _animationsState_current_get;
-              return [k, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
-            })),
-            transform: animatedTranforms.current.map(function (r) {
-              var _animationsState_current_get,
-                key2 = Object.keys(r)[0],
-                val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
-              return {
-                [key2]: val2
-              };
-            })
-          };
-          return {
-            runners,
-            completions,
-            style: [nonAnimatedStyle, animatedStyle]
-          };
-          function update(key2, animated, valIn) {
-            var isColorStyleKey = colorStyleKey[key2],
-              [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn),
-              animateToValue = val2,
-              value = animated || new Animated.Value(val2),
-              curInterpolation = animationsState.current.get(value),
-              interpolateArgs;
-            if (type) {
-              var _curInterpolation_current;
-              interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation?.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value._value, val2, type), animationsState.current.set(value, {
-                interpolation: value.interpolate(interpolateArgs),
-                current: val2
-              });
-            }
-            if (isColorStyleKey && (animateToValue = curInterpolation?.animateToValue ? 0 : 1, interpolateArgs = getColorInterpolated(curInterpolation?.current,
+        }
+        var animatedTransformStyle = animatedTranforms.current.length > 0 ? {
+          transform: animatedTranforms.current.map(function (r) {
+            var _animationsState_current_get;
+            var key2 = Object.keys(r)[0];
+            var val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
+            return {
+              [key2]: val2
+            };
+          })
+        } : {};
+        var animatedStyle = {
+          ...Object.fromEntries(Object.entries(animateStyles.current).map(function (param2) {
+            var [k, v] = param2;
+            var _animationsState_current_get;
+            return [k, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
+          })),
+          ...animatedTransformStyle
+        };
+        return {
+          runners,
+          completions,
+          style: [nonAnimatedStyle, animatedStyle]
+        };
+        function update(key2, animated, valIn) {
+          var isColorStyleKey = colorStyleKey[key2];
+          var [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
+          var animateToValue = val2;
+          var value = animated || new Animated.Value(val2);
+          var curInterpolation = animationsState.current.get(value);
+          var interpolateArgs;
+          if (type) {
+            var _curInterpolation_current;
+            interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], val2, type);
+            animationsState.current.set(value, {
+              interpolation: value.interpolate(interpolateArgs),
+              current: val2
+            });
+          }
+          if (isColorStyleKey) {
+            animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
+            interpolateArgs = getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current,
             // valIn is the next color
-            valIn, animateToValue), animationsState.current.set(value, {
+            valIn, animateToValue);
+            animationsState.current.set(value, {
               current: valIn,
               interpolation: value.interpolate(interpolateArgs),
-              animateToValue: curInterpolation?.animateToValue ? 0 : 1
-            })), value) {
-              var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState),
-                resolve,
-                promise = new Promise(function (res2) {
-                  resolve = res2;
+              animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
+            });
+          }
+          if (value) {
+            var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState);
+            var resolve;
+            var promise = new Promise(function (res2) {
+              resolve = res2;
+            });
+            completions.push(promise);
+            runners.push(function () {
+              value.stopAnimation();
+              function getAnimation() {
+                return Animated[animationConfig.type || "spring"](value, {
+                  toValue: animateToValue,
+                  useNativeDriver: nativeDriver,
+                  ...animationConfig
                 });
-              completions.push(promise), runners.push(function () {
-                value.stopAnimation();
-                function getAnimation() {
-                  return Animated[animationConfig.type || "spring"](value, {
-                    toValue: animateToValue,
-                    useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
-                    ...animationConfig
-                  });
+              }
+              var animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
+              animation.start(function (param2) {
+                var {
+                  finished
+                } = param2;
+                if (finished || isExiting) {
+                  resolve();
                 }
-                var animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
-                animation.start(function (param2) {
-                  var {
-                    finished
-                  } = param2;
-                  finished && resolve();
-                });
               });
+            });
+          }
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"] === "verbose") {
+              console.info(" \u{1F4A0} animate", key2, `from (${value["_value"]}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs);
             }
-            return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F4A0} animate", key2, `from (${value._value}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs), value;
           }
-        }, args);
-      return useIsomorphicLayoutEffect(function () {
+          return value;
+        }
+      }, args);
+      React.useEffect(function () {
+        wasExitingRef.current = isExiting;
+      });
+      useIsomorphicLayoutEffect(function () {
         res.runners.forEach(function (r) {
           return r();
         });
-        var cancel = !1;
-        return Promise.all(res.completions).then(function () {
-          cancel || (onDidAnimate?.(), isExiting && sendExitComplete?.());
-        }), function () {
-          cancel = !0;
+        var cycleId = exitCycleIdRef.current;
+        if (res.completions.length === 0) {
+          onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate();
+          if (isExiting && !exitCompletedRef.current) {
+            exitCompletedRef.current = true;
+            sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
+          }
+          return;
+        }
+        var cancel = false;
+        Promise.all(res.completions).then(function () {
+          if (cancel) return;
+          if (isExiting && cycleId !== exitCycleIdRef.current) return;
+          if (isExiting && exitCompletedRef.current) return;
+          onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate();
+          if (isExiting) {
+            exitCompletedRef.current = true;
+            sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
+          }
+        });
+        return function () {
+          cancel = true;
         };
-      }, args), process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("Animated", {
-        response: res,
-        inputStyle: style,
-        isExiting
-      }), res;
+      }, args);
+      useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle) {
+        for (var key in nextStyle) {
+          var rawVal = nextStyle[key];
+          var val = resolveDynamicValue(rawVal, isDark);
+          if (val === void 0) continue;
+          if (key === "transform" && Array.isArray(val)) {
+            var _iteratorNormalCompletion = true,
+              _didIteratorError = false,
+              _iteratorError = void 0;
+            try {
+              for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                var [index, transform] = _step.value;
+                var _animatedTranforms_current_index;
+                if (!transform) continue;
+                var tkey = Object.keys(transform)[0];
+                var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
+                animatedTranforms.current[index] = {
+                  [tkey]: update(tkey, currentTransform, transform[tkey])
+                };
+              }
+            } catch (err) {
+              _didIteratorError = true;
+              _iteratorError = err;
+            } finally {
+              try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                  _iterator.return();
+                }
+              } finally {
+                if (_didIteratorError) {
+                  throw _iteratorError;
+                }
+              }
+            }
+          } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key]) {
+            animateStyles.current[key] = update(key, animateStyles.current[key], val);
+          }
+        }
+        res.runners.forEach(function (r) {
+          return r();
+        });
+        function update(key2, animated, valIn) {
+          var isColor = colorStyleKey[key2];
+          var [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
+          var animateToValue = numVal;
+          var value = animated || new Animated.Value(numVal);
+          var curInterpolation = animationsState.current.get(value);
+          if (type) {
+            var _curInterpolation_current;
+            animationsState.current.set(value, {
+              interpolation: value.interpolate(getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], numVal, type)),
+              current: numVal
+            });
+          }
+          if (isColor) {
+            animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
+            animationsState.current.set(value, {
+              current: valIn,
+              interpolation: value.interpolate(getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue)),
+              animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
+            });
+          }
+          var animationConfig = getAnimationConfig(key2, animations, props.transition, "default");
+          res.runners.push(function () {
+            value.stopAnimation();
+            var anim = Animated[animationConfig.type || "spring"](value, {
+              toValue: animateToValue,
+              useNativeDriver: nativeDriver,
+              ...animationConfig
+            });
+            (animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), anim]) : anim).start();
+          });
+          return value;
+        }
+      });
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"] === "verbose") {
+          console.info(`Animated`, {
+            response: res,
+            inputStyle: style,
+            isExiting
+          });
+        }
+      }
+      return res;
     }
   };
 }
 function getColorInterpolated(currentColor, nextColor, animateToValue) {
-  var inputRange = [0, 1],
-    outputRange = [currentColor || nextColor, nextColor];
-  return animateToValue === 0 && outputRange.reverse(), {
+  var inputRange = [0, 1];
+  var outputRange = [currentColor ? currentColor : nextColor, nextColor];
+  if (animateToValue === 0) {
+    outputRange.reverse();
+  }
+  return {
     inputRange,
     outputRange
   };
 }
 function getInterpolated(current, next) {
   var postfix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "deg";
-  next === current && (current = next - 1e-9);
-  var inputRange = [current, next],
-    outputRange = [`${current}${postfix}`, `${next}${postfix}`];
-  return next < current && (inputRange.reverse(), outputRange.reverse()), {
+  if (next === current) {
+    current = next - 1e-9;
+  }
+  var inputRange = [current, next];
+  var outputRange = [`${current}${postfix}`, `${next}${postfix}`];
+  if (next < current) {
+    inputRange.reverse();
+    outputRange.reverse();
+  }
+  return {
     inputRange,
     outputRange
   };
 }
 function getAnimationConfig(key, animations, transition) {
-  var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default",
-    normalized = normalizeTransition(transition),
-    shortKey = transformShorthands[key],
-    _normalized_properties_key,
-    propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey],
-    animationType = null,
-    extraConf = {};
-  typeof propAnimation == "string" ? animationType = propAnimation : propAnimation && (typeof propAnimation > "u" ? "undefined" : _type_of(propAnimation)) === "object" ? (animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState), extraConf = propAnimation) : animationType = getEffectiveAnimation(normalized, animationState), normalized.delay && !extraConf.delay && (extraConf = {
-    ...extraConf,
-    delay: normalized.delay
-  });
+  var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
+  var normalized = normalizeTransition(transition);
+  var shortKey = transformShorthands[key];
+  var _normalized_properties_key;
+  var propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey];
+  var animationType = null;
+  var extraConf = {};
+  if (typeof propAnimation === "string") {
+    animationType = propAnimation;
+  } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
+    animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState);
+    extraConf = propAnimation;
+  } else {
+    animationType = getEffectiveAnimation(normalized, animationState);
+  }
+  if (normalized.delay && !extraConf.delay) {
+    extraConf = {
+      ...extraConf,
+      delay: normalized.delay
+    };
+  }
   var found = animationType ? animations[animationType] : {};
   return {
     ...found,
+    // Apply global spring config overrides (from transition={['bouncy', { stiffness: 1000 }]})
+    ...normalized.config,
+    // Property-specific config takes highest precedence
     ...extraConf
   };
 }
@@ -342,11 +515,13 @@ var transformShorthands = {
   translateY: "y"
 };
 function getValue(input) {
-  var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
-  if (typeof input != "string") return [input];
-  var _input_match,
-    [_, number, after] = (_input_match = input.match(/([-0-9]+)(deg|%|px)/)) !== null && _input_match !== void 0 ? _input_match : [];
+  var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+  if (typeof input !== "string") {
+    return [input];
+  }
+  var _input_match;
+  var [_, number, after] = (_input_match = input.match(/([-0-9]+)(deg|%|px)/)) !== null && _input_match !== void 0 ? _input_match : [];
   return [+number, after];
 }
-export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle };
+export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle, useAnimatedNumbersStyle };
 //# sourceMappingURL=createAnimations.native.js.map