react-native-smooth-clip-view 0.2.9 → 0.4.0

package/src/SmoothClipView.tsx

@@ -1,76 +1,6 @@
-import type React from 'react';
-import { type ReactNode, useEffect } from 'react';
-import { type ViewProps } from 'react-native';
-import Animated, {
-  dispatchCommand,
-  useAnimatedReaction,
-  useAnimatedRef,
-} from 'react-native-reanimated';
-import type { SmoothClipDriver } from './driverTypes';
-import { getDriverState, registerDriverView } from './driverState';
-import { clipPresentationEquals, isFiniteClipPresentation } from './geometry';
-import NativeSmoothClipView, {
-  type NativeProps,
-} from './SmoothClipViewNativeComponent';
-
-const AnimatedNativeSmoothClipView =
-  Animated.createAnimatedComponent(NativeSmoothClipView);
-
-export type SmoothClipViewProps = ViewProps & {
-  driver: SmoothClipDriver;
-  children?: ReactNode;
-};
-
-/** Android fallback. iOS resolves SmoothClipView.ios.tsx instead. */
-export function SmoothClipView({
-  driver,
-  children,
-  ...viewProps
-}: SmoothClipViewProps) {
-  const { driverId, initialPresentation, source } = getDriverState(driver);
-  const { clip } = initialPresentation;
-  useEffect(() => registerDriverView(driver), [driver]);
-  const nativeRef =
-    useAnimatedRef<React.ComponentRef<typeof NativeSmoothClipView>>();
-
-  useAnimatedReaction(
-    () => source.value,
-    (presentation, previousPresentation) => {
-      if (
-        !isFiniteClipPresentation(presentation) ||
-        clipPresentationEquals(previousPresentation, presentation)
-      ) {
-        return;
-      }
-
-      dispatchCommand(nativeRef, 'setClipPresentation', [
-        presentation.clip.x,
-        presentation.clip.y,
-        presentation.clip.width,
-        presentation.clip.height,
-        presentation.clip.radius,
-        presentation.contentTranslateX,
-        presentation.contentTranslateY,
-      ]);
-    },
-    [nativeRef, source]
-  );
-
-  const nativeProps: NativeProps = {
-    ...viewProps,
-    driverId,
-    initialClipX: clip.x,
-    initialClipY: clip.y,
-    initialClipWidth: clip.width,
-    initialClipHeight: clip.height,
-    initialClipRadius: clip.radius,
-    initialContentTranslateX: initialPresentation.contentTranslateX,
-    initialContentTranslateY: initialPresentation.contentTranslateY,
-  };
-
-  return (
-    <AnimatedNativeSmoothClipView ref={nativeRef} {...nativeProps}>
-      {children}
-    </AnimatedNativeSmoothClipView>
-  );
-}
+export {
+  renderSmoothClipView,
+  sanitizeSmoothClipStyle,
+  SmoothClipView,
+} from './SmoothClipView.ios';
+export type { SmoothClipViewProps } from './SmoothClipView.ios';

package/src/SmoothClipViewNativeComponent.ts

