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

package/lib/typescript/src/groupTypes.d.ts

@@ -0,0 +1,31 @@
+import type { SmoothClipAnimation, SmoothClipCompletion, SmoothClipReactRun, SmoothClipRef, SmoothClipRunHandle } from './controllerTypes.js';
+import type { CanonicalSmoothClipPresentation, SmoothClipPresentation } from './geometry.js';
+export type SmoothClipGroupFrame = Readonly<{
+    clip: SmoothClipRef;
+    frame: SmoothClipPresentation;
+}>;
+export type SmoothClipGroupTarget = Readonly<{
+    clip: SmoothClipRef;
+    target: SmoothClipPresentation;
+}>;
+export type SmoothClipGroupSnapshot = Readonly<{
+    clip: SmoothClipRef;
+    frame: CanonicalSmoothClipPresentation;
+    ready: boolean;
+}>;
+export type SmoothClipGroupOptions = Readonly<{
+    /** Stable React-runtime callback for UI- and React-runtime transactions. */
+    onAnimationComplete?: (result: SmoothClipCompletion) => void;
+}>;
+export type SmoothClipGroup = Readonly<{
+    ui: Readonly<{
+        setFrames(entries: readonly SmoothClipGroupFrame[]): void;
+        beginInteraction(clips: readonly SmoothClipRef[]): readonly SmoothClipGroupSnapshot[];
+        animateTo(entries: readonly SmoothClipGroupTarget[], animation: SmoothClipAnimation, completionTag?: number): SmoothClipRunHandle | null;
+        cancel(run: SmoothClipRunHandle): readonly SmoothClipGroupSnapshot[];
+    }>;
+    react: Readonly<{
+        animateTo(entries: readonly SmoothClipGroupTarget[], animation: SmoothClipAnimation): SmoothClipReactRun;
+    }>;
+}>;
+//# sourceMappingURL=groupTypes.d.ts.map

package/lib/typescript/src/groupTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupTypes.d.ts","sourceRoot":"","sources":["../../../src/groupTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACpB,MAAM,sBAAmB,CAAC;AAC3B,OAAO,KAAK,EACV,+BAA+B,EAC/B,sBAAsB,EACvB,MAAM,eAAY,CAAC;AAEpB,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,sBAAsB,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,+BAA+B,CAAC;IACvC,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC5C,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC9D,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,EAAE,EAAE,QAAQ,CAAC;QACX,SAAS,CAAC,OAAO,EAAE,SAAS,oBAAoB,EAAE,GAAG,IAAI,CAAC;QAC1D,gBAAgB,CACd,KAAK,EAAE,SAAS,aAAa,EAAE,GAC9B,SAAS,uBAAuB,EAAE,CAAC;QACtC,SAAS,CACP,OAAO,EAAE,SAAS,qBAAqB,EAAE,EACzC,SAAS,EAAE,mBAAmB,EAC9B,aAAa,CAAC,EAAE,MAAM,GACrB,mBAAmB,GAAG,IAAI,CAAC;QAC9B,MAAM,CAAC,GAAG,EAAE,mBAAmB,GAAG,SAAS,uBAAuB,EAAE,CAAC;KACtE,CAAC,CAAC;IACH,KAAK,EAAE,QAAQ,CAAC;QACd,SAAS,CACP,OAAO,EAAE,SAAS,qBAAqB,EAAE,EACzC,SAAS,EAAE,mBAAmB,GAC7B,kBAAkB,CAAC;KACvB,CAAC,CAAC;CACJ,CAAC,CAAC"}

package/lib/typescript/src/groups.android.d.ts

@@ -0,0 +1,2 @@
+export { useSmoothClipGroup } from './groups.native.js';
+//# sourceMappingURL=groups.android.d.ts.map

package/lib/typescript/src/groups.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.android.d.ts","sourceRoot":"","sources":["../../../src/groups.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC"}

package/lib/typescript/src/groups.d.ts

@@ -0,0 +1,2 @@
+export { useSmoothClipGroup } from './groups.native.js';
+//# sourceMappingURL=groups.d.ts.map

package/lib/typescript/src/groups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../src/groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC"}

package/lib/typescript/src/groups.ios.d.ts

@@ -0,0 +1,2 @@
+export { useSmoothClipGroup } from './groups.native.js';
+//# sourceMappingURL=groups.ios.d.ts.map

package/lib/typescript/src/groups.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.ios.d.ts","sourceRoot":"","sources":["../../../src/groups.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC"}

