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

package/dist/motion/Text.d.mts

@@ -1,5 +1,5 @@
 import { Text } from 'react-native';
-import { M as MotionComponent } from '../types-NmNeJjo1.mjs';
+import { M as MotionComponent } from '../types-BwyvoH2V.mjs';
 import 'react';
 
 /**

package/dist/motion/Text.d.ts

@@ -1,5 +1,5 @@
 import { Text } from 'react-native';
-import { M as MotionComponent } from '../types-NmNeJjo1.js';
+import { M as MotionComponent } from '../types-BwyvoH2V.js';
 import 'react';
 
 /**

package/dist/motion/Text.js

@@ -1207,8 +1207,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 {
@@ -1502,6 +1502,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 = Animated.useSharedValue(0);
+  const dy = Animated.useSharedValue(0);
+  const sx = Animated.useSharedValue(1);
+  const sy = Animated.useSharedValue(1);
+  const lastRectRef = react.useRef(null);
+  const consumedRef = react.useRef(false);
+  const transitionRef = react.useRef(transition);
+  transitionRef.current = transition;
+  const reducedMotionRef = react.useRef(shouldReduceMotion);
+  reducedMotionRef.current = shouldReduceMotion;
+  const setRef = react.useCallback(
+    (node) => {
+      if (typeof userRef === "function") userRef(node);
+      else if (userRef) userRef.current = node;
+    },
+    [userRef]
+  );
+  const onLayout = react.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]
+  );
+  react.useEffect(() => {
+    consumedRef.current = false;
+  }, [layoutId]);
+  react.useEffect(() => {
+    return () => {
+      if (!layoutId) return;
+      const rect = lastRectRef.current;
+      if (!rect) return;
+      releaseLayout(layoutId, rect);
+    };
+  }, [layoutId]);
+  return react.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 = Animated.withSequence(
+      Animated.withTiming(deltaX, { duration: 0 }),
+      Animated.withTiming(0, { duration })
+    );
+    dy.value = Animated.withSequence(
+      Animated.withTiming(deltaY, { duration: 0 }),
+      Animated.withTiming(0, { duration })
+    );
+    sx.value = Animated.withSequence(
+      Animated.withTiming(scaleX, { duration: 0 }),
+      Animated.withTiming(1, { duration })
+    );
+    sy.value = Animated.withSequence(
+      Animated.withTiming(scaleY, { duration: 0 }),
+      Animated.withTiming(1, { duration })
+    );
+    return;
+  }
+  const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
+  const springParams = springToReanimated(springCfg);
+  dx.value = Animated.withSequence(
+    Animated.withTiming(deltaX, { duration: 0 }),
+    Animated.withSpring(0, springParams)
+  );
+  dy.value = Animated.withSequence(
+    Animated.withTiming(deltaY, { duration: 0 }),
+    Animated.withSpring(0, springParams)
+  );
+  sx.value = Animated.withSequence(
+    Animated.withTiming(scaleX, { duration: 0 }),
+    Animated.withSpring(1, springParams)
+  );
+  sy.value = Animated.withSequence(
+    Animated.withTiming(scaleY, { duration: 0 }),
+    Animated.withSpring(1, springParams)
+  );
+}
 var PresenceContext = react.createContext(null);
 function usePresence() {
   return react.useContext(PresenceContext);
@@ -1790,10 +1941,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();
@@ -1967,6 +2125,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 = Animated.useAnimatedStyle(() => {
       const activeKeys = activeKeysRef.current;
       const hasTransform = hasTransformRef.current;
@@ -2015,7 +2182,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 };
       }
@@ -2042,9 +2215,10 @@ function createMotionComponent(Component) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       AnimatedComponent,
       {
-        ref,
+        ref: sharedLayout.setRef,
         ...rest,
         ...gestureHandlers,
+        onLayout: sharedLayout.onLayout,
         layout: layoutTransition,
         style: mergedStyle
       }