@onlynative/inertia 0.0.1-alpha.7 → 0.0.1-alpha.8

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { Platform, TurboModuleRegistry, Image, Pressable, ScrollView, Text, View } from 'react-native';
-import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, Children, isValidElement, useCallback } from 'react';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, useReducedMotion, withSequence, LinearTransition, runOnJS as runOnJS$1, withRepeat, withDelay, withDecay, withTiming, Easing, withSpring, useAnimatedReaction, useDerivedValue, Extrapolation, useAnimatedScrollHandler, interpolate } from 'react-native-reanimated';
+import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, useCallback, Children, isValidElement } from 'react';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, useReducedMotion, withSequence, LinearTransition, runOnJS as runOnJS$1, withRepeat, withTiming, withSpring, withDelay, withDecay, Easing, useAnimatedReaction, useDerivedValue, Extrapolation, useAnimatedScrollHandler, interpolate } from 'react-native-reanimated';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var __typeError = (msg) => {
@@ -1211,8 +1211,8 @@ function setupSetTimeout() {
     const start = performance.now();
     let timeoutHandle = 0;
     const rafCallback = () => {
-      const now = performance.now();
-      if (now - start >= delay) {
+      const now2 = performance.now();
+      if (now2 - start >= delay) {
         callback(...args);
         timeoutHandleToRafHandle.delete(timeoutHandle);
       } else {
@@ -1506,6 +1506,157 @@ function resolveLayoutTransition(layout) {
   if ("delay" in spring && spring.delay) builder = builder.delay(spring.delay);
   return builder;
 }
+
+// src/layout/sharedRegistry.ts
+var REGISTRY = /* @__PURE__ */ new Map();
+var SHARED_LAYOUT_TTL_MS = 1e3;
+var now = () => Date.now();
+function registerLayout(id, rect) {
+  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+}
+function releaseLayout(id, rect) {
+  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+}
+function consumeLayout(id) {
+  const entry = REGISTRY.get(id);
+  if (!entry) return void 0;
+  REGISTRY.delete(id);
+  if (entry.expiresAt < now()) return void 0;
+  return entry.rect;
+}
+function useSharedLayout(options) {
+  const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
+  const dx = useSharedValue(0);
+  const dy = useSharedValue(0);
+  const sx = useSharedValue(1);
+  const sy = useSharedValue(1);
+  const lastRectRef = useRef(null);
+  const consumedRef = useRef(false);
+  const transitionRef = useRef(transition);
+  transitionRef.current = transition;
+  const reducedMotionRef = useRef(shouldReduceMotion);
+  reducedMotionRef.current = shouldReduceMotion;
+  const setRef = useCallback(
+    (node) => {
+      if (typeof userRef === "function") userRef(node);
+      else if (userRef) userRef.current = node;
+    },
+    [userRef]
+  );
+  const onLayout = useCallback(
+    (event) => {
+      userOnLayout?.(event);
+      if (!layoutId) return;
+      const { x, y, width, height } = event.nativeEvent.layout;
+      const rect = { x, y, width, height };
+      lastRectRef.current = rect;
+      let source;
+      if (!consumedRef.current) {
+        consumedRef.current = true;
+        source = consumeLayout(layoutId);
+      }
+      registerLayout(layoutId, rect);
+      if (source) {
+        applyFlip({
+          source,
+          target: rect,
+          dx,
+          dy,
+          sx,
+          sy,
+          transition: transitionRef.current,
+          shouldReduceMotion: reducedMotionRef.current
+        });
+      }
+    },
+    // dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
+    // exhaustive-deps would flag them — including them is harmless and
+    // silences the warning.
+    [layoutId, userOnLayout, dx, dy, sx, sy]
+  );
+  useEffect(() => {
+    consumedRef.current = false;
+  }, [layoutId]);
+  useEffect(() => {
+    return () => {
+      if (!layoutId) return;
+      const rect = lastRectRef.current;
+      if (!rect) return;
+      releaseLayout(layoutId, rect);
+    };
+  }, [layoutId]);
+  return useMemo(
+    () => ({
+      flip: { dx, dy, sx, sy },
+      setRef,
+      onLayout
+    }),
+    [dx, dy, sx, sy, setRef, onLayout]
+  );
+}
+function applyFlip(args) {
+  const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
+  const sourceCenterX = source.x + source.width / 2;
+  const sourceCenterY = source.y + source.height / 2;
+  const targetCenterX = target.x + target.width / 2;
+  const targetCenterY = target.y + target.height / 2;
+  const deltaX = sourceCenterX - targetCenterX;
+  const deltaY = sourceCenterY - targetCenterY;
+  const scaleX = target.width > 0 ? source.width / target.width : 1;
+  const scaleY = target.height > 0 ? source.height / target.height : 1;
+  if (shouldReduceMotion) {
+    dx.value = 0;
+    dy.value = 0;
+    sx.value = 1;
+    sy.value = 1;
+    return;
+  }
+  if (transition?.type === "no-animation") {
+    dx.value = 0;
+    dy.value = 0;
+    sx.value = 1;
+    sy.value = 1;
+    return;
+  }
+  if (transition?.type === "timing") {
+    const duration = transition.duration ?? 300;
+    dx.value = withSequence(
+      withTiming(deltaX, { duration: 0 }),
+      withTiming(0, { duration })
+    );
+    dy.value = withSequence(
+      withTiming(deltaY, { duration: 0 }),
+      withTiming(0, { duration })
+    );
+    sx.value = withSequence(
+      withTiming(scaleX, { duration: 0 }),
+      withTiming(1, { duration })
+    );
+    sy.value = withSequence(
+      withTiming(scaleY, { duration: 0 }),
+      withTiming(1, { duration })
+    );
+    return;
+  }
+  const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
+  const springParams = springToReanimated(springCfg);
+  dx.value = withSequence(
+    withTiming(deltaX, { duration: 0 }),
+    withSpring(0, springParams)
+  );
+  dy.value = withSequence(
+    withTiming(deltaY, { duration: 0 }),
+    withSpring(0, springParams)
+  );
+  sx.value = withSequence(
+    withTiming(scaleX, { duration: 0 }),
+    withSpring(1, springParams)
+  );
+  sy.value = withSequence(
+    withTiming(scaleY, { duration: 0 }),
+    withSpring(1, springParams)
+  );
+}
 var PresenceContext = createContext(null);
 function usePresence() {
   return useContext(PresenceContext);
@@ -1907,10 +2058,17 @@ function createMotionComponent(Component) {
       controller,
       gesture,
       layout,
+      layoutId,
       onAnimationEnd,
       style,
+      onLayout: userOnLayout,
       ...rest
     } = props;
+    if (__DEV__ && typeof style === "function") {
+      throw new Error(
+        "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
+      );
+    }
     const presence = usePresence();
     const isExiting = presence !== null && presence.isPresent === false;
     const shouldReduceMotion = useShouldReduceMotion();
@@ -2084,6 +2242,15 @@ function createMotionComponent(Component) {
       isExiting,
       shouldReduceMotion
     );
+    const sharedLayout = useSharedLayout({
+      layoutId,
+      userRef: ref,
+      transition: isTopLevelTransition(transition) ? transition : void 0,
+      shouldReduceMotion,
+      userOnLayout
+    });
+    const flip = sharedLayout.flip;
+    const hasLayoutId = layoutId !== void 0;
     const animatedStyle = useAnimatedStyle(() => {
       const activeKeys = activeKeysRef.current;
       const hasTransform = hasTransformRef.current;
@@ -2132,7 +2299,13 @@ function createMotionComponent(Component) {
           out[key] = v;
         }
       }
-      if (hasTransform) out.transform = transform;
+      if (hasLayoutId) {
+        transform.push({ translateX: flip.dx.value });
+        transform.push({ translateY: flip.dy.value });
+        transform.push({ scaleX: flip.sx.value });
+        transform.push({ scaleY: flip.sy.value });
+      }
+      if (hasTransform || hasLayoutId) out.transform = transform;
       if (hasShadowOffset) {
         out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
       }
@@ -2159,9 +2332,10 @@ function createMotionComponent(Component) {
     return /* @__PURE__ */ jsx(
       AnimatedComponent,
       {
-        ref,
+        ref: sharedLayout.setRef,
         ...rest,
         ...gestureHandlers,
+        onLayout: sharedLayout.onLayout,
         layout: layoutTransition,
         style: mergedStyle
       }
@@ -2490,6 +2664,57 @@ function useAnimation(target, transition) {
   }, [target, cfgSig, shouldReduceMotion]);
   return output;
 }
+function useSpring(target, config) {
+  const reanimConfig = useMemo(
+    () => springToReanimated(config ?? {}),
+    [
+      config?.tension,
+      config?.friction,
+      config?.mass,
+      config?.velocity,
+      config?.restSpeedThreshold,
+      config?.restDisplacementThreshold
+    ]
+  );
+  const isSharedTarget = isSharedValue(target);
+  const initial = isSharedTarget ? target.value : target;
+  const output = useSharedValue(initial);
+  useEffect(() => {
+    if (isSharedTarget) return;
+    output.value = withSpring(target, reanimConfig);
+  }, [isSharedTarget, target, reanimConfig]);
+  useAnimatedReaction(
+    () => {
+      "worklet";
+      if (!isSharedTarget) return null;
+      return target.value;
+    },
+    (next, prev) => {
+      "worklet";
+      if (next === null || next === prev) return;
+      output.value = withSpring(next, reanimConfig);
+    },
+    [isSharedTarget, reanimConfig]
+  );
+  return output;
+}
+function isSharedValue(v) {
+  return typeof v === "object" && v !== null && "value" in v;
+}
+
+// src/values/useBooleanSpring.ts
+function useBooleanSpring(active, springConfig) {
+  return useSpring(active ? 1 : 0, springConfig);
+}
+function useColorTransition(progress, range, options) {
+  const key = options?.key ?? "backgroundColor";
+  const from = range[0];
+  const to = range[1];
+  return useAnimatedStyle(() => {
+    "worklet";
+    return { [key]: interpolateColor(progress.value, [0, 1], [from, to]) };
+  });
+}
 function useGesture(transition) {
   const pressed = useSharedValue(0);
   const focused = useSharedValue(0);
@@ -2537,43 +2762,6 @@ function layerTransition(layer, transition) {
 function useMotionValue(initial) {
   return useSharedValue(initial);
 }
-function useSpring(target, config) {
-  const reanimConfig = useMemo(
-    () => springToReanimated(config ?? {}),
-    [
-      config?.tension,
-      config?.friction,
-      config?.mass,
-      config?.velocity,
-      config?.restSpeedThreshold,
-      config?.restDisplacementThreshold
-    ]
-  );
-  const isSharedTarget = isSharedValue(target);
-  const initial = isSharedTarget ? target.value : target;
-  const output = useSharedValue(initial);
-  useEffect(() => {
-    if (isSharedTarget) return;
-    output.value = withSpring(target, reanimConfig);
-  }, [isSharedTarget, target, reanimConfig]);
-  useAnimatedReaction(
-    () => {
-      "worklet";
-      if (!isSharedTarget) return null;
-      return target.value;
-    },
-    (next, prev) => {
-      "worklet";
-      if (next === null || next === prev) return;
-      output.value = withSpring(next, reanimConfig);
-    },
-    [isSharedTarget, reanimConfig]
-  );
-  return output;
-}
-function isSharedValue(v) {
-  return typeof v === "object" && v !== null && "value" in v;
-}
 function useTransform(arg1, inputRange, outputRange, options) {
   let producer;
   if (typeof arg1 === "function") {
@@ -2629,6 +2817,53 @@ function useScroll() {
     onScroll: handler
   };
 }
+function useShadow({
+  from,
+  to,
+  progress
+}) {
+  const hasOpacity = from.shadowOpacity !== void 0 || to.shadowOpacity !== void 0;
+  const hasRadius = from.shadowRadius !== void 0 || to.shadowRadius !== void 0;
+  const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
+  const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
+  const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
+  const opacityFrom = from.shadowOpacity ?? 0;
+  const opacityTo = to.shadowOpacity ?? 0;
+  const radiusFrom = from.shadowRadius ?? 0;
+  const radiusTo = to.shadowRadius ?? 0;
+  const elevationFrom = from.elevation ?? 0;
+  const elevationTo = to.elevation ?? 0;
+  const colorFrom = from.shadowColor ?? "transparent";
+  const colorTo = to.shadowColor ?? "transparent";
+  const offsetWFrom = from.shadowOffset?.width ?? 0;
+  const offsetWTo = to.shadowOffset?.width ?? 0;
+  const offsetHFrom = from.shadowOffset?.height ?? 0;
+  const offsetHTo = to.shadowOffset?.height ?? 0;
+  return useAnimatedStyle(() => {
+    "worklet";
+    const t = progress.value;
+    const out = {};
+    if (hasOpacity) {
+      out.shadowOpacity = interpolate(t, [0, 1], [opacityFrom, opacityTo]);
+    }
+    if (hasRadius) {
+      out.shadowRadius = interpolate(t, [0, 1], [radiusFrom, radiusTo]);
+    }
+    if (hasElevation) {
+      out.elevation = interpolate(t, [0, 1], [elevationFrom, elevationTo]);
+    }
+    if (hasColor) {
+      out.shadowColor = interpolateColor(t, [0, 1], [colorFrom, colorTo]);
+    }
+    if (hasOffset) {
+      out.shadowOffset = {
+        width: interpolate(t, [0, 1], [offsetWFrom, offsetWTo]),
+        height: interpolate(t, [0, 1], [offsetHFrom, offsetHTo])
+      };
+    }
+    return out;
+  });
+}
 function useVariants(variants, initial) {
   const variantsRef = useRef(variants);
   return useMemo(() => {
@@ -2662,6 +2897,6 @@ function useVariants(variants, initial) {
   }, []);
 }
 
-export { Motion, MotionConfig, MotionImage, MotionPressable, MotionScrollView, MotionText, MotionView, Presence, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { Motion, MotionConfig, MotionImage, MotionPressable, MotionScrollView, MotionText, MotionView, Presence, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map