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

package/dist/motion/Pressable.mjs

@@ -1,6 +1,6 @@
 import { Platform, TurboModuleRegistry, Pressable } from 'react-native';
-import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext } from 'react';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, useReducedMotion, withSequence, LinearTransition, runOnJS as runOnJS$1, withRepeat, withDelay, withDecay, withTiming, Easing, withSpring } from 'react-native-reanimated';
+import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, useCallback } from 'react';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, useReducedMotion, withSequence, LinearTransition, runOnJS as runOnJS$1, withRepeat, withTiming, withSpring, withDelay, withDecay, Easing } from 'react-native-reanimated';
 import { jsx } from 'react/jsx-runtime';
 
 var __typeError = (msg) => {
@@ -1201,8 +1201,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 {
@@ -1496,6 +1496,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);
@@ -1784,10 +1935,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();
@@ -1961,6 +2119,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;
@@ -2009,7 +2176,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 };
       }
@@ -2036,9 +2209,10 @@ function createMotionComponent(Component) {
     return /* @__PURE__ */ jsx(
       AnimatedComponent,
       {
-        ref,
+        ref: sharedLayout.setRef,
         ...rest,
         ...gestureHandlers,
+        onLayout: sharedLayout.onLayout,
         layout: layoutTransition,
         style: mergedStyle
       }