package/lib/typescript/src/groups.native.d.ts

@@ -0,0 +1,3 @@
+import type { SmoothClipGroup, SmoothClipGroupOptions } from './groupTypes.js';
+export declare function useSmoothClipGroup(options?: SmoothClipGroupOptions): SmoothClipGroup;
+//# sourceMappingURL=groups.native.d.ts.map

package/lib/typescript/src/groups.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.native.d.ts","sourceRoot":"","sources":["../../../src/groups.native.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,eAAe,EAEf,sBAAsB,EAGvB,MAAM,iBAAc,CAAC;AAibtB,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,sBAA2B,GACnC,eAAe,CAiJjB"}

package/lib/typescript/src/ids.d.ts

@@ -0,0 +1,2 @@
+export declare function allocateSmoothClipId(): number;
+//# sourceMappingURL=ids.d.ts.map

package/lib/typescript/src/ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ids.d.ts","sourceRoot":"","sources":["../../../src/ids.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,IAAI,MAAM,CAG7C"}

package/lib/typescript/src/index.d.ts

@@ -1,9 +1,12 @@
 export { SmoothClipView } from './SmoothClipView';
 export type { SmoothClipViewProps } from './SmoothClipView';
-export { useSmoothClipDriver } from './drivers';
-export type { ClipAnimationResult, ClipReduceMotion, KeyframedClipAnimation, SmoothClipDriver, SmoothClipDriverOptions, SmoothClipReactControls, SmoothClipUIControls, SmoothClipAnimation, SpringClipAnimation, TimingClipAnimation, } from './driverTypes.js';
+export { useSmoothClipController } from './controllers';
+export { useSmoothClipGroup } from './groups';
+export { getSmoothClipCapabilities } from './capabilities';
+export type { SmoothClipCapabilities } from './capabilityTypes.js';
+export type { ClipReduceMotion, SpringClipAnimation, TimingClipAnimation, SmoothClipAnimation, SmoothClipCompletion, SmoothClipController, SmoothClipControllerOptions, SmoothClipControllerReact, SmoothClipControllerUI, SmoothClipInitialFrame, SmoothClipReactRun, SmoothClipRef, SmoothClipRunHandle, } from './controllerTypes.js';
+export type { SmoothClipGroup, SmoothClipGroupFrame, SmoothClipGroupOptions, SmoothClipGroupSnapshot, SmoothClipGroupTarget, } from './groupTypes.js';
 export { ClipEasings } from './easings.js';
-export { normalizeClipGeometry } from './geometry.js';
-export { createClipPresentation } from './geometry.js';
-export type { ClipBounds, ClipGeometry, SmoothClipPresentation, } from './geometry.js';
+export { canonicalizeClipGeometry, canonicalizeClipPresentation, createClipPresentation, } from './geometry.js';
+export type { CanonicalClipGeometry, CanonicalClipBoxShadow, CanonicalSmoothClipPresentation, ClipCurve, ClipGeometry, ClipBoxShadow, SmoothClipPresentation, } from './geometry.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,cAAW,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAY,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAY,CAAC;AACpD,YAAY,EACV,UAAU,EACV,YAAY,EACZ,sBAAsB,GACvB,MAAM,eAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,sBAAmB,CAAC;AAChE,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,2BAA2B,EAC3B,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,aAAa,EACb,mBAAmB,GACpB,MAAM,sBAAmB,CAAC;AAC3B,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,iBAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,cAAW,CAAC;AACxC,OAAO,EACL,wBAAwB,EACxB,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,eAAY,CAAC;AACpB,YAAY,EACV,qBAAqB,EACrB,sBAAsB,EACtB,+BAA+B,EAC/B,SAAS,EACT,YAAY,EACZ,aAAa,EACb,sBAAsB,GACvB,MAAM,eAAY,CAAC"}

package/lib/typescript/src/nativeCompletion.d.ts

@@ -1,7 +1,17 @@
-export declare function completeNativeAnimation(driverId: number, animationId: number, finished: boolean): void;
-export declare function synchronizeNativeCompletion(activeAnimationId: {
-    value: number;
-}, ownership: {
-    value: number;
-}, animationId: number, _finished: boolean): void;
+type DriverCompletion = Readonly<{
+    driverId: number;
+    animationId: number;
+    completionTag: number;
+    finished: boolean;
+}>;
+type GroupCompletion = Readonly<{
+    controllerId: number;
+    groupId: number;
+    completionTag: number;
+    finished: boolean;
+    snapshots: readonly number[];
+}>;
+export declare function subscribeDriverCompletion(driverId: number, listener: (event: DriverCompletion) => void): () => void;
+export declare function subscribeGroupCompletion(controllerId: number, listener: (event: GroupCompletion) => void): () => void;
+export {};
 //# sourceMappingURL=nativeCompletion.d.ts.map

package/lib/typescript/src/nativeCompletion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeCompletion.d.ts","sourceRoot":"","sources":["../../../src/nativeCompletion.ts"],"names":[],"mappings":"AAGA,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,OAAO,GAChB,IAAI,CAEN;AAED,wBAAgB,2BAA2B,CACzC,iBAAiB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EACpC,SAAS,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC5B,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,GACjB,IAAI,CAoBN"}
+{"version":3,"file":"nativeCompletion.d.ts","sourceRoot":"","sources":["../../../src/nativeCompletion.ts"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG,QAAQ,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,KAAK,eAAe,GAAG,QAAQ,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC,CAAC;AA8BH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,GAC1C,MAAM,IAAI,CASZ;AAED,wBAAgB,wBAAwB,CACtC,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,GACzC,MAAM,IAAI,CASZ"}

package/lib/typescript/src/presentationCodec.d.ts

@@ -0,0 +1,10 @@
+import type { CanonicalSmoothClipPresentation } from './geometry.js';
+/**
+ * Versionless native packet layout. Keep this as the single JS codec used by
+ * drivers, groups, snapshots, and cancellation.
+ */
+export declare const PRESENTATION_STRIDE = 21;
+export declare function appendPresentationPacket(values: number[], presentation: CanonicalSmoothClipPresentation): void;
+export declare function presentationPacket(presentation: CanonicalSmoothClipPresentation): number[];
+export declare function presentationFromPacket(values: readonly number[], offset?: number): CanonicalSmoothClipPresentation | null;
+//# sourceMappingURL=presentationCodec.d.ts.map

package/lib/typescript/src/presentationCodec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentationCodec.d.ts","sourceRoot":"","sources":["../../../src/presentationCodec.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,eAAY,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,MAAM,EAAE,EAChB,YAAY,EAAE,+BAA+B,GAC5C,IAAI,CAiCN;AAED,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,+BAA+B,GAC5C,MAAM,EAAE,CAKV;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,SAAS,MAAM,EAAE,EACzB,MAAM,SAAI,GACT,+BAA+B,GAAG,IAAI,CA0ExC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-smooth-clip-view",
-  "version": "0.2.9",
+  "version": "0.4.0",
   "description": "Layout-free animated rounded clipping for React Native Fabric",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -36,6 +36,7 @@
   "scripts": {
     "example": "npm run --workspace react-native-smooth-clip-view-example",
     "clean": "del-cli lib",
+    "patch:legend-list": "patch-package",
     "prepare": "bob build",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
@@ -51,8 +52,7 @@
     "clipping",
     "fabric",
     "ios",
-    "android",
-    "web"
+    "android"
   ],
   "repository": {
     "type": "git",
@@ -75,10 +75,10 @@
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^9.39.4",
     "@jest/globals": "^29.7.0",
-    "@react-native/babel-preset": "0.86.0",
-    "@react-native/eslint-config": "0.86.0",
-    "@react-native/jest-preset": "0.86.0",
-    "@react-native/metro-config": "0.86.0",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/eslint-config": "0.86.2",
+    "@react-native/jest-preset": "0.86.2",
+    "@react-native/metro-config": "0.86.2",
     "@release-it/conventional-changelog": "^11.0.1",
     "@types/react": "^19.2.0",
     "commitlint": "^21.0.2",
@@ -90,21 +90,22 @@
     "hermes-eslint": "^0.37.0",
     "jest": "^29.7.0",
     "lefthook": "^2.1.9",
+    "patch-package": "^8.0.1",
     "prettier": "^3.8.3",
     "react": "19.2.3",
-    "react-native": "0.86.0",
+    "react-native": "0.86.2",
     "react-native-builder-bob": "^0.43.0",
-    "react-native-reanimated": "4.5.0",
-    "react-native-worklets": "0.10.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-worklets": "0.10.4",
     "release-it": "^20.2.0",
     "turbo": "^2.9.16",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "react": "*",
+    "react": ">=19.2.0",
     "react-native": ">=0.86.0",
     "react-native-reanimated": ">=4.5.0",
-    "react-native-worklets": ">=0.10.0"
+    "react-native-worklets": ">=0.10.1"
   },
   "workspaces": [
     "example"
@@ -166,7 +167,10 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^react-native-reanimated$": "<rootDir>/src/__mocks__/react-native-reanimated.ts"
+    }
   },
   "commitlint": {
     "extends": [

package/src/NativeSmoothClipModule.ts

@@ -6,92 +6,116 @@ export interface Spec extends TurboModule {
     Readonly<{
       driverId: CodegenTypes.Double;
       animationId: CodegenTypes.Int32;
+      completionTag: CodegenTypes.Int32;
       finished: boolean;
     }>
   >;
+  readonly onClipGroupAnimationComplete: CodegenTypes.EventEmitter<
+    Readonly<{
+      controllerId: CodegenTypes.Double;
+      groupId: CodegenTypes.Int32;
+      completionTag: CodegenTypes.Int32;
+      finished: boolean;
+      snapshots: ReadonlyArray<CodegenTypes.Double>;
+    }>
+  >;
+  supportsAutonomousComplexPathAnimation(): boolean;
+  beginGroupInteraction(
+    driverIds: ReadonlyArray<CodegenTypes.Double>
+  ): ReadonlyArray<CodegenTypes.Double>;
+  snapshotGroup(
+    driverIds: ReadonlyArray<CodegenTypes.Double>
+  ): ReadonlyArray<CodegenTypes.Double>;
+  setClipPresentationBatch(
+    entries: ReadonlyArray<CodegenTypes.Double>
+  ): boolean;
+  animateTimingGroup(
+    controllerId: CodegenTypes.Double,
+    entries: ReadonlyArray<CodegenTypes.Double>,
+    durationMs: CodegenTypes.Double,
+    controlPoint1X: CodegenTypes.Double,
+    controlPoint1Y: CodegenTypes.Double,
+    controlPoint2X: CodegenTypes.Double,
+    controlPoint2Y: CodegenTypes.Double,
+    reduceMotion: CodegenTypes.Int32,
+    completionTag: CodegenTypes.Int32,
+    startTimestamp: CodegenTypes.Double
+  ): CodegenTypes.Int32;
+  animateSpringGroup(
+    controllerId: CodegenTypes.Double,
+    entries: ReadonlyArray<CodegenTypes.Double>,
+    mass: CodegenTypes.Double,
+    stiffness: CodegenTypes.Double,
+    damping: CodegenTypes.Double,
+    velocity: CodegenTypes.Double,
+    energyThreshold: CodegenTypes.Double,
+    reduceMotion: CodegenTypes.Int32,
+    completionTag: CodegenTypes.Int32,
+    startTimestamp: CodegenTypes.Double
+  ): CodegenTypes.Int32;
+  cancelAnimationGroup(
+    groupId: CodegenTypes.Int32,
+    behavior: CodegenTypes.Int32
+  ): ReadonlyArray<CodegenTypes.Double>;
   setClipPresentation(
+    driverId: CodegenTypes.Double,
+    presentation: ReadonlyArray<CodegenTypes.Double>,
+    takeOwnership: boolean,
+    overridePendingAnimation: boolean
+  ): void;
+  setClipFrameScalars(
     driverId: CodegenTypes.Double,
     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,
-    takeOwnership: boolean,
-    overridePendingAnimation: boolean
+    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;
   beginInteraction(
     driverId: CodegenTypes.Double
   ): ReadonlyArray<CodegenTypes.Double>;
+  snapshotCurrent(
+    driverId: CodegenTypes.Double
+  ): ReadonlyArray<CodegenTypes.Double>;
   animateTiming(
     driverId: CodegenTypes.Double,
-    hasInteractiveStart: boolean,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startRadius: CodegenTypes.Double,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    radius: CodegenTypes.Double,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
+    start: ReadonlyArray<CodegenTypes.Double>,
+    target: ReadonlyArray<CodegenTypes.Double>,
     durationMs: CodegenTypes.Double,
     controlPoint1X: CodegenTypes.Double,
     controlPoint1Y: CodegenTypes.Double,
     controlPoint2X: CodegenTypes.Double,
     controlPoint2Y: CodegenTypes.Double,
-    reduceMotion: CodegenTypes.Int32
+    reduceMotion: CodegenTypes.Int32,
+    completionTag: CodegenTypes.Int32
   ): CodegenTypes.Int32;
   animateSpring(
     driverId: CodegenTypes.Double,
-    hasInteractiveStart: boolean,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startRadius: CodegenTypes.Double,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    radius: CodegenTypes.Double,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
+    start: ReadonlyArray<CodegenTypes.Double>,
+    target: ReadonlyArray<CodegenTypes.Double>,
     mass: CodegenTypes.Double,
     stiffness: CodegenTypes.Double,
     damping: CodegenTypes.Double,
     initialVelocity: CodegenTypes.Double,
     inheritVelocity: boolean,
-    reduceMotion: CodegenTypes.Int32
-  ): CodegenTypes.Int32;
-  animateKeyframes(
-    driverId: CodegenTypes.Double,
-    hasInteractiveStart: boolean,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startRadius: CodegenTypes.Double,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    radius: CodegenTypes.Double,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    durationMs: CodegenTypes.Double,
-    frames: ReadonlyArray<CodegenTypes.Double>,
-    reduceMotion: CodegenTypes.Int32
+    reduceMotion: CodegenTypes.Int32,
+    completionTag: CodegenTypes.Int32
   ): CodegenTypes.Int32;
   rejectAnimation(driverId: CodegenTypes.Double): CodegenTypes.Int32;
   cancelAnimation(

package/src/SmoothClipView.ios.tsx

@@ -1,36 +1,162 @@
-import type { ReactNode } from 'react';
-import { type ViewProps } from 'react-native';
-import type { SmoothClipDriver } from './driverTypes';
-import { getDriverState } from './driverState';
+/* eslint-disable no-bitwise -- color channels use packed RRGGBBAA integers */
+import {
+  forwardRef,
+  useEffect,
+  type ComponentRef,
+  type ForwardedRef,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { StyleSheet, type ViewProps, type ViewStyle } from 'react-native';
+import type { SmoothClipController } from './controllerTypes';
+import { getControllerRef, unwrapSmoothClipRef } from './controllerInternals';
 import NativeSmoothClipView, {
   type NativeProps,
 } from './SmoothClipViewNativeComponent';
 
 export type SmoothClipViewProps = ViewProps & {
-  driver: SmoothClipDriver;
+  controller: SmoothClipController;
   children?: ReactNode;
 };
 
-export function SmoothClipView({
-  driver,
-  children,
-  ...viewProps
-}: SmoothClipViewProps) {
-  const { driverId, initialPresentation } = getDriverState(driver);
-  const { clip } = initialPresentation;
+let reportedIndependentShadow = false;
+const mountedControllers = new WeakMap<SmoothClipController, number>();
+
+function useSingleControllerHost(controller: SmoothClipController): void {
+  useEffect(() => {
+    const mounted = mountedControllers.get(controller) ?? 0;
+    if (__DEV__ && mounted > 0) {
+      throw new Error(
+        '[SmoothClipView] One controller cannot drive two mounted hosts. Create one controller per SmoothClipView.'
+      );
+    }
+    mountedControllers.set(controller, mounted + 1);
+    return () => {
+      const current = mountedControllers.get(controller) ?? 1;
+      if (current <= 1) mountedControllers.delete(controller);
+      else mountedControllers.set(controller, current - 1);
+    };
+  }, [controller]);
+}
+
+function filterContainsDropShadow(filter: ViewStyle['filter']): boolean {
+  if (typeof filter === 'string') return /drop-shadow\s*\(/i.test(filter);
+  return (
+    Array.isArray(filter) &&
+    filter.some(
+      (entry) =>
+        typeof entry === 'object' && entry !== null && 'dropShadow' in entry
+    )
+  );
+}
+
+function removeDropShadowFilter(
+  filter: ViewStyle['filter']
+): ViewStyle['filter'] | undefined {
+  if (typeof filter === 'string') {
+    const remaining = filter
+      .replace(/drop-shadow\((?:[^()]|\([^()]*\))*\)/gi, '')
+      .trim();
+    return remaining === '' ? undefined : remaining;
+  }
+  if (Array.isArray(filter)) {
+    const remaining = filter.filter(
+      (entry) =>
+        !(typeof entry === 'object' && entry !== null && 'dropShadow' in entry)
+    );
+    return remaining.length === 0
+      ? undefined
+      : (remaining as ViewStyle['filter']);
+  }
+  return filter;
+}
+
+/** Prevents React Native from installing a second, aperture-independent shadow. */
+export function sanitizeSmoothClipStyle(
+  style: ViewProps['style']
+): ViewProps['style'] {
+  const flat = StyleSheet.flatten(style);
+  if (flat == null) return style;
+  const hasIndependentShadow =
+    flat.boxShadow !== undefined ||
+    flat.shadowColor !== undefined ||
+    flat.shadowOffset !== undefined ||
+    flat.shadowOpacity !== undefined ||
+    flat.shadowRadius !== undefined ||
+    flat.elevation !== undefined ||
+    filterContainsDropShadow(flat.filter);
+  if (!hasIndependentShadow) return style;
+  if (__DEV__ && !reportedIndependentShadow) {
+    reportedIndependentShadow = true;
+    console.error(
+      '[SmoothClipView] Shadow style properties are not rendered on the host. ' +
+        'Put the shadow in SmoothClipPresentation.boxShadow so it follows the clip aperture.'
+    );
+  }
+  const sanitized: Record<string, unknown> = { ...flat };
+  delete sanitized.boxShadow;
+  delete sanitized.shadowColor;
+  delete sanitized.shadowOffset;
+  delete sanitized.shadowOpacity;
+  delete sanitized.shadowRadius;
+  delete sanitized.elevation;
+  if (filterContainsDropShadow(sanitized.filter as ViewStyle['filter'])) {
+    const filter = removeDropShadowFilter(
+      sanitized.filter as ViewStyle['filter']
+    );
+    if (filter === undefined) delete sanitized.filter;
+    else sanitized.filter = filter;
+  }
+  return sanitized as ViewStyle;
+}
+
+export function renderSmoothClipView(
+  { controller, children, style, ...viewProps }: SmoothClipViewProps,
+  forwardedRef: ForwardedRef<ComponentRef<typeof NativeSmoothClipView>>
+): ReactElement {
+  const { ref, initialFrame: canonical } = getControllerRef(controller);
+  const driverId = unwrapSmoothClipRef(ref)?.id ?? 0;
+  const { clip } = canonical;
+  const shadow = canonical.boxShadow;
+  const color = (shadow?.color as unknown as number) ?? 0;
   const nativeProps: NativeProps = {
     ...viewProps,
+    style: sanitizeSmoothClipStyle(style),
     driverId,
     initialClipX: clip.x,
     initialClipY: clip.y,
     initialClipWidth: clip.width,
     initialClipHeight: clip.height,
-    initialClipRadius: clip.radius,
-    initialContentTranslateX: initialPresentation.contentTranslateX,
-    initialContentTranslateY: initialPresentation.contentTranslateY,
+    initialClipTopLeftRadius: clip.topLeftRadius,
+    initialClipTopRightRadius: clip.topRightRadius,
+    initialClipBottomRightRadius: clip.bottomRightRadius,
+    initialClipBottomLeftRadius: clip.bottomLeftRadius,
+    initialClipCurve: clip.curve === 'continuous' ? 1 : 0,
+    initialContentTranslateX: canonical.contentTranslateX,
+    initialContentTranslateY: canonical.contentTranslateY,
+    initialContentScale: canonical.contentScale,
+    initialClipBoxShadowEnabled: shadow !== undefined,
+    initialClipBoxShadowRed: ((color >>> 24) & 0xff) / 255,
+    initialClipBoxShadowGreen: ((color >>> 16) & 0xff) / 255,
+    initialClipBoxShadowBlue: ((color >>> 8) & 0xff) / 255,
+    initialClipBoxShadowAlpha: (color & 0xff) / 255,
+    initialClipBoxShadowOffsetX: shadow?.offsetX ?? 0,
+    initialClipBoxShadowOffsetY: shadow?.offsetY ?? 0,
+    initialClipBoxShadowBlurRadius: shadow?.blurRadius ?? 0,
+    initialClipBoxShadowSpreadDistance: shadow?.spreadDistance ?? 0,
   };
 
   return (
-    <NativeSmoothClipView {...nativeProps}>{children}</NativeSmoothClipView>
+    <NativeSmoothClipView ref={forwardedRef} {...nativeProps}>
+      {children}
+    </NativeSmoothClipView>
   );
 }
+
+export const SmoothClipView = forwardRef<
+  ComponentRef<typeof NativeSmoothClipView>,
+  SmoothClipViewProps
+>(function SmoothClipViewComponent(props, forwardedRef) {
+  useSingleControllerHost(props.controller);
+  return renderSmoothClipView(props, forwardedRef);
+});