@@ -12,34 +12,54 @@ export interface NativeProps extends ViewProps {
   initialClipY: CodegenTypes.Double;
   initialClipWidth: CodegenTypes.Double;
   initialClipHeight: CodegenTypes.Double;
-  initialClipRadius: CodegenTypes.Double;
+  initialClipTopLeftRadius: CodegenTypes.Double;
+  initialClipTopRightRadius: CodegenTypes.Double;
+  initialClipBottomRightRadius: CodegenTypes.Double;
+  initialClipBottomLeftRadius: CodegenTypes.Double;
+  initialClipCurve: CodegenTypes.Int32;
   initialContentTranslateX: CodegenTypes.Double;
   initialContentTranslateY: CodegenTypes.Double;
+  initialContentScale: CodegenTypes.Double;
+  initialClipBoxShadowEnabled: boolean;
+  initialClipBoxShadowRed: CodegenTypes.Double;
+  initialClipBoxShadowGreen: CodegenTypes.Double;
+  initialClipBoxShadowBlue: CodegenTypes.Double;
+  initialClipBoxShadowAlpha: CodegenTypes.Double;
+  initialClipBoxShadowOffsetX: CodegenTypes.Double;
+  initialClipBoxShadowOffsetY: CodegenTypes.Double;
+  initialClipBoxShadowBlurRadius: CodegenTypes.Double;
+  initialClipBoxShadowSpreadDistance: CodegenTypes.Double;
 }
 
 interface NativeCommands {
-  setClipGeometry: (
-    viewRef: React.ElementRef<HostComponent<NativeProps>>,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    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,
+    topLeftRadius: CodegenTypes.Double,
+    topRightRadius: CodegenTypes.Double,
+    bottomRightRadius: CodegenTypes.Double,
+    bottomLeftRadius: CodegenTypes.Double,
+    curveCode: CodegenTypes.Int32,
     contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double
+    contentTranslateY: CodegenTypes.Double,
+    contentScale: CodegenTypes.Double,
+    shadowEnabled: boolean,
+    shadowRed: CodegenTypes.Double,
+    shadowGreen: CodegenTypes.Double,
+    shadowBlue: CodegenTypes.Double,
+    shadowAlpha: CodegenTypes.Double,
+    shadowOffsetX: CodegenTypes.Double,
+    shadowOffsetY: CodegenTypes.Double,
+    shadowBlurRadius: CodegenTypes.Double,
+    shadowSpreadDistance: CodegenTypes.Double
   ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setClipGeometry', 'setClipPresentation'],
+  supportedCommands: ['setClipPresentation'],
 });
 
 export default codegenNativeComponent<NativeProps>(

package/src/capabilities.native.ts

@@ -0,0 +1,19 @@
+import NativeSmoothClipModule from './smoothClipNative';
+import type { SmoothClipCapabilities } from './capabilityTypes';
+
+let cached: SmoothClipCapabilities | undefined;
+
+export function getSmoothClipCapabilities(): SmoothClipCapabilities {
+  if (cached) return cached;
+  let autonomousComplexPathAnimation = false;
+  try {
+    autonomousComplexPathAnimation =
+      NativeSmoothClipModule.supportsAutonomousComplexPathAnimation() === true;
+  } catch {
+    autonomousComplexPathAnimation = false;
+  }
+  cached = {
+    autonomousComplexPathAnimation,
+  };
+  return cached;
+}

package/src/capabilities.ts

@@ -0,0 +1,2 @@
+export { getSmoothClipCapabilities } from './capabilities.native';
+export type { SmoothClipCapabilities } from './capabilityTypes';

package/src/capabilityTypes.ts

@@ -0,0 +1,3 @@
+export type SmoothClipCapabilities = Readonly<{
+  autonomousComplexPathAnimation: boolean;
+}>;

package/src/controllerInternals.ts

@@ -0,0 +1,52 @@
+import type { SmoothClipController, SmoothClipRef } from './controllerTypes';
+import type { CanonicalSmoothClipPresentation } from './geometry';
+
+export type InternalSmoothClipController = Readonly<{
+  ref: SmoothClipRef;
+  initialFrame: CanonicalSmoothClipPresentation;
+}>;
+
+export type InternalSmoothClipRef = SmoothClipRef & Readonly<{ id: number }>;
+
+const controllers = new WeakMap<
+  SmoothClipController,
+  InternalSmoothClipController
+>();
+
+export function setControllerRef(
+  controller: SmoothClipController,
+  value: InternalSmoothClipController
+): void {
+  controllers.set(controller, value);
+}
+
+export function getControllerRef(
+  controller: SmoothClipController
+): InternalSmoothClipController {
+  const value = controllers.get(controller);
+  if (!value) {
+    throw new Error(
+      '[SmoothClipView] Controllers must be created by useSmoothClipController.'
+    );
+  }
+  return value;
+}
+
+export function unwrapSmoothClipRef(
+  ref: SmoothClipRef | undefined
+): InternalSmoothClipRef | undefined {
+  'worklet';
+  const internal = ref as InternalSmoothClipRef | undefined;
+  if (
+    internal === undefined ||
+    !Number.isSafeInteger(internal.id) ||
+    internal.id <= 0
+  ) {
+    return undefined;
+  }
+  return internal;
+}
+
+export function createSmoothClipRef(id: number): SmoothClipRef {
+  return { id } as InternalSmoothClipRef;
+}

package/src/controllerLifecycle.ts

@@ -0,0 +1,6 @@
+import NativeSmoothClipModule from './NativeSmoothClipModule';
+
+/** Destroy from the React Native runtime; native forwards to the UI thread. */
+export function destroyController(controllerId: number): void {
+  NativeSmoothClipModule.destroyDriver(controllerId);
+}

package/src/controllerTypes.ts

@@ -0,0 +1,87 @@
+import type {
+  CanonicalSmoothClipPresentation,
+  ClipGeometry,
+  SmoothClipPresentation,
+} from './geometry';
+
+export type ClipReduceMotion = 'system' | 'always' | 'never';
+
+type SmoothClipAnimationBase = Readonly<{
+  /** Resolved per transaction; it is never retained by the controller. */
+  reduceMotion?: ClipReduceMotion;
+}>;
+
+export type TimingClipAnimation = SmoothClipAnimationBase &
+  Readonly<{
+    type: 'timing';
+    duration: number;
+    controlPoints: readonly [number, number, number, number];
+  }>;
+
+export type SpringClipAnimation = SmoothClipAnimationBase &
+  Readonly<{
+    type: 'spring';
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+    /** Normalized progress velocity in inverse seconds. */
+    velocity?: number;
+    /** Relative mechanical energy used to determine settlement. */
+    energyThreshold?: number;
+  }>;
+
+export type SmoothClipAnimation = TimingClipAnimation | SpringClipAnimation;
+
+declare const smoothClipRefBrand: unique symbol;
+/** Opaque, worklet-safe identity for one mounted clip host. */
+export type SmoothClipRef = Readonly<{
+  readonly [smoothClipRefBrand]: true;
+}>;
+
+declare const smoothClipRunBrand: unique symbol;
+/** Opaque identity for a native transaction started on the UI runtime. */
+export type SmoothClipRunHandle = Readonly<{
+  readonly [smoothClipRunBrand]: true;
+}>;
+
+export type SmoothClipCompletion = Readonly<{
+  finished: boolean;
+  /** Present only when supplied by the UI-runtime caller. */
+  completionTag?: number;
+}>;
+
+export type SmoothClipReactRun = Readonly<{
+  finished: Promise<boolean>;
+  cancel(): void;
+}>;
+
+export type SmoothClipControllerOptions = Readonly<{
+  /** Stable React-runtime callback for UI- and React-runtime transactions. */
+  onAnimationComplete?: (result: SmoothClipCompletion) => void;
+}>;
+
+export type SmoothClipControllerUI = Readonly<{
+  beginInteraction(): CanonicalSmoothClipPresentation;
+  setFrame(frame: SmoothClipPresentation): void;
+  animateTo(
+    target: SmoothClipPresentation,
+    animation: SmoothClipAnimation,
+    completionTag?: number
+  ): SmoothClipRunHandle | null;
+  cancel(run: SmoothClipRunHandle): CanonicalSmoothClipPresentation;
+}>;
+
+export type SmoothClipControllerReact = Readonly<{
+  animateTo(
+    target: SmoothClipPresentation,
+    animation: SmoothClipAnimation
+  ): SmoothClipReactRun;
+}>;
+
+export type SmoothClipController = Readonly<{
+  ref: SmoothClipRef;
+  ui: SmoothClipControllerUI;
+  react: SmoothClipControllerReact;
+}>;
+
+export type SmoothClipInitialFrame = ClipGeometry | SmoothClipPresentation;

package/src/controllers.android.ts

@@ -0,0 +1 @@
+export { useSmoothClipController } from './controllers.native';

package/src/controllers.ios.ts

@@ -0,0 +1 @@
+export { useSmoothClipController } from './controllers.native';

package/src/controllers.native.ts

@@ -0,0 +1,104 @@
+import { useEffect, useRef } from 'react';
+import { scheduleOnUI } from 'react-native-worklets';
+import type {
+  SmoothClipController,
+  SmoothClipControllerOptions,
+  SmoothClipInitialFrame,
+} from './controllerTypes';
+import { createSmoothClipRef, setControllerRef } from './controllerInternals';
+import { destroyController } from './controllerLifecycle';
+import { allocateSmoothClipId } from './ids';
+import {
+  canonicalizeClipPresentation,
+  createClipPresentation,
+  type CanonicalSmoothClipPresentation,
+} from './geometry';
+import { useSmoothClipGroup } from './groups.native';
+import { presentationPacket } from './presentationCodec';
+import NativeSmoothClipModule from './smoothClipNative';
+
+const setClipPresentationHostFunction =
+  NativeSmoothClipModule.setClipPresentation;
+
+export function useSmoothClipController(
+  initialValue: SmoothClipInitialFrame,
+  options: SmoothClipControllerOptions = {}
+): SmoothClipController {
+  // A controller is intentionally a one-member transaction group. This keeps
+  // validation, native dispatch, cancellation, completion, and lifecycle races
+  // on the same path as multi-member transitions.
+  const group = useSmoothClipGroup(options);
+  const initialRequested =
+    'clip' in initialValue
+      ? initialValue
+      : createClipPresentation(initialValue);
+  const canonicalInitial = canonicalizeClipPresentation(initialRequested);
+  if (canonicalInitial === null) {
+    throw new Error('[SmoothClipView] Initial presentation must be finite.');
+  }
+  const initialFrameRef = useRef<CanonicalSmoothClipPresentation | null>(null);
+  initialFrameRef.current ??= canonicalInitial;
+  const initialFrame = initialFrameRef.current;
+
+  const idRef = useRef(0);
+  const controllerRef = useRef<SmoothClipController | null>(null);
+  if (idRef.current === 0) idRef.current = allocateSmoothClipId();
+  const controllerId = idRef.current;
+
+  if (controllerRef.current === null) {
+    const ref = createSmoothClipRef(controllerId);
+    const controller: SmoothClipController = {
+      ref,
+      ui: {
+        beginInteraction() {
+          'worklet';
+          return group.ui.beginInteraction([ref])[0]?.frame ?? initialFrame;
+        },
+        setFrame(frame) {
+          'worklet';
+          group.ui.setFrames([{ clip: ref, frame }]);
+        },
+        animateTo(target, animation, completionTag = 0) {
+          'worklet';
+          return group.ui.animateTo(
+            [{ clip: ref, target }],
+            animation,
+            completionTag
+          );
+        },
+        cancel(run) {
+          'worklet';
+          return group.ui.cancel(run)[0]?.frame ?? initialFrame;
+        },
+      },
+      react: {
+        animateTo(target, animation) {
+          return group.react.animateTo([{ clip: ref, target }], animation);
+        },
+      },
+    };
+    setControllerRef(controller, { ref, initialFrame });
+    controllerRef.current = controller;
+  }
+
+  useEffect(() => {
+    scheduleOnUI(
+      (id: number, frame: CanonicalSmoothClipPresentation) => {
+        'worklet';
+        setClipPresentationHostFunction(
+          id,
+          presentationPacket(frame),
+          true,
+          false
+        );
+      },
+      controllerId,
+      initialFrame
+    );
+    return () => {
+      destroyController(controllerId);
+    };
+  }, [controllerId, initialFrame]);
+
+  return controllerRef.current;
+}

package/src/controllers.ts

@@ -0,0 +1 @@
+export { useSmoothClipController } from './controllers.native';