@tamagui/animations-reanimated 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/createAnimations.mjs

@@ -1,923 +1,976 @@
 import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
-import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useEvent, useIsomorphicLayoutEffect, useThemeWithState, View } from "@tamagui/core";
+import { Text, View, createRefComponent, getSplitStyles, hooks, isWeb, useComposedRefs, useEvent, useIsomorphicLayoutEffect, useThemeWithState } from "@tamagui/core";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import normalizeColor from "@react-native/normalize-colors";
-import React, { forwardRef, useMemo, useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import Animated_, { cancelAnimation, runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming } from "react-native-reanimated";
 import { jsx } from "react/jsx-runtime";
-const getDefaultExport = module => {
-  const mod = module;
-  if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
-    return mod.default || mod;
-  }
-  return mod;
+
+const getDefaultExport = (module) => {
+	const mod = module;
+	if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
+		return mod.default || mod;
+	}
+	return mod;
 };
 const Animated = getDefaultExport(Animated_);
-const silenceAnimatedComponentDevCheck = style => {
-  if (process.env.NODE_ENV !== "development" || isWeb || !style || typeof style !== "object") {
-    return;
-  }
-  Object.defineProperty(style, "_requiresAnimatedComponent", {
-    configurable: true,
-    enumerable: false,
-    value: true
-  });
+const silenceAnimatedComponentDevCheck = (style) => {
+	if (process.env.NODE_ENV !== "development" || isWeb || !style || typeof style !== "object") {
+		return;
+	}
+	Object.defineProperty(style, "_requiresAnimatedComponent", {
+		configurable: true,
+		enumerable: false,
+		value: true
+	});
 };
 const resolveDynamicValue = (value, isDark) => {
-  if (value !== null && typeof value === "object" && "dynamic" in value && typeof value.dynamic === "object") {
-    const dynamic = value.dynamic;
-    return isDark ? dynamic.dark : dynamic.light;
-  }
-  return value;
+	if (value !== null && typeof value === "object" && "dynamic" in value && typeof value.dynamic === "object") {
+		const dynamic = value.dynamic;
+		return isDark ? dynamic.dark : dynamic.light;
+	}
+	return value;
 };
 const updateMapperState = isWeb ? (state, emitted) => {
-  state.value.emitted = emitted;
+	state.value.emitted = emitted;
 } : (state, emitted) => {
-  "worklet";
-
-  if (!globalThis._WORKLET) return;
-  state.modify(current => {
-    current.emitted = emitted;
-    return current;
-  }, false);
+	"worklet";
+	if (!globalThis._WORKLET) return;
+	state.modify((current) => {
+		current.emitted = emitted;
+		return current;
+	}, false);
 };
-const cloneAnimationValue = value => {
-  if (Array.isArray(value)) {
-    return value.map(cloneAnimationValue);
-  }
-  if (value && typeof value === "object") {
-    const next = {};
-    for (const key in value) {
-      next[key] = cloneAnimationValue(value[key]);
-    }
-    return next;
-  }
-  return value;
+const cloneAnimationValue = (value) => {
+	if (Array.isArray(value)) {
+		return value.map(cloneAnimationValue);
+	}
+	if (value && typeof value === "object") {
+		const next = {};
+		for (const key in value) {
+			next[key] = cloneAnimationValue(value[key]);
+		}
+		return next;
+	}
+	return value;
 };
-const cloneStyleRecord = style => {
-  const next = {};
-  for (const key in style) {
-    next[key] = cloneAnimationValue(style[key]);
-  }
-  return next;
+const cloneStyleRecord = (style) => {
+	const next = {};
+	for (const key in style) {
+		next[key] = cloneAnimationValue(style[key]);
+	}
+	return next;
 };
-const cloneTransitionConfig = config => {
-  return cloneAnimationValue(config);
+const cloneTransitionConfig = (config) => {
+	return cloneAnimationValue(config);
 };
-const getAnimatedTransforms = value => {
-  if (!Array.isArray(value)) return [];
-  return value.filter(item => item !== null && typeof item === "object" && !Array.isArray(item));
+const getAnimatedTransforms = (value) => {
+	if (!Array.isArray(value)) return [];
+	return value.filter((item) => item !== null && typeof item === "object" && !Array.isArray(item));
 };
 const getRemovedAnimatedKeys = (current, previous) => {
-  const removedKeys = {};
-  for (const key of previous) {
-    if (!current.has(key)) removedKeys[key] = true;
-  }
-  return removedKeys;
+	const removedKeys = {};
+	for (const key of previous) {
+		if (!current.has(key)) removedKeys[key] = true;
+	}
+	return removedKeys;
 };
 const getImplicitDefault = (key, targetValue) => {
-  "worklet";
-
-  const value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
-  if (typeof targetValue !== "string") return value;
-  let suffixIndex = 0;
-  while (suffixIndex < targetValue.length) {
-    const character = targetValue[suffixIndex];
-    const code = character.charCodeAt(0);
-    if (code >= 48 && code <= 57 || character === "." || character === "-" || character === "+") {
-      suffixIndex++;
-    } else {
-      break;
-    }
-  }
-  return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
+	"worklet";
+	const value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+	if (typeof targetValue !== "string") return value;
+	let suffixIndex = 0;
+	while (suffixIndex < targetValue.length) {
+		const character = targetValue[suffixIndex];
+		const code = character.charCodeAt(0);
+		if (code >= 48 && code <= 57 || character === "." || character === "-" || character === "+") {
+			suffixIndex++;
+		} else {
+			break;
+		}
+	}
+	return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
 };
 const COLOR_STYLE_KEYS = {
-  backgroundColor: true,
-  borderColor: true,
-  borderLeftColor: true,
-  borderRightColor: true,
-  borderTopColor: true,
-  borderBottomColor: true,
-  color: true
+	backgroundColor: true,
+	borderColor: true,
+	borderLeftColor: true,
+	borderRightColor: true,
+	borderTopColor: true,
+	borderBottomColor: true,
+	color: true
 };
-const toReanimatedColor = value => {
-  "worklet";
-
-  if (typeof value === "number") {
-    const color = value >>> 0;
-    const alpha = (color >>> 24 & 255) / 255;
-    const red = color >>> 16 & 255;
-    const green = color >>> 8 & 255;
-    const blue = color & 255;
-    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-  }
-  if (typeof value !== "string") return value;
-  const trimmed = value.trim();
-  if (trimmed === "transparent") return "rgba(0, 0, 0, 0)";
-  return trimmed;
+const toReanimatedColor = (value) => {
+	"worklet";
+	if (typeof value === "number") {
+		const color = value >>> 0;
+		const alpha = (color >>> 24 & 255) / 255;
+		const red = color >>> 16 & 255;
+		const green = color >>> 8 & 255;
+		const blue = color & 255;
+		return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+	}
+	if (typeof value !== "string") return value;
+	const trimmed = value.trim();
+	if (trimmed === "transparent") return "rgba(0, 0, 0, 0)";
+	return trimmed;
 };
-const isReanimatedColorHistory = value => {
-  "worklet";
-
-  const normalized = toReanimatedColor(value);
-  return typeof normalized === "string" && normalized.startsWith("rgba(");
+const isReanimatedColorHistory = (value) => {
+	"worklet";
+	const normalized = toReanimatedColor(value);
+	return typeof normalized === "string" && normalized.startsWith("rgba(");
 };
-const normalizeAnimationColor = value => {
-  if (typeof value === "number") {
-    return toReanimatedColor(value);
-  }
-  if (typeof value !== "string") return;
-  const color = normalizeColor(value);
-  if (color == null) return;
-  const red = Math.round((color & 4278190080) >>> 24);
-  const green = Math.round((color & 16711680) >>> 16);
-  const blue = Math.round((color & 65280) >>> 8);
-  const alpha = (color & 255) / 255;
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+const normalizeAnimationColor = (value) => {
+	if (typeof value === "number") {
+		return toReanimatedColor(value);
+	}
+	if (typeof value !== "string") return;
+	const color = normalizeColor(value);
+	if (color == null) return;
+	const red = Math.round((color & 4278190080) >>> 24);
+	const green = Math.round((color & 16711680) >>> 16);
+	const blue = Math.round((color & 65280) >>> 8);
+	const alpha = (color & 255) / 255;
+	return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
 const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted) => {
-  const snapshotAnimated = {};
-  const snapshotStatics = cloneStyleRecord(statics);
-  for (const key in snapshotStatics) {
-    if (!COLOR_STYLE_KEYS[key]) continue;
-    const normalized = normalizeAnimationColor(snapshotStatics[key]);
-    if (normalized !== void 0) snapshotStatics[key] = normalized;
-  }
-  for (const key in animated) {
-    if (key === "transform") continue;
-    const value = animated[key];
-    if (COLOR_STYLE_KEYS[key]) {
-      const normalized = normalizeAnimationColor(value);
-      if (normalized === void 0) {
-        snapshotStatics[key] = cloneAnimationValue(value);
-        continue;
-      }
-      snapshotAnimated[key] = normalized;
-    } else {
-      snapshotAnimated[key] = cloneAnimationValue(value);
-    }
-  }
-  const snapshotTransforms = transforms.map(cloneStyleRecord);
-  const keys = new Set(Object.keys(snapshotAnimated));
-  for (const transform of snapshotTransforms) {
-    const key = Object.keys(transform)[0];
-    const value = key ? transform[key] : void 0;
-    if (key && (typeof value === "number" || typeof value === "string")) {
-      keys.add(`transform:${key}`);
-    }
-  }
-  const seeds = {};
-  for (const key of keys) {
-    let value = lastPainted[key];
-    if (typeof value !== "number" && typeof value !== "string") continue;
-    if (value === "auto" || typeof value === "string" && value.startsWith("calc")) {
-      continue;
-    }
-    if (COLOR_STYLE_KEYS[key]) value = normalizeAnimationColor(value);
-    if (value !== void 0) seeds[key] = value;
-  }
-  const gatedKeys = {};
-  for (const key of keys) gatedKeys[key] = true;
-  const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
-  const painted = {
-    ...snapshotStatics,
-    ...snapshotAnimated
-  };
-  const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
-  delete painted.transform;
-  for (const transform of staticTransforms) {
-    const key = Object.keys(transform)[0];
-    if (key) painted[`transform:${key}`] = transform[key];
-  }
-  for (const transform of snapshotTransforms) {
-    const key = Object.keys(transform)[0];
-    if (key) painted[`transform:${key}`] = transform[key];
-  }
-  return {
-    value: {
-      animated: snapshotAnimated,
-      statics: snapshotStatics,
-      transforms: snapshotTransforms,
-      gatedKeys,
-      seeds,
-      removedKeys,
-      removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:")),
-      clearValue: isWeb ? "" : null
-    },
-    painted,
-    keys
-  };
+	const snapshotAnimated = {};
+	const snapshotStatics = cloneStyleRecord(statics);
+	for (const key in snapshotStatics) {
+		if (!COLOR_STYLE_KEYS[key]) continue;
+		const normalized = normalizeAnimationColor(snapshotStatics[key]);
+		if (normalized !== void 0) snapshotStatics[key] = normalized;
+	}
+	for (const key in animated) {
+		if (key === "transform") continue;
+		const value = animated[key];
+		if (COLOR_STYLE_KEYS[key]) {
+			const normalized = normalizeAnimationColor(value);
+			if (normalized === void 0) {
+				snapshotStatics[key] = cloneAnimationValue(value);
+				continue;
+			}
+			snapshotAnimated[key] = normalized;
+		} else {
+			snapshotAnimated[key] = cloneAnimationValue(value);
+		}
+	}
+	const snapshotTransforms = transforms.map(cloneStyleRecord);
+	const keys = new Set(Object.keys(snapshotAnimated));
+	for (const transform of snapshotTransforms) {
+		const key = Object.keys(transform)[0];
+		const value = key ? transform[key] : void 0;
+		if (key && (typeof value === "number" || typeof value === "string")) {
+			keys.add(`transform:${key}`);
+		}
+	}
+	const seeds = {};
+	for (const key of keys) {
+		let value = lastPainted[key];
+		if (typeof value !== "number" && typeof value !== "string") continue;
+		if (value === "auto" || typeof value === "string" && value.startsWith("calc")) {
+			continue;
+		}
+		if (COLOR_STYLE_KEYS[key]) value = normalizeAnimationColor(value);
+		if (value !== void 0) seeds[key] = value;
+	}
+	const gatedKeys = {};
+	for (const key of keys) gatedKeys[key] = true;
+	const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
+	const painted = {
+		...snapshotStatics,
+		...snapshotAnimated
+	};
+	const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
+	delete painted.transform;
+	for (const transform of staticTransforms) {
+		const key = Object.keys(transform)[0];
+		if (key) painted[`transform:${key}`] = transform[key];
+	}
+	for (const transform of snapshotTransforms) {
+		const key = Object.keys(transform)[0];
+		if (key) painted[`transform:${key}`] = transform[key];
+	}
+	return {
+		value: {
+			animated: snapshotAnimated,
+			statics: snapshotStatics,
+			transforms: snapshotTransforms,
+			gatedKeys,
+			seeds,
+			removedKeys,
+			removeTransform: Object.keys(removedKeys).some((key) => key.startsWith("transform:")),
+			clearValue: isWeb ? "" : null
+		},
+		painted,
+		keys
+	};
 };
-const getGatedKeys = snapshot => Object.keys(snapshot.gatedKeys);
-const createReanimatedConfig = config => {
-  "worklet";
-
-  const next = {};
-  const source = config;
-  for (const key in source) {
-    if (key === "type" || key === "delay") continue;
-    const value = source[key];
-    if (value !== void 0) {
-      next[key] = value;
-    }
-  }
-  return next;
+const getGatedKeys = (snapshot) => Object.keys(snapshot.gatedKeys);
+const createReanimatedConfig = (config) => {
+	"worklet";
+	const next = {};
+	const source = config;
+	for (const key in source) {
+		if (key === "type" || key === "delay") continue;
+		const value = source[key];
+		if (value !== void 0) {
+			next[key] = value;
+		}
+	}
+	return next;
 };
 const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
-  "worklet";
-
-  const delay = config.delay;
-  const reanimatedConfig = createReanimatedConfig(config);
-  let animatedValue;
-  if (config.type === "timing") {
-    animatedValue = withTiming(targetValue, reanimatedConfig, callback);
-  } else {
-    animatedValue = withSpring(targetValue, reanimatedConfig, callback);
-  }
-  if (seedValue !== void 0 || validateStartAsColor) {
-    const innerOnStart = animatedValue.onStart;
-    animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
-      "worklet";
-
-      const startValue = validateStartAsColor ? isReanimatedColorHistory(value) ? toReanimatedColor(value) : seedValue ?? targetValue : seedValue;
-      innerOnStart(animation, startValue, timestamp, previousAnimation);
-    };
-  }
-  if (delay && delay > 0) {
-    animatedValue = withDelay(delay, animatedValue);
-  }
-  return animatedValue;
+	"worklet";
+	const delay = config.delay;
+	const reanimatedConfig = createReanimatedConfig(config);
+	let animatedValue;
+	if (config.type === "timing") {
+		animatedValue = withTiming(targetValue, reanimatedConfig, callback);
+	} else {
+		animatedValue = withSpring(targetValue, reanimatedConfig, callback);
+		const innerOnFrame = animatedValue.onFrame;
+		animatedValue.onFrame = (animation, now) => {
+			"worklet";
+			return innerOnFrame(animation, now < animation.lastTimestamp ? animation.lastTimestamp : now);
+		};
+	}
+	if (seedValue !== void 0 || validateStartAsColor) {
+		const innerOnStart = animatedValue.onStart;
+		animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
+			"worklet";
+			const startValue = validateStartAsColor ? isReanimatedColorHistory(value) ? toReanimatedColor(value) : seedValue ?? targetValue : seedValue;
+			innerOnStart(animation, startValue, timestamp, previousAnimation);
+		};
+	}
+	if (delay && delay > 0) {
+		animatedValue = withDelay(delay, animatedValue);
+	}
+	return animatedValue;
 };
-const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingAnimation, didAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, validateStartAsColor = false) => {
-  "worklet";
-
-  const cycleGated = gated && (currentlyExiting || currentlyCompletingAnimation);
-  if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
-    return targetValue;
-  }
-  let callback;
-  if (gated && currentlyExiting) {
-    callback = finished => {
-      "worklet";
-
-      runOnJS(markExitKeyDone)(key, exitCycleId, finished ?? false);
-    };
-  } else if (gated && currentlyCompletingAnimation) {
-    callback = finished => {
-      "worklet";
-
-      runOnJS(markDidAnimateKeyDone)(key, didAnimateCycleId, finished ?? false);
-    };
-  }
-  return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
+const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingEnter, enterCycleId, currentlyCompletingUpdate, updateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, validateStartAsColor = false) => {
+	"worklet";
+	const cycleGated = gated && (currentlyExiting || currentlyCompletingEnter || currentlyCompletingUpdate);
+	if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
+		return targetValue;
+	}
+	let callback;
+	if (gated && currentlyExiting) {
+		callback = (finished) => {
+			"worklet";
+			runOnJS(markExitKeyDone)(key, exitCycleId, finished ?? false);
+		};
+	} else if (gated && currentlyCompletingEnter) {
+		callback = () => {
+			"worklet";
+			runOnJS(markEnterKeyDone)(key, enterCycleId);
+		};
+	} else if (gated && currentlyCompletingUpdate) {
+		callback = (finished) => {
+			"worklet";
+			runOnJS(markUpdateKeyDone)(key, updateCycleId, finished ?? false);
+		};
+	}
+	return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
 };
 const ANIMATABLE_PROPERTIES = {
-  // Transform
-  transform: true,
-  // Opacity
-  opacity: true,
-  // Dimensions
-  height: true,
-  width: true,
-  minWidth: true,
-  minHeight: true,
-  maxWidth: true,
-  maxHeight: true,
-  // Background
-  backgroundColor: true,
-  // Border colors
-  borderColor: true,
-  borderLeftColor: true,
-  borderRightColor: true,
-  borderTopColor: true,
-  borderBottomColor: true,
-  // Border radius
-  borderRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  // Border width
-  borderWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderTopWidth: true,
-  borderBottomWidth: true,
-  // Text
-  color: true,
-  fontSize: true,
-  fontWeight: true,
-  lineHeight: true,
-  letterSpacing: true,
-  // Position
-  left: true,
-  right: true,
-  top: true,
-  bottom: true,
-  // Margin
-  margin: true,
-  marginTop: true,
-  marginBottom: true,
-  marginLeft: true,
-  marginRight: true,
-  marginHorizontal: true,
-  marginVertical: true,
-  // Padding
-  padding: true,
-  paddingTop: true,
-  paddingBottom: true,
-  paddingLeft: true,
-  paddingRight: true,
-  paddingHorizontal: true,
-  paddingVertical: true,
-  // Flex/Gap
-  gap: true,
-  rowGap: true,
-  columnGap: true,
-  flex: true,
-  flexGrow: true,
-  flexShrink: true
+	transform: true,
+	opacity: true,
+	height: true,
+	width: true,
+	minWidth: true,
+	minHeight: true,
+	maxWidth: true,
+	maxHeight: true,
+	backgroundColor: true,
+	borderColor: true,
+	borderLeftColor: true,
+	borderRightColor: true,
+	borderTopColor: true,
+	borderBottomColor: true,
+	borderRadius: true,
+	borderTopLeftRadius: true,
+	borderTopRightRadius: true,
+	borderBottomLeftRadius: true,
+	borderBottomRightRadius: true,
+	borderWidth: true,
+	borderLeftWidth: true,
+	borderRightWidth: true,
+	borderTopWidth: true,
+	borderBottomWidth: true,
+	color: true,
+	fontSize: true,
+	fontWeight: true,
+	lineHeight: true,
+	letterSpacing: true,
+	left: true,
+	right: true,
+	top: true,
+	bottom: true,
+	margin: true,
+	marginTop: true,
+	marginBottom: true,
+	marginLeft: true,
+	marginRight: true,
+	marginHorizontal: true,
+	marginVertical: true,
+	padding: true,
+	paddingTop: true,
+	paddingBottom: true,
+	paddingLeft: true,
+	paddingRight: true,
+	paddingHorizontal: true,
+	paddingVertical: true,
+	gap: true,
+	rowGap: true,
+	columnGap: true,
+	flex: true,
+	flexGrow: true,
+	flexShrink: true
 };
 const canAnimateProperty = (key, value, animateOnly) => {
-  if (!ANIMATABLE_PROPERTIES[key]) return false;
-  if (value === "auto") return false;
-  if (typeof value === "string" && value.startsWith("calc")) return false;
-  if (animateOnly && !animateOnly.includes(key)) return false;
-  return true;
+	if (!ANIMATABLE_PROPERTIES[key]) return false;
+	if (value === "auto") return false;
+	if (typeof value === "string" && value.startsWith("calc")) return false;
+	if (animateOnly && !animateOnly.includes(key)) return false;
+	return true;
 };
 const splitAnimationStyles = (style, isDark, disableAnimation, animateOnly) => {
-  const animated = {};
-  const statics = {};
-  for (const key in style) {
-    const value = resolveDynamicValue(style[key], isDark);
-    if (value === void 0) continue;
-    if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
-      animated[key] = cloneAnimationValue(value);
-    } else {
-      statics[key] = cloneAnimationValue(value);
-    }
-  }
-  return {
-    animated,
-    statics
-  };
+	const animated = {};
+	const statics = {};
+	for (const key in style) {
+		const value = resolveDynamicValue(style[key], isDark);
+		if (value === void 0) continue;
+		if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
+			animated[key] = cloneAnimationValue(value);
+		} else {
+			statics[key] = cloneAnimationValue(value);
+		}
+	}
+	return {
+		animated,
+		statics
+	};
 };
 function createWebAnimatedComponent(defaultTag) {
-  const isText = defaultTag === "span";
-  const Component = Animated.createAnimatedComponent(forwardRef((propsIn, ref) => {
-    const {
-      forwardedRef,
-      render = defaultTag,
-      ...rest
-    } = propsIn;
-    const hostRef = useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef);
-    const stateRef = useRef({
-      get host() {
-        return hostRef.current;
-      }
-    });
-    const [, themeState] = useThemeWithState({});
-    const result = getSplitStyles(rest, isText ? Text.staticConfig : View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", {
-      unmounted: false
-    }, {
-      isAnimated: false,
-      noClass: true
-    });
-    const viewProps = result?.viewProps ?? {};
-    const Element = render;
-    const transformedProps = hooks.usePropsTransform?.(render, viewProps, stateRef, false);
-    return /* @__PURE__ */jsx(Element, {
-      ...transformedProps,
-      ref: composedRefs
-    });
-  }));
-  Component.acceptRenderProp = true;
-  return Component;
+	const isText = defaultTag === "span";
+	const Component = Animated.createAnimatedComponent(createRefComponent((propsIn, ref) => {
+		const { forwardedRef, render = defaultTag, ...rest } = propsIn;
+		const hostRef = useRef(null);
+		const composedRefs = useComposedRefs(forwardedRef, ref, hostRef);
+		const stateRef = useRef({ get host() {
+			return hostRef.current;
+		} });
+		const [, themeState] = useThemeWithState({});
+		const result = getSplitStyles(rest, isText ? Text.staticConfig : View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", { unmounted: false }, {
+			isAnimated: false,
+			noClass: true
+		});
+		const viewProps = result?.viewProps ?? {};
+		const Element = render;
+		const transformedProps = hooks.usePropsTransform?.(render, viewProps, stateRef, false);
+		const { nativeID, ...webProps } = transformedProps ?? viewProps;
+		return /* @__PURE__ */ jsx(Element, {
+			...webProps,
+			ref: composedRefs
+		});
+	}));
+	Component.acceptRenderProp = true;
+	return Component;
 }
 const AnimatedView = createWebAnimatedComponent("div");
 const AnimatedText = createWebAnimatedComponent("span");
 function buildTransitionConfig(transition, animations, animationState, styleKeys) {
-  const normalized = normalizeTransition(transition);
-  const effectiveKey = getEffectiveAnimation(normalized, animationState);
-  let base = cloneTransitionConfig(effectiveKey ? animations[effectiveKey] ?? {
-    type: "spring"
-  } : {
-    type: "spring"
-  });
-  if (normalized.delay) {
-    base = cloneTransitionConfig({
-      ...base,
-      delay: normalized.delay
-    });
-  }
-  if (normalized.config) {
-    base = cloneTransitionConfig({
-      ...base,
-      ...normalized.config
-    });
-    if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
-      base = cloneTransitionConfig({
-        ...base,
-        type: "timing"
-      });
-    }
-  }
-  const propertyConfigs = {};
-  for (const key of styleKeys) {
-    const propAnimation = normalized.properties[key];
-    if (typeof propAnimation === "string") {
-      propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
-    } else if (propAnimation && typeof propAnimation === "object") {
-      const configType = propAnimation.type;
-      const baseForProp = configType ? animations[configType] ?? base : base;
-      propertyConfigs[key] = cloneTransitionConfig({
-        ...baseForProp,
-        ...propAnimation
-      });
-    } else {
-      propertyConfigs[key] = cloneTransitionConfig(base);
-    }
-  }
-  return {
-    baseConfig: base,
-    propertyConfigs
-  };
+	const normalized = normalizeTransition(transition);
+	const effectiveKey = getEffectiveAnimation(normalized, animationState);
+	let base = cloneTransitionConfig(effectiveKey ? animations[effectiveKey] ?? { type: "spring" } : { type: "spring" });
+	if (normalized.delay) {
+		base = cloneTransitionConfig({
+			...base,
+			delay: normalized.delay
+		});
+	}
+	if (normalized.config) {
+		base = cloneTransitionConfig({
+			...base,
+			...normalized.config
+		});
+		if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
+			base = cloneTransitionConfig({
+				...base,
+				type: "timing"
+			});
+		}
+	}
+	const propertyConfigs = {};
+	for (const key of styleKeys) {
+		const propAnimation = normalized.properties[key];
+		if (typeof propAnimation === "string") {
+			propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
+		} else if (propAnimation && typeof propAnimation === "object") {
+			const configType = propAnimation.type;
+			const baseForProp = configType ? animations[configType] ?? base : base;
+			propertyConfigs[key] = cloneTransitionConfig({
+				...baseForProp,
+				...propAnimation
+			});
+		} else {
+			propertyConfigs[key] = cloneTransitionConfig(base);
+		}
+	}
+	return {
+		baseConfig: base,
+		propertyConfigs
+	};
 }
 function getStyleKeys(style) {
-  const keys = new Set(Object.keys(style));
-  if (style.transform && Array.isArray(style.transform)) {
-    for (const t of style.transform) {
-      if (t && typeof t === "object") {
-        keys.add(Object.keys(t)[0]);
-      }
-    }
-  }
-  return keys;
+	const keys = new Set(Object.keys(style));
+	if (style.transform && Array.isArray(style.transform)) {
+		for (const t of style.transform) {
+			if (t && typeof t === "object") {
+				keys.add(Object.keys(t)[0]);
+			}
+		}
+	}
+	return keys;
 }
 function createAnimations(animationsConfig) {
-  const animations = {};
-  for (const key in animationsConfig) {
-    animations[key] = cloneTransitionConfig({
-      type: "spring",
-      ...animationsConfig[key]
-    });
-  }
-  return {
-    needsCustomComponent: true,
-    View: isWeb ? AnimatedView : Animated.View,
-    Text: isWeb ? AnimatedText : Animated.Text,
-    isReactNative: true,
-    inputStyle: "value",
-    outputStyle: "inline",
-    avoidReRenders: true,
-    animations,
-    usePresence,
-    ResetPresence,
-    // =========================================================================
-    // useAnimatedNumber - For imperative animated values
-    // =========================================================================
-    useAnimatedNumber(initial) {
-      const sharedValue = useSharedValue(initial);
-      return useMemo(() => ({
-        getInstance() {
-          "worklet";
-
-          return sharedValue;
-        },
-        getValue() {
-          "worklet";
-
-          return sharedValue.value;
-        },
-        setValue(next, config = {
-          type: "spring"
-        }, onFinish) {
-          if (config.type === "direct") {
-            sharedValue.value = next;
-            onFinish?.();
-          } else {
-            const cb = onFinish ? finished => {
-              "worklet";
-
-              if (finished !== false) {
-                runOnJS(onFinish)();
-              }
-            } : void 0;
-            const animationConfig = cloneTransitionConfig(config);
-            if (isWeb) {
-              sharedValue.value = applyAnimation(next, animationConfig, cb);
-            } else {
-              runOnUI((targetValue, animationConfig2) => {
-                "worklet";
-
-                sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
-              })(next, animationConfig);
-            }
-          }
-        },
-        stop() {
-          cancelAnimation(sharedValue);
-        }
-      }), [sharedValue]);
-    },
-    // =========================================================================
-    // useAnimatedNumberReaction - React to animated value changes
-    // =========================================================================
-    useAnimatedNumberReaction({
-      value
-    }, onValue) {
-      const instance = value.getInstance();
-      return useAnimatedReaction(() => instance.value, (next, prev) => {
-        if (prev !== next) {
-          runOnJS(onValue)(next);
-        }
-      }, [onValue, instance]);
-    },
-    // =========================================================================
-    // useAnimatedNumberStyle - Create animated styles from values
-    // =========================================================================
-    useAnimatedNumberStyle(val, getStyle) {
-      const instance = val.getInstance();
-      if (isWeb) {
-        return useAnimatedStyle(() => {
-          "worklet";
-
-          return getStyle(instance.value);
-        }, [instance, getStyle]);
-      }
-      const styleVal = useDerivedValue(() => {
-        "worklet";
-
-        return getStyle(instance.value);
-      });
-      const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
-
-        return styleVal.value;
-      });
-      silenceAnimatedComponentDevCheck(animatedStyle);
-      return animatedStyle;
-    },
-    useAnimatedNumbersStyle(vals, getStyle) {
-      const instances = vals.map(v => v.getInstance());
-      const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
-
-        const currentValues = instances.map(inst => inst.value);
-        return getStyle(...currentValues);
-      }, isWeb ? [getStyle, ...instances] : void 0);
-      silenceAnimatedComponentDevCheck(animatedStyle);
-      return animatedStyle;
-    },
-    // =========================================================================
-    // useAnimations - Main animation hook for components
-    // =========================================================================
-    useAnimations(animationProps) {
-      const {
-        props,
-        presence,
-        style,
-        componentState,
-        useStyleEmitter,
-        themeName,
-        stateRef,
-        styleState,
-        onDidAnimate
-      } = animationProps;
-      const isHydrating = componentState.unmounted === true;
-      const isMounting = componentState.unmounted === "should-enter";
-      const isEntering = !!componentState.unmounted;
-      const isExiting = presence?.[0] === false;
-      const wasEnteringRef = useRef(isEntering);
-      const justFinishedEntering = wasEnteringRef.current && !isEntering;
-      React.useEffect(() => {
-        wasEnteringRef.current = isEntering;
-      });
-      const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
-      const normalized = normalizeTransition(effectiveTransition);
-      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-      const animationKey = getEffectiveAnimation(normalized, animationState);
-      const disableAnimation = isHydrating || !animationKey;
-      const isDark = themeName?.startsWith("dark") || false;
-      const sendExitComplete = presence?.[1];
-      const onDidAnimateRef = useRef(onDidAnimate);
-      useIsomorphicLayoutEffect(() => {
-        onDidAnimateRef.current = onDidAnimate;
-      }, [onDidAnimate]);
-      const didAnimateCycleIdRef = useRef(0);
-      const pendingDidAnimateKeysRef = useRef(/* @__PURE__ */new Set());
-      const didAnimateCompletedRef = useRef(false);
-      const isCompletingAnimationRef = useSharedValue(false);
-      const didAnimateCycleIdShared = useSharedValue(0);
-      const markDidAnimateKeyDone = useEvent((key, cycleId, finished) => {
-        if (!finished || cycleId !== didAnimateCycleIdRef.current) return;
-        if (didAnimateCompletedRef.current) return;
-        pendingDidAnimateKeysRef.current.delete(key);
-        if (pendingDidAnimateKeysRef.current.size === 0) {
-          didAnimateCompletedRef.current = true;
-          isCompletingAnimationRef.value = false;
-          onDidAnimateRef.current?.();
-        }
-      });
-      const exitCycleIdRef = useRef(0);
-      const pendingExitKeysRef = useRef(/* @__PURE__ */new Set());
-      const exitCompletedRef = useRef(false);
-      const wasExitingRef = useRef(false);
-      const justStartedExiting = isExiting && !wasExitingRef.current;
-      const justStoppedExiting = !isExiting && wasExitingRef.current;
-      const markExitKeyDone = useEvent((key, cycleId, finished) => {
-        if (cycleId !== exitCycleIdRef.current) return;
-        if (exitCompletedRef.current) return;
-        pendingExitKeysRef.current.delete(key);
-        if (pendingExitKeysRef.current.size === 0) {
-          exitCompletedRef.current = true;
-          sendExitComplete?.();
-        }
-      });
-      const isExitingRef = useSharedValue(isExiting);
-      const exitCycleIdShared = useSharedValue(exitCycleIdRef.current);
-      if (justStartedExiting) {
-        exitCycleIdRef.current++;
-        exitCompletedRef.current = false;
-        pendingExitKeysRef.current.clear();
-        didAnimateCycleIdRef.current++;
-        pendingDidAnimateKeysRef.current.clear();
-        didAnimateCompletedRef.current = true;
-      }
-      if (justStoppedExiting) {
-        exitCycleIdRef.current++;
-        pendingExitKeysRef.current.clear();
-      }
-      useIsomorphicLayoutEffect(() => {
-        isExitingRef.value = isExiting;
-        exitCycleIdShared.value = exitCycleIdRef.current;
-        if (justStartedExiting) {
-          isCompletingAnimationRef.value = false;
-          didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
-        }
-      }, [isExiting, exitCycleIdRef.current, justStartedExiting]);
-      React.useEffect(() => {
-        wasExitingRef.current = isExiting;
-      });
-      const committedRenderKeysRef = useRef(/* @__PURE__ */new Set());
-      const lastPaintedRef = useRef({});
-      const carryRef = useRef({});
-      const {
-        animatedStyles,
-        staticStyles,
-        nextCarry
-      } = useMemo(() => {
-        const animateOnly = props.animateOnly;
-        const {
-          animated,
-          statics
-        } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
-        const nextCarry2 = cloneStyleRecord(carryRef.current);
-        for (const key in nextCarry2) {
-          if (!(key in animated)) delete nextCarry2[key];
-        }
-        for (const key in animated) {
-          if (!(key in nextCarry2)) {
-            nextCarry2[key] = cloneAnimationValue(animated[key]);
-          }
-          statics[key] = nextCarry2[key];
-        }
-        return {
-          animatedStyles: animated,
-          staticStyles: statics,
-          nextCarry: nextCarry2
-        };
-      }, [disableAnimation, style, isDark, props.animateOnly]);
-      const renderSnapshot = useMemo(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
-      const renderSnapshotRef = useSharedValue({
-        animated: {},
-        statics: {},
-        transforms: [],
-        gatedKeys: {},
-        seeds: {},
-        removedKeys: {},
-        removeTransform: false,
-        clearValue: isWeb ? "" : null
-      });
-      const emitterSnapshotRef = useSharedValue(null);
-      const emitterKeysRef = useRef(null);
-      useIsomorphicLayoutEffect(() => {
-        carryRef.current = nextCarry;
-        committedRenderKeysRef.current = renderSnapshot.keys;
-        lastPaintedRef.current = renderSnapshot.painted;
-      }, [nextCarry, renderSnapshot]);
-      const pseudoActiveRef = useRef(false);
-      const isExitingJSRef = useRef(false);
-      isExitingJSRef.current = isExiting;
-      const publishedSnapshotRef = useRef(null);
-      useIsomorphicLayoutEffect(() => {
-        const droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
-        const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
-        if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
-          const removedKeys = emitterKeys ? {
-            ...renderSnapshot.value.removedKeys,
-            ...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
-          } : renderSnapshot.value.removedKeys;
-          renderSnapshotRef.value = {
-            ...renderSnapshot.value,
-            removedKeys,
-            removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:"))
-          };
-          publishedSnapshotRef.current = renderSnapshot.value;
-        }
-        if (droppingLatch) {
-          emitterSnapshotRef.value = null;
-          emitterKeysRef.current = null;
-        }
-      });
-      const {
-        baseConfig,
-        propertyConfigs
-      } = useMemo(() => {
-        if (isHydrating) {
-          return {
-            baseConfig: {
-              type: "timing",
-              duration: 0
-            },
-            propertyConfigs: {}
-          };
-        }
-        return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
-      }, [isHydrating, effectiveTransition, animatedStyles, animationState]);
-      const configRef = useSharedValue({
-        baseConfig,
-        propertyConfigs,
-        disableAnimation,
-        isHydrating
-      });
-      useIsomorphicLayoutEffect(() => {
-        configRef.value = {
-          baseConfig,
-          propertyConfigs,
-          disableAnimation,
-          isHydrating
-        };
-      }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
-      useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
-        if (isExitingJSRef.current) return;
-        pseudoActiveRef.current = pseudoActive === true;
-        const animateOnly = props.animateOnly;
-        const transitionToUse = effectiveTransition2 ?? props.transition;
-        const {
-          baseConfig: newBase,
-          propertyConfigs: newPropertyConfigs
-        } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
-        configRef.value = {
-          baseConfig: newBase,
-          propertyConfigs: newPropertyConfigs,
-          disableAnimation: configRef.value.disableAnimation,
-          isHydrating: configRef.value.isHydrating
-        };
-        const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
-        const {
-          animated,
-          statics
-        } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
-        const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
-        emitterSnapshotRef.value = snapshot.value;
-        emitterKeysRef.current = snapshot.keys;
-        lastPaintedRef.current = snapshot.painted;
-        if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
-          console.info("[animations-reanimated] useStyleEmitter update", {
-            animated,
-            statics,
-            transforms: snapshot.value.transforms
-          });
-        }
-      });
-      const exitKeysRegistered = useRef(false);
-      if (justStartedExiting && sendExitComplete) {
-        const exitKeys = getGatedKeys(renderSnapshot.value);
-        pendingExitKeysRef.current = new Set(exitKeys);
-        exitKeysRegistered.current = exitKeys.length > 0;
-      }
-      const previousDidAnimateStyleRef = useRef(null);
-      const didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null;
-      const previousDidAnimateStyle = previousDidAnimateStyleRef.current;
-      const shouldRegisterDidAnimate = didAnimateStyle !== null && previousDidAnimateStyle !== null && previousDidAnimateStyle !== didAnimateStyle && !isExiting && !isEntering && !justFinishedEntering;
-      const didAnimateKeys = shouldRegisterDidAnimate ? getGatedKeys(renderSnapshot.value) : [];
-      useIsomorphicLayoutEffect(() => {
-        if (didAnimateStyle === null) {
-          previousDidAnimateStyleRef.current = null;
-          isCompletingAnimationRef.value = false;
-          return;
-        }
-        const previousStyleStillCurrent = previousDidAnimateStyleRef.current === previousDidAnimateStyle;
-        previousDidAnimateStyleRef.current = didAnimateStyle;
-        if (!shouldRegisterDidAnimate || !previousStyleStillCurrent) return;
-        const cycleId = ++didAnimateCycleIdRef.current;
-        pendingDidAnimateKeysRef.current = new Set(didAnimateKeys);
-        didAnimateCompletedRef.current = didAnimateKeys.length === 0;
-        isCompletingAnimationRef.value = didAnimateKeys.length > 0;
-        didAnimateCycleIdShared.value = cycleId;
-        if (didAnimateKeys.length === 0) {
-          onDidAnimateRef.current?.();
-        }
-      }, [didAnimateStyle, shouldRegisterDidAnimate]);
-      React.useEffect(() => {
-        if (!justStartedExiting || !sendExitComplete) return;
-        if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
-          if (!exitCompletedRef.current) {
-            exitCompletedRef.current = true;
-            sendExitComplete();
-          }
-        }
-      }, [justStartedExiting, sendExitComplete]);
-      const mapperStateRef = useSharedValue({
-        emitted: {}
-      });
-      const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
-
-        const mapperState = mapperStateRef.value;
-        const config = configRef.value;
-        if (config.disableAnimation || config.isHydrating) {
-          updateMapperState(mapperStateRef, {});
-          return {};
-        }
-        const previouslyEmitted = mapperState.emitted;
-        const emitted = {};
-        const result = {};
-        const emitterSnapshot = emitterSnapshotRef.value;
-        const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
-        const animatedValues = snapshot.animated;
-        const staticValues = snapshot.statics;
-        const currentlyExiting = isExitingRef.value;
-        const currentCycleId = exitCycleIdShared.value;
-        const currentlyCompletingAnimation = isCompletingAnimationRef.value;
-        const currentDidAnimateCycleId = didAnimateCycleIdShared.value;
-        for (const key in staticValues) {
-          result[key] = staticValues[key];
-        }
-        for (const key in snapshot.removedKeys) {
-          if (!key.startsWith("transform:") && !(key in staticValues)) {
-            result[key] = snapshot.clearValue;
-          }
-        }
-        for (const key in animatedValues) {
-          if (key === "transform") continue;
-          const targetValue = animatedValues[key];
-          emitted[key] = true;
-          if (typeof targetValue !== "number" && typeof targetValue !== "string") {
-            result[key] = targetValue;
-            continue;
-          }
-          result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, !!COLOR_STYLE_KEYS[key]);
-        }
-        const transforms = snapshot.transforms;
-        if (transforms.length > 0 || snapshot.removeTransform) {
-          const validTransforms = [];
-          for (const t of transforms) {
-            if (!t) continue;
-            const keys = Object.keys(t);
-            if (keys.length === 0) continue;
-            const transformKey = keys[0];
-            const value = t[transformKey];
-            if (typeof value === "number" || typeof value === "string") {
-              const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
-              const subKey = `transform:${transformKey}`;
-              emitted[subKey] = true;
-              validTransforms.push({
-                [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone)
-              });
-            } else {
-              validTransforms.push(t);
-            }
-          }
-          if (validTransforms.length > 0 || !("transform" in staticValues)) {
-            result.transform = validTransforms;
-          }
-        }
-        updateMapperState(mapperStateRef, emitted);
-        return result;
-      }, isWeb ? [
-      // pass SharedValues so the stable mapper watches them on web (no babel plugin)
-      renderSnapshotRef, emitterSnapshotRef, configRef, isExitingRef, exitCycleIdShared, markExitKeyDone, isCompletingAnimationRef, didAnimateCycleIdShared, markDidAnimateKeyDone] : void 0);
-      silenceAnimatedComponentDevCheck(animatedStyle);
-      if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
-        console.info("[animations-reanimated] useAnimations", {
-          animationKey,
-          componentState,
-          isExiting,
-          animatedStyles,
-          staticStyles,
-          baseConfig,
-          propertyConfigs
-        });
-      }
-      return {
-        style: [staticStyles, animatedStyle]
-      };
-    }
-  };
+	const animations = {};
+	for (const key in animationsConfig) {
+		animations[key] = cloneTransitionConfig({
+			type: "spring",
+			...animationsConfig[key]
+		});
+	}
+	return {
+		needsCustomComponent: true,
+		View: isWeb ? AnimatedView : Animated.View,
+		Text: isWeb ? AnimatedText : Animated.Text,
+		isReactNative: true,
+		inputStyle: "value",
+		outputStyle: "inline",
+		avoidReRenders: true,
+		animations,
+		usePresence,
+		ResetPresence,
+		useAnimatedNumber(initial) {
+			const sharedValue = useSharedValue(initial);
+			return useMemo(() => ({
+				getInstance() {
+					"worklet";
+					return sharedValue;
+				},
+				getValue() {
+					"worklet";
+					return sharedValue.value;
+				},
+				setValue(next, config = { type: "spring" }, onFinish) {
+					if (config.type === "direct") {
+						sharedValue.value = next;
+						onFinish?.();
+					} else {
+						const cb = onFinish ? (finished) => {
+							"worklet";
+							if (finished !== false) {
+								runOnJS(onFinish)();
+							}
+						} : void 0;
+						const animationConfig = cloneTransitionConfig(config);
+						if (isWeb) {
+							sharedValue.value = applyAnimation(next, animationConfig, cb);
+						} else {
+							runOnUI((targetValue, animationConfig2) => {
+								"worklet";
+								sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
+							})(next, animationConfig);
+						}
+					}
+				},
+				stop() {
+					cancelAnimation(sharedValue);
+				}
+			}), [sharedValue]);
+		},
+		useAnimatedNumberReaction({ value }, onValue) {
+			const instance = value.getInstance();
+			return useAnimatedReaction(() => instance.value, (next, prev) => {
+				if (prev !== next) {
+					runOnJS(onValue)(next);
+				}
+			}, [onValue, instance]);
+		},
+		useAnimatedNumberStyle(val, getStyle) {
+			const instance = val.getInstance();
+			if (isWeb) {
+				return useAnimatedStyle(() => {
+					"worklet";
+					return getStyle(instance.value);
+				}, [instance, getStyle]);
+			}
+			const styleVal = useDerivedValue(() => {
+				"worklet";
+				return getStyle(instance.value);
+			});
+			const animatedStyle = useAnimatedStyle(() => {
+				"worklet";
+				return styleVal.value;
+			});
+			silenceAnimatedComponentDevCheck(animatedStyle);
+			return animatedStyle;
+		},
+		useAnimatedNumbersStyle(vals, getStyle) {
+			const instances = vals.map((v) => v.getInstance());
+			const animatedStyle = useAnimatedStyle(() => {
+				"worklet";
+				const currentValues = instances.map((inst) => inst.value);
+				return getStyle(...currentValues);
+			}, isWeb ? [getStyle, ...instances] : void 0);
+			silenceAnimatedComponentDevCheck(animatedStyle);
+			return animatedStyle;
+		},
+		useAnimations(animationProps) {
+			const { props, presence, style, componentState, useStyleEmitter, themeName, stateRef, styleState, onTransition } = animationProps;
+			const isHydrating = componentState.unmounted === true;
+			const isMounting = componentState.unmounted === "should-enter";
+			const isEntering = !!componentState.unmounted;
+			const isExiting = presence?.[0] === false;
+			const wasEnteringRef = useRef(isEntering);
+			const justFinishedEntering = wasEnteringRef.current && !isEntering;
+			React.useEffect(() => {
+				wasEnteringRef.current = isEntering;
+			});
+			const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
+			const normalized = normalizeTransition(effectiveTransition);
+			const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+			const animationKey = getEffectiveAnimation(normalized, animationState);
+			const disableAnimation = isHydrating || !animationKey;
+			const isDark = themeName?.startsWith("dark") || false;
+			const sendExitComplete = presence?.[1];
+			const onTransitionRef = useRef(onTransition);
+			onTransitionRef.current = onTransition;
+			const emit = (phase, cause, finished) => {
+				onTransitionRef.current?.(phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			const enterStartedRef = useRef(false);
+			const exitStartedRef = useRef(false);
+			const updateStartedRef = useRef(false);
+			const isExitingJSRef = useRef(false);
+			isExitingJSRef.current = isExiting;
+			const updateCycleIdRef = useRef(0);
+			const pendingUpdateKeysRef = useRef(/* @__PURE__ */ new Set());
+			const updateCompletedRef = useRef(false);
+			const isCompletingUpdateRef = useSharedValue(false);
+			const updateCycleIdShared = useSharedValue(0);
+			const markUpdateKeyDone = useEvent((key, cycleId, finished) => {
+				if (!finished || cycleId !== updateCycleIdRef.current) return;
+				if (updateCompletedRef.current) return;
+				pendingUpdateKeysRef.current.delete(key);
+				if (pendingUpdateKeysRef.current.size === 0) {
+					updateCompletedRef.current = true;
+					isCompletingUpdateRef.value = false;
+					if (updateStartedRef.current) {
+						updateStartedRef.current = false;
+						emit("end", "update", true);
+					}
+				}
+			});
+			const exitCycleIdRef = useRef(0);
+			const pendingExitKeysRef = useRef(/* @__PURE__ */ new Set());
+			const exitCompletedRef = useRef(false);
+			const wasExitingRef = useRef(false);
+			const justStartedExiting = isExiting && !wasExitingRef.current;
+			const justStoppedExiting = !isExiting && wasExitingRef.current;
+			const markExitKeyDone = useEvent((key, cycleId, finished) => {
+				if (cycleId !== exitCycleIdRef.current) return;
+				if (exitCompletedRef.current) return;
+				pendingExitKeysRef.current.delete(key);
+				if (pendingExitKeysRef.current.size === 0) {
+					exitCompletedRef.current = true;
+					if (exitStartedRef.current) {
+						exitStartedRef.current = false;
+						emit("end", "exit", true);
+					}
+					sendExitComplete?.();
+				}
+			});
+			const enterCycleIdRef = useRef(0);
+			const pendingEnterKeysRef = useRef(/* @__PURE__ */ new Set());
+			const enterCompletedRef = useRef(false);
+			const markEnterKeyDone = useEvent((key, cycleId) => {
+				if (cycleId !== enterCycleIdRef.current) return;
+				if (enterCompletedRef.current) return;
+				if (isExitingJSRef.current) return;
+				pendingEnterKeysRef.current.delete(key);
+				if (pendingEnterKeysRef.current.size === 0) {
+					enterCompletedRef.current = true;
+					if (enterStartedRef.current) {
+						enterStartedRef.current = false;
+						emit("end", "enter", true);
+					}
+				}
+			});
+			const isExitingRef = useSharedValue(isExiting);
+			const exitCycleIdShared = useSharedValue(exitCycleIdRef.current);
+			const isCompletingEnterRef = useSharedValue(false);
+			const enterCycleIdShared = useSharedValue(enterCycleIdRef.current);
+			if (justStartedExiting) {
+				exitCycleIdRef.current++;
+				exitCompletedRef.current = false;
+				pendingExitKeysRef.current.clear();
+				enterCycleIdRef.current++;
+				pendingEnterKeysRef.current.clear();
+				updateCycleIdRef.current++;
+				pendingUpdateKeysRef.current.clear();
+				updateCompletedRef.current = true;
+			}
+			if (justStoppedExiting) {
+				exitCycleIdRef.current++;
+				pendingExitKeysRef.current.clear();
+			}
+			useIsomorphicLayoutEffect(() => {
+				isExitingRef.value = isExiting;
+				exitCycleIdShared.value = exitCycleIdRef.current;
+				isCompletingEnterRef.value = !isExiting && justFinishedEntering && Boolean(onTransitionRef.current);
+				enterCycleIdShared.value = enterCycleIdRef.current;
+				if (justStartedExiting) {
+					isCompletingUpdateRef.value = false;
+					updateCycleIdShared.value = updateCycleIdRef.current;
+				}
+			}, [
+				isExiting,
+				justFinishedEntering,
+				exitCycleIdRef.current,
+				enterCycleIdRef.current,
+				justStartedExiting
+			]);
+			useIsomorphicLayoutEffect(() => {
+				if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
+					exitStartedRef.current = false;
+					emit("end", "exit", false);
+				}
+			}, [justStoppedExiting]);
+			React.useEffect(() => {
+				wasExitingRef.current = isExiting;
+			});
+			const committedRenderKeysRef = useRef(/* @__PURE__ */ new Set());
+			const lastPaintedRef = useRef({});
+			const carryRef = useRef({});
+			const { animatedStyles, staticStyles, nextCarry } = useMemo(() => {
+				const animateOnly = props.animateOnly;
+				const { animated, statics } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
+				const nextCarry2 = cloneStyleRecord(carryRef.current);
+				for (const key in nextCarry2) {
+					if (!(key in animated)) delete nextCarry2[key];
+				}
+				for (const key in animated) {
+					if (!(key in nextCarry2)) {
+						nextCarry2[key] = cloneAnimationValue(animated[key]);
+					}
+					statics[key] = nextCarry2[key];
+				}
+				return {
+					animatedStyles: animated,
+					staticStyles: statics,
+					nextCarry: nextCarry2
+				};
+			}, [
+				disableAnimation,
+				style,
+				isDark,
+				props.animateOnly
+			]);
+			const renderSnapshot = useMemo(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
+			const renderSnapshotRef = useSharedValue({
+				animated: {},
+				statics: {},
+				transforms: [],
+				gatedKeys: {},
+				seeds: {},
+				removedKeys: {},
+				removeTransform: false,
+				clearValue: isWeb ? "" : null
+			});
+			const emitterSnapshotRef = useSharedValue(null);
+			const emitterKeysRef = useRef(null);
+			useIsomorphicLayoutEffect(() => {
+				carryRef.current = nextCarry;
+				committedRenderKeysRef.current = renderSnapshot.keys;
+				lastPaintedRef.current = renderSnapshot.painted;
+			}, [nextCarry, renderSnapshot]);
+			const pseudoActiveRef = useRef(false);
+			const publishedSnapshotRef = useRef(null);
+			useIsomorphicLayoutEffect(() => {
+				const renderChanged = publishedSnapshotRef.current !== renderSnapshot.value;
+				const droppingLatch = (isExiting || !pseudoActiveRef.current && publishedSnapshotRef.current !== null && renderChanged) && emitterSnapshotRef.value !== null;
+				const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
+				if (droppingLatch || renderChanged) {
+					const removedKeys = emitterKeys ? {
+						...renderSnapshot.value.removedKeys,
+						...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
+					} : renderSnapshot.value.removedKeys;
+					renderSnapshotRef.value = {
+						...renderSnapshot.value,
+						removedKeys,
+						removeTransform: Object.keys(removedKeys).some((key) => key.startsWith("transform:"))
+					};
+					publishedSnapshotRef.current = renderSnapshot.value;
+				}
+				if (droppingLatch) {
+					emitterSnapshotRef.value = null;
+					emitterKeysRef.current = null;
+				}
+			});
+			const { baseConfig, propertyConfigs } = useMemo(() => {
+				if (isHydrating) {
+					return {
+						baseConfig: {
+							type: "timing",
+							duration: 0
+						},
+						propertyConfigs: {}
+					};
+				}
+				return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
+			}, [
+				isHydrating,
+				effectiveTransition,
+				animatedStyles,
+				animationState
+			]);
+			const configRef = useSharedValue({
+				baseConfig,
+				propertyConfigs,
+				disableAnimation,
+				isHydrating
+			});
+			useIsomorphicLayoutEffect(() => {
+				configRef.value = {
+					baseConfig,
+					propertyConfigs,
+					disableAnimation,
+					isHydrating
+				};
+			}, [
+				baseConfig,
+				propertyConfigs,
+				disableAnimation,
+				isHydrating
+			]);
+			useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
+				if (isExitingJSRef.current) return;
+				pseudoActiveRef.current = pseudoActive === true;
+				const animateOnly = props.animateOnly;
+				const transitionToUse = effectiveTransition2 ?? props.transition;
+				const { baseConfig: newBase, propertyConfigs: newPropertyConfigs } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
+				configRef.value = {
+					baseConfig: newBase,
+					propertyConfigs: newPropertyConfigs,
+					disableAnimation: configRef.value.disableAnimation,
+					isHydrating: configRef.value.isHydrating
+				};
+				const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
+				const { animated, statics } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
+				const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
+				emitterSnapshotRef.value = snapshot.value;
+				emitterKeysRef.current = snapshot.keys;
+				lastPaintedRef.current = snapshot.painted;
+				if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
+					console.info("[animations-reanimated] useStyleEmitter update", {
+						animated,
+						statics,
+						transforms: snapshot.value.transforms
+					});
+				}
+			});
+			const exitKeysRegistered = useRef(false);
+			const enterKeysRegistered = useRef(false);
+			if (!isExiting && justFinishedEntering && onTransition) {
+				const enterKeys = getGatedKeys(renderSnapshot.value);
+				enterCycleIdRef.current++;
+				enterCompletedRef.current = false;
+				pendingEnterKeysRef.current = new Set(enterKeys);
+				enterKeysRegistered.current = enterKeys.length > 0;
+			}
+			if (justStartedExiting && sendExitComplete) {
+				const exitKeys = getGatedKeys(renderSnapshot.value);
+				pendingExitKeysRef.current = new Set(exitKeys);
+				exitKeysRegistered.current = exitKeys.length > 0;
+			}
+			const previousUpdateStyleRef = useRef(null);
+			const updateStyle = onTransition ? JSON.stringify(style) : null;
+			const previousUpdateStyle = previousUpdateStyleRef.current;
+			const shouldRegisterUpdate = updateStyle !== null && previousUpdateStyle !== null && previousUpdateStyle !== updateStyle && !isExiting && !isEntering && !justFinishedEntering;
+			const updateKeys = shouldRegisterUpdate ? getGatedKeys(renderSnapshot.value) : [];
+			useIsomorphicLayoutEffect(() => {
+				if (updateStyle === null) {
+					previousUpdateStyleRef.current = null;
+					isCompletingUpdateRef.value = false;
+					return;
+				}
+				const previousStyleStillCurrent = previousUpdateStyleRef.current === previousUpdateStyle;
+				previousUpdateStyleRef.current = updateStyle;
+				if (!shouldRegisterUpdate || !previousStyleStillCurrent) return;
+				const cycleId = ++updateCycleIdRef.current;
+				pendingUpdateKeysRef.current = new Set(updateKeys);
+				updateCompletedRef.current = updateKeys.length === 0;
+				isCompletingUpdateRef.value = updateKeys.length > 0;
+				updateCycleIdShared.value = cycleId;
+				if (updateStartedRef.current) {
+					emit("end", "update", false);
+				}
+				updateStartedRef.current = true;
+				emit("start", "update");
+				if (updateKeys.length === 0) {
+					updateStartedRef.current = false;
+					emit("end", "update", true);
+				}
+			}, [updateStyle, shouldRegisterUpdate]);
+			React.useEffect(() => {
+				if (!justStartedExiting || !sendExitComplete) return;
+				if (enterStartedRef.current) {
+					enterStartedRef.current = false;
+					emit("end", "enter", false);
+				}
+				if (updateStartedRef.current) {
+					updateStartedRef.current = false;
+					emit("end", "update", false);
+				}
+				if (onTransitionRef.current && !exitStartedRef.current) {
+					exitStartedRef.current = true;
+					emit("start", "exit");
+				}
+				if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
+					if (!exitCompletedRef.current) {
+						exitCompletedRef.current = true;
+						if (exitStartedRef.current) {
+							exitStartedRef.current = false;
+							emit("end", "exit", true);
+						}
+						sendExitComplete();
+					}
+				}
+			}, [justStartedExiting, sendExitComplete]);
+			React.useEffect(() => {
+				if (isExiting || !justFinishedEntering || !onTransition) return;
+				if (!enterStartedRef.current) {
+					enterStartedRef.current = true;
+					emit("start", "enter");
+				}
+				if (!enterKeysRegistered.current && pendingEnterKeysRef.current.size === 0) {
+					if (!enterCompletedRef.current) {
+						enterCompletedRef.current = true;
+						if (enterStartedRef.current) {
+							enterStartedRef.current = false;
+							emit("end", "enter", true);
+						}
+					}
+				}
+			}, [
+				isExiting,
+				justFinishedEntering,
+				onTransition
+			]);
+			const mapperStateRef = useSharedValue({ emitted: {} });
+			const animatedStyle = useAnimatedStyle(() => {
+				"worklet";
+				const mapperState = mapperStateRef.value;
+				const config = configRef.value;
+				if (config.disableAnimation || config.isHydrating) {
+					updateMapperState(mapperStateRef, {});
+					return {};
+				}
+				const previouslyEmitted = mapperState.emitted;
+				const emitted = {};
+				const result = {};
+				const emitterSnapshot = emitterSnapshotRef.value;
+				const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
+				const animatedValues = snapshot.animated;
+				const staticValues = snapshot.statics;
+				const currentlyExiting = isExitingRef.value;
+				const currentCycleId = exitCycleIdShared.value;
+				const currentlyCompletingEnter = isCompletingEnterRef.value;
+				const currentEnterCycleId = enterCycleIdShared.value;
+				const currentlyCompletingUpdate = isCompletingUpdateRef.value;
+				const currentUpdateCycleId = updateCycleIdShared.value;
+				for (const key in staticValues) {
+					result[key] = staticValues[key];
+				}
+				for (const key in snapshot.removedKeys) {
+					if (!key.startsWith("transform:") && !(key in staticValues)) {
+						result[key] = snapshot.clearValue;
+					}
+				}
+				for (const key in animatedValues) {
+					if (key === "transform") continue;
+					const targetValue = animatedValues[key];
+					emitted[key] = true;
+					if (typeof targetValue !== "number" && typeof targetValue !== "string") {
+						result[key] = targetValue;
+						continue;
+					}
+					result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingEnter, currentEnterCycleId, currentlyCompletingUpdate, currentUpdateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, !!COLOR_STYLE_KEYS[key]);
+				}
+				const transforms = snapshot.transforms;
+				if (transforms.length > 0 || snapshot.removeTransform) {
+					const validTransforms = [];
+					for (const t of transforms) {
+						if (!t) continue;
+						const keys = Object.keys(t);
+						if (keys.length === 0) continue;
+						const transformKey = keys[0];
+						const value = t[transformKey];
+						if (typeof value === "number" || typeof value === "string") {
+							const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
+							const subKey = `transform:${transformKey}`;
+							emitted[subKey] = true;
+							validTransforms.push({ [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingEnter, currentEnterCycleId, currentlyCompletingUpdate, currentUpdateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone) });
+						} else {
+							validTransforms.push(t);
+						}
+					}
+					if (validTransforms.length > 0 || !("transform" in staticValues)) {
+						result.transform = validTransforms;
+					}
+				}
+				updateMapperState(mapperStateRef, emitted);
+				return result;
+			}, isWeb ? [
+				renderSnapshotRef,
+				emitterSnapshotRef,
+				configRef,
+				isExitingRef,
+				exitCycleIdShared,
+				markExitKeyDone,
+				isCompletingEnterRef,
+				enterCycleIdShared,
+				markEnterKeyDone,
+				isCompletingUpdateRef,
+				updateCycleIdShared,
+				markUpdateKeyDone
+			] : void 0);
+			silenceAnimatedComponentDevCheck(animatedStyle);
+			if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
+				console.info("[animations-reanimated] useAnimations", {
+					animationKey,
+					componentState,
+					isExiting,
+					animatedStyles,
+					staticStyles,
+					baseConfig,
+					propertyConfigs
+				});
+			}
+			return { style: [staticStyles, animatedStyle] };
+		}
+	};
 }
+
 export { createAnimations };
 //# sourceMappingURL=createAnimations.mjs.map