react-native-smooth-clip-view 0.4.6 → 0.5.1

package/src/geometry.ts

@@ -53,6 +53,17 @@ export type CanonicalClipGeometry = Readonly<{
   curve: ClipCurve;
 }>;
 
+/**
+ * Translation, in host points, of every `SmoothClipBackdropView` bound to the
+ * clip's controller. It rides the same native run and `setFrame` stream as
+ * the aperture, so content that must stay locked to the window (a canvas
+ * centred in it) is sampled by the same clock as the clip.
+ */
+export type ClipBackdrop = Readonly<{
+  translateX: number;
+  translateY: number;
+}>;
+
 export type SmoothClipPresentation = Readonly<{
   clip: ClipGeometry;
   contentTranslateX: number;
@@ -64,6 +75,8 @@ export type SmoothClipPresentation = Readonly<{
   /** Opacity of the complete clipped object; defaults to 1. */
   opacity?: number;
   boxShadow?: ClipBoxShadow;
+  /** Defaults to no translation when omitted. */
+  backdrop?: ClipBackdrop;
 }>;
 
 export type CanonicalSmoothClipPresentation = Readonly<{
@@ -74,6 +87,7 @@ export type CanonicalSmoothClipPresentation = Readonly<{
   rotation: `${number}rad`;
   opacity: number;
   boxShadow?: CanonicalClipBoxShadow;
+  backdrop: ClipBackdrop;
 }>;
 
 /** Numeric native angle. Invalid input remains NaN for atomic validation. */
@@ -96,6 +110,19 @@ function resolvedOpacity(presentation: SmoothClipPresentation): number {
 }
 
 const DEFAULT_SHADOW_COLOR = '#000000ff';
+const NO_BACKDROP: ClipBackdrop = { translateX: 0, translateY: 0 };
+
+function resolvedBackdrop(presentation: SmoothClipPresentation): ClipBackdrop {
+  'worklet';
+  return presentation.backdrop ?? NO_BACKDROP;
+}
+
+function isFiniteBackdrop(backdrop: ClipBackdrop): boolean {
+  'worklet';
+  return (
+    Number.isFinite(backdrop.translateX) && Number.isFinite(backdrop.translateY)
+  );
+}
 
 function isClipCurve(curve: ClipCurve | undefined): boolean {
   'worklet';
@@ -247,6 +274,7 @@ export function isFiniteClipPresentation(
     contentScale > 0 &&
     Number.isFinite(rotationRadians(presentation.rotation)) &&
     Number.isFinite(presentation.opacity ?? 1) &&
+    isFiniteBackdrop(resolvedBackdrop(presentation)) &&
     shadow !== null
   );
 }
@@ -264,6 +292,10 @@ export function clipPresentationEquals(
     resolvedContentScale(first) === resolvedContentScale(second) &&
     rotationRadians(first.rotation) === rotationRadians(second.rotation) &&
     resolvedOpacity(first) === resolvedOpacity(second) &&
+    resolvedBackdrop(first).translateX ===
+      resolvedBackdrop(second).translateX &&
+    resolvedBackdrop(first).translateY ===
+      resolvedBackdrop(second).translateY &&
     clipBoxShadowEquals(first.boxShadow, second.boxShadow)
   );
 }
@@ -340,25 +372,47 @@ export function canonicalizeClipGeometry(
   );
 }
 
+/**
+ * Validates and canonicalizes in one pass: this runs on the UI runtime for
+ * every `setFrame` of a drag, so the geometry is checked once, the shadow
+ * colour is parsed once and the rotation is parsed once. The result is null
+ * exactly when `isFiniteClipPresentation` is false.
+ */
 export function canonicalizeClipPresentation(
   presentation: SmoothClipPresentation
 ): CanonicalSmoothClipPresentation | null {
   'worklet';
-  if (!isFiniteClipPresentation(presentation)) return null;
-
   const clip = canonicalizeClipGeometry(presentation.clip);
   if (clip === null) return null;
   const boxShadow = canonicalizeClipBoxShadow(presentation.boxShadow);
   if (boxShadow === null) return null;
+  const contentScale = resolvedContentScale(presentation);
+  const rotation = rotationRadians(presentation.rotation);
+  const backdrop = resolvedBackdrop(presentation);
+  if (
+    !Number.isFinite(presentation.contentTranslateX) ||
+    !Number.isFinite(presentation.contentTranslateY) ||
+    !Number.isFinite(contentScale) ||
+    contentScale <= 0 ||
+    !Number.isFinite(rotation) ||
+    !Number.isFinite(presentation.opacity ?? 1) ||
+    !isFiniteBackdrop(backdrop)
+  ) {
+    return null;
+  }
 
   return {
     clip,
     contentTranslateX: presentation.contentTranslateX,
     contentTranslateY: presentation.contentTranslateY,
-    contentScale: resolvedContentScale(presentation),
-    rotation: `${rotationRadians(presentation.rotation)}rad`,
+    contentScale,
+    rotation: `${rotation}rad`,
     opacity: resolvedOpacity(presentation),
     ...(boxShadow === undefined ? {} : { boxShadow }),
+    backdrop:
+      backdrop === NO_BACKDROP
+        ? NO_BACKDROP
+        : { translateX: backdrop.translateX, translateY: backdrop.translateY },
   };
 }
 
@@ -394,6 +448,7 @@ export function createClipPresentation(
     contentScale,
     rotation: '0rad',
     opacity: 1,
+    backdrop: NO_BACKDROP,
     ...(canonicalShadow === undefined
       ? {}
       : {

package/src/groups.native.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-import { Platform } from 'react-native';
 import { scheduleOnRN, scheduleOnUI } from 'react-native-worklets';
 import type {
   ClipReduceMotion,
@@ -44,7 +43,6 @@ const cancelAnimationGroupHostFunction =
 
 const SNAPSHOT_STRIDE = PRESENTATION_STRIDE + 1;
 const MOTION_ENTRY_STRIDE = PRESENTATION_STRIDE * 2 + 2;
-const NEEDS_START_STAMP = Platform.OS === 'android';
 const DEFAULT_MASS = 4;
 const DEFAULT_STIFFNESS = 900;
 const DEFAULT_DAMPING = 120;
@@ -177,9 +175,17 @@ function reduceMotionCode(value: ClipReduceMotion | undefined): number {
   return 0;
 }
 
+/**
+ * The Reanimated frame stamp (`__frameTimestamp`, milliseconds) when the run
+ * starts inside a UI frame, else the animation clock. Both platforms anchor
+ * the native run to it: the Android frame loop advances from it, and iOS uses
+ * it as the shared Core Animation `beginTime`. A run and a `withTiming` begun
+ * in the same UI frame therefore share one epoch. Reanimated stamps a frame
+ * with the display link's target vsync, so an install-time
+ * `CACurrentMediaTime()` would put the native run about one frame ahead.
+ */
 function startTimestamp(): number {
   'worklet';
-  if (!NEEDS_START_STAMP) return Number.NaN;
   const runtime = globalThis as {
     __frameTimestamp?: number;
     _getAnimationTimestamp?: () => number;

package/src/index.ts

@@ -1,5 +1,10 @@
 export { SmoothClipView } from './SmoothClipView';
-export type { SmoothClipViewProps } from './SmoothClipView';
+export type {
+  SmoothClipShadowRendering,
+  SmoothClipViewProps,
+} from './SmoothClipView';
+export { SmoothClipBackdropView } from './SmoothClipBackdropView';
+export type { SmoothClipBackdropViewProps } from './SmoothClipBackdropView';
 export { useSmoothClipController } from './controllers';
 export { useSmoothClipGroup } from './groups';
 export { getSmoothClipCapabilities } from './capabilities';
@@ -36,6 +41,7 @@ export type {
   CanonicalClipGeometry,
   CanonicalClipBoxShadow,
   CanonicalSmoothClipPresentation,
+  ClipBackdrop,
   ClipCurve,
   ClipRotation,
   ClipGeometry,

package/src/presentationCodec.ts

@@ -5,7 +5,7 @@ import type { CanonicalSmoothClipPresentation } from './geometry';
  * Versionless native packet layout. Keep this as the single JS codec used by
  * drivers, groups, snapshots, and cancellation.
  */
-export const PRESENTATION_STRIDE = 23;
+export const PRESENTATION_STRIDE = 25;
 
 export function appendPresentationPacket(
   values: number[],
@@ -43,7 +43,9 @@ export function appendPresentationPacket(
     boxShadow?.blurRadius ?? 0,
     boxShadow?.spreadDistance ?? 0,
     Number(presentation.rotation.slice(0, -3)),
-    presentation.opacity
+    presentation.opacity,
+    presentation.backdrop.translateX,
+    presentation.backdrop.translateY
   );
 }
 
@@ -125,6 +127,10 @@ export function presentationFromPacket(
     contentScale,
     rotation: `${values[offset + 21] as number}rad`,
     opacity: values[offset + 22] as number,
+    backdrop: {
+      translateX: values[offset + 23] as number,
+      translateY: values[offset + 24] as number,
+    },
     ...(shadowEnabled
       ? {
           boxShadow: {