react-native-smooth-clip-view 0.1.0 → 0.2.1

package/src/SmoothClipView.web.tsx

@@ -1,62 +1,66 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
 import { type ViewProps, type ViewStyle } from 'react-native';
 import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
-  type SharedValue,
 } from 'react-native-reanimated';
-import {
-  clipGeometryEquals,
-  isFiniteClipGeometry,
-  type ClipGeometry,
-} from './geometry';
+import type { SmoothClipDriver } from './driverTypes';
+import { getDriverState, registerDriverView } from './driverState';
+import { clipPresentationEquals, isFiniteClipPresentation } from './geometry';
 import { createWebClipPath } from './webClipPath';
 
 export type SmoothClipViewProps = ViewProps & {
-  initialClip: ClipGeometry;
-  animatedClip: SharedValue<ClipGeometry>;
+  driver: SmoothClipDriver;
   children?: ReactNode;
 };
 
-/** Build-safe fallback. Web performance is intentionally outside the POC. */
+/** Fixed-layout CSS fallback. */
 export function SmoothClipView({
-  initialClip,
-  animatedClip,
+  driver,
   children,
   style,
   ...viewProps
 }: SmoothClipViewProps) {
-  const acceptedClip = useSharedValue(initialClip);
+  const { initialPresentation, source } = getDriverState(driver);
+  useEffect(() => registerDriverView(driver), [driver]);
+  const acceptedPresentation = useSharedValue(initialPresentation);
   const initialClipStyle = {
-    clipPath: createWebClipPath(initialClip),
+    clipPath: createWebClipPath(initialPresentation.clip),
     overflow: 'hidden',
   } as unknown as ViewStyle;
 
   useAnimatedReaction(
-    () => animatedClip.value,
-    (clip, previousClip) => {
+    () => source.value,
+    (presentation, previousPresentation) => {
       if (
-        isFiniteClipGeometry(clip) &&
-        !clipGeometryEquals(previousClip, clip)
+        isFiniteClipPresentation(presentation) &&
+        !clipPresentationEquals(previousPresentation, presentation)
       ) {
-        acceptedClip.value = clip;
+        acceptedPresentation.value = presentation;
       }
     },
-    [animatedClip, acceptedClip]
+    [source, acceptedPresentation]
   );
 
   const clipStyle = useAnimatedStyle(() => {
-    const clip = acceptedClip.value;
+    const clip = acceptedPresentation.value.clip;
     return {
       clipPath: createWebClipPath(clip),
       overflow: 'hidden',
     };
   });
 
+  const contentStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: acceptedPresentation.value.contentTranslateX },
+      { translateY: acceptedPresentation.value.contentTranslateY },
+    ],
+  }));
+
   return (
     <Animated.View {...viewProps} style={[style, initialClipStyle, clipStyle]}>
-      {children}
+      <Animated.View style={contentStyle}>{children}</Animated.View>
     </Animated.View>
   );
 }

package/src/SmoothClipViewNativeComponent.ts

@@ -7,11 +7,14 @@ import {
 } from 'react-native';
 
 export interface NativeProps extends ViewProps {
+  driverId: CodegenTypes.Double;
   initialClipX: CodegenTypes.Double;
   initialClipY: CodegenTypes.Double;
   initialClipWidth: CodegenTypes.Double;
   initialClipHeight: CodegenTypes.Double;
   initialClipRadius: CodegenTypes.Double;
+  initialContentTranslateX: CodegenTypes.Double;
+  initialContentTranslateY: CodegenTypes.Double;
 }
 
 interface NativeCommands {
@@ -23,10 +26,20 @@ interface NativeCommands {
     height: CodegenTypes.Double,
     radius: CodegenTypes.Double
   ) => void;
+  setClipPresentation: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    x: CodegenTypes.Double,
+    y: CodegenTypes.Double,
+    width: CodegenTypes.Double,
+    height: CodegenTypes.Double,
+    radius: CodegenTypes.Double,
+    contentTranslateX: CodegenTypes.Double,
+    contentTranslateY: CodegenTypes.Double
+  ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setClipGeometry'],
+  supportedCommands: ['setClipGeometry', 'setClipPresentation'],
 });
 
 export default codegenNativeComponent<NativeProps>(

package/src/driverState.ts

@@ -0,0 +1,150 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { ClipAnimationResult, SmoothClipDriver } from './driverTypes';
+import type { SmoothClipPresentation } from './geometry';
+
+export type DriverState = {
+  driverId: number;
+  initialPresentation: SmoothClipPresentation;
+  source: SharedValue<SmoothClipPresentation>;
+  activeAnimationId?: SharedValue<number>;
+  ownership?: SharedValue<number>;
+  onAnimationComplete: {
+    current: ((result: ClipAnimationResult) => void) | undefined;
+  };
+  mountedViews: Set<object>;
+  animationParticipants: Map<number, Set<object>>;
+  failedAnimations: Set<number>;
+  completionDeferrals: number;
+  deferredCompletions: ClipAnimationResult[];
+};
+
+const states = new WeakMap<SmoothClipDriver, DriverState>();
+const statesById = new Map<number, DriverState>();
+let nextDriverId = Date.now() * 1024;
+
+export function allocateDriverId(): number {
+  nextDriverId += 1;
+  if (!Number.isSafeInteger(nextDriverId)) nextDriverId = 1;
+  return nextDriverId;
+}
+
+export function setDriverState(
+  driver: SmoothClipDriver,
+  state: DriverState
+): void {
+  // WeakMap-only: safe to call from render (discarded renders leave nothing
+  // reachable) and survives effect replays so getDriverState keeps working.
+  states.set(driver, state);
+}
+
+// The strong by-id index is attached in the driver hook's effect and detached
+// in its cleanup, so discarded renders never leak entries and StrictMode /
+// <Activity> effect replays can re-attach the same state.
+export function attachDriverState(state: DriverState): void {
+  statesById.set(state.driverId, state);
+}
+
+export function detachDriverState(state: DriverState): void {
+  if (statesById.get(state.driverId) === state) {
+    statesById.delete(state.driverId);
+  }
+}
+
+export function createDriverState(
+  driverId: number,
+  initialPresentation: SmoothClipPresentation,
+  source: SharedValue<SmoothClipPresentation>,
+  onAnimationComplete: DriverState['onAnimationComplete'],
+  activeAnimationId?: SharedValue<number>,
+  ownership?: SharedValue<number>
+): DriverState {
+  return {
+    driverId,
+    initialPresentation,
+    source,
+    activeAnimationId,
+    ownership,
+    onAnimationComplete,
+    mountedViews: new Set(),
+    animationParticipants: new Map(),
+    failedAnimations: new Set(),
+    completionDeferrals: 0,
+    deferredCompletions: [],
+  };
+}
+
+export function registerDriverView(driver: SmoothClipDriver): () => void {
+  const state = getDriverState(driver);
+  const token = {};
+  state.mountedViews.add(token);
+  return () => {
+    state.mountedViews.delete(token);
+    for (const [animationId, participants] of state.animationParticipants) {
+      if (participants.has(token)) state.failedAnimations.add(animationId);
+    }
+  };
+}
+
+export function snapshotDriverViews(
+  driverId: number,
+  animationId: number
+): void {
+  const state = statesById.get(driverId);
+  if (state) {
+    state.animationParticipants.set(animationId, new Set(state.mountedViews));
+  }
+}
+
+export function finishDriverAnimation(
+  driverId: number,
+  animationId: number,
+  finished: boolean
+): boolean {
+  const state = statesById.get(driverId);
+  if (!state) return finished;
+  const result = finished && !state.failedAnimations.has(animationId);
+  state.animationParticipants.delete(animationId);
+  state.failedAnimations.delete(animationId);
+  return result;
+}
+
+export function deliverDriverCompletion(
+  driverId: number,
+  animationId: number,
+  finished: boolean
+): void {
+  const state = statesById.get(driverId);
+  if (!state) return;
+  const result = { animationId, finished };
+  if (state.completionDeferrals > 0) {
+    state.deferredCompletions.push(result);
+    return;
+  }
+  state.onAnimationComplete.current?.(result);
+}
+
+export function deferDriverCompletions(driverId: number): void {
+  const state = statesById.get(driverId);
+  if (state) state.completionDeferrals += 1;
+}
+
+export function releaseDriverCompletions(driverId: number): void {
+  const state = statesById.get(driverId);
+  if (!state || state.completionDeferrals === 0) return;
+  state.completionDeferrals -= 1;
+  if (state.completionDeferrals !== 0) return;
+  const deferred = state.deferredCompletions.splice(0);
+  for (const result of deferred) {
+    state.onAnimationComplete.current?.(result);
+  }
+}
+
+export function getDriverState(driver: SmoothClipDriver): DriverState {
+  const state = states.get(driver);
+  if (!state) {
+    throw new Error(
+      '[SmoothClipView] Drivers must be created by useSmoothClipDriver.'
+    );
+  }
+  return state;
+}

package/src/driverTypes.ts

@@ -0,0 +1,91 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { SmoothClipPresentation } from './geometry';
+
+export type ClipReduceMotion = 'system' | 'always' | 'never';
+
+export type TimingClipAnimation = Readonly<{
+  type: 'timing';
+  duration: number;
+  controlPoints: readonly [number, number, number, number];
+}>;
+
+export type SpringClipAnimation = Readonly<{
+  type: 'spring';
+  mass?: number;
+  stiffness?: number;
+  damping?: number;
+  initialVelocity?: number | 'inherit';
+}>;
+
+export type KeyframedClipAnimation = Readonly<{
+  type: 'keyframes';
+  duration: number;
+  frames: readonly Readonly<{
+    offset: number;
+    presentation: SmoothClipPresentation;
+  }>[];
+}>;
+
+export type SmoothClipAnimation =
+  TimingClipAnimation | SpringClipAnimation | KeyframedClipAnimation;
+
+export type ClipAnimationResult = Readonly<{
+  animationId: number;
+  finished: boolean;
+}>;
+
+export type SmoothClipDriverOptions = Readonly<{
+  reduceMotion?: ClipReduceMotion;
+  onAnimationComplete?: (result: ClipAnimationResult) => void;
+}>;
+
+export type SmoothClipUIControls = Readonly<{
+  beginInteraction(): SmoothClipPresentation;
+  set(presentation: SmoothClipPresentation): void;
+  /**
+   * Per-frame hot path: writes geometry straight to native without touching
+   * `driver.presentation`. Skips SharedValue bookkeeping (dirty marking, RN
+   * mirror sync, listener dispatch) for high-frequency streams such as
+   * gestures. `driver.presentation.value` is stale after hot writes by design;
+   * `beginInteraction()` remains the source of truth for visible geometry.
+   * Do not interleave with `presentation.value` writes on the same driver —
+   * the listener's duplicate suppression may skip a later equal value.
+   */
+  setScalars(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    contentTranslateX: number,
+    contentTranslateY: number
+  ): void;
+  animateTo(
+    presentation: SmoothClipPresentation,
+    animation: SmoothClipAnimation
+  ): number;
+  cancel(
+    animationId?: number,
+    behavior?: 'current' | 'target'
+  ): SmoothClipPresentation;
+}>;
+
+export type SmoothClipReactControls = Readonly<{
+  beginInteraction(): Promise<SmoothClipPresentation>;
+  set(presentation: SmoothClipPresentation): Promise<void>;
+  animateTo(
+    presentation: SmoothClipPresentation,
+    animation: SmoothClipAnimation
+  ): Promise<number>;
+  cancel(
+    animationId?: number,
+    behavior?: 'current' | 'target'
+  ): Promise<SmoothClipPresentation>;
+}>;
+
+export type SmoothClipDriver = Readonly<{
+  kind: 'hybrid';
+  presentation: SharedValue<SmoothClipPresentation>;
+  ui: SmoothClipUIControls;
+  react: SmoothClipReactControls;
+}>;

package/src/drivers.android.ts

@@ -0,0 +1,6 @@
+export { useSmoothClipDriver } from './drivers.ios';
+export type {
+  KeyframedClipAnimation,
+  SpringClipAnimation,
+  TimingClipAnimation,
+} from './drivers.ios';