react-native-smooth-clip-view 0.3.0 → 0.4.1

package/src/NativeSmoothClipModule.ts

@@ -6,6 +6,7 @@ export interface Spec extends TurboModule {
     Readonly<{
       driverId: CodegenTypes.Double;
       animationId: CodegenTypes.Int32;
+      completionTag: CodegenTypes.Int32;
       finished: boolean;
     }>
   >;
@@ -13,22 +14,22 @@ export interface Spec extends TurboModule {
     Readonly<{
       controllerId: CodegenTypes.Double;
       groupId: CodegenTypes.Int32;
+      completionTag: CodegenTypes.Int32;
       finished: boolean;
-      driverIds: ReadonlyArray<CodegenTypes.Double>;
+      snapshots: ReadonlyArray<CodegenTypes.Double>;
     }>
   >;
-  getPresentationProtocolVersion(): CodegenTypes.Int32;
   supportsAutonomousComplexPathAnimation(): boolean;
-  beginGroupInteractionV2(
+  beginGroupInteraction(
     driverIds: ReadonlyArray<CodegenTypes.Double>
   ): ReadonlyArray<CodegenTypes.Double>;
-  snapshotGroupV2(
+  snapshotGroup(
     driverIds: ReadonlyArray<CodegenTypes.Double>
   ): ReadonlyArray<CodegenTypes.Double>;
-  setClipPresentationBatchV2(
+  setClipPresentationBatch(
     entries: ReadonlyArray<CodegenTypes.Double>
   ): boolean;
-  animateTimingGroupV2(
+  animateTimingGroup(
     controllerId: CodegenTypes.Double,
     entries: ReadonlyArray<CodegenTypes.Double>,
     durationMs: CodegenTypes.Double,
@@ -37,31 +38,32 @@ export interface Spec extends TurboModule {
     controlPoint2X: CodegenTypes.Double,
     controlPoint2Y: CodegenTypes.Double,
     reduceMotion: CodegenTypes.Int32,
-    suspensionPolicy: CodegenTypes.Int32
+    completionTag: CodegenTypes.Int32,
+    startTimestamp: CodegenTypes.Double
   ): CodegenTypes.Int32;
-  animateSpringGroupV2(
+  animateSpringGroup(
     controllerId: CodegenTypes.Double,
     entries: ReadonlyArray<CodegenTypes.Double>,
     mass: CodegenTypes.Double,
     stiffness: CodegenTypes.Double,
     damping: CodegenTypes.Double,
-    initialVelocity: CodegenTypes.Double,
-    inheritVelocity: boolean,
+    velocity: CodegenTypes.Double,
+    energyThreshold: CodegenTypes.Double,
     reduceMotion: CodegenTypes.Int32,
-    suspensionPolicy: CodegenTypes.Int32
+    completionTag: CodegenTypes.Int32,
+    startTimestamp: CodegenTypes.Double
   ): CodegenTypes.Int32;
-  animateKeyframesGroupV2(
-    controllerId: CodegenTypes.Double,
-    entries: ReadonlyArray<CodegenTypes.Double>,
-    durationMs: CodegenTypes.Double,
-    reduceMotion: CodegenTypes.Int32,
-    suspensionPolicy: CodegenTypes.Int32
-  ): CodegenTypes.Int32;
-  cancelAnimationGroupV2(
+  cancelAnimationGroup(
     groupId: CodegenTypes.Int32,
     behavior: CodegenTypes.Int32
   ): ReadonlyArray<CodegenTypes.Double>;
-  setClipPresentationV2(
+  setClipPresentation(
+    driverId: CodegenTypes.Double,
+    presentation: ReadonlyArray<CodegenTypes.Double>,
+    takeOwnership: boolean,
+    overridePendingAnimation: boolean
+  ): void;
+  setClipFrameScalars(
     driverId: CodegenTypes.Double,
     x: CodegenTypes.Double,
     y: CodegenTypes.Double,
@@ -75,293 +77,45 @@ export interface Spec extends TurboModule {
     contentTranslateX: CodegenTypes.Double,
     contentTranslateY: CodegenTypes.Double,
     contentScale: CodegenTypes.Double,
-    takeOwnership: boolean,
-    overridePendingAnimation: boolean
+    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;
-  beginInteractionV2(
+  beginInteraction(
     driverId: CodegenTypes.Double
   ): ReadonlyArray<CodegenTypes.Double>;
-  snapshotCurrentV2(
-    driverId: CodegenTypes.Double
-  ): ReadonlyArray<CodegenTypes.Double>;
-  setClipPresentation(
-    driverId: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    radius: CodegenTypes.Double,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    takeOwnership: boolean,
-    overridePendingAnimation: boolean
-  ): void;
-  beginInteraction(
+  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
-  ): CodegenTypes.Int32;
-  animateTimingV2(
-    driverId: CodegenTypes.Double,
-    hasInteractiveStart: boolean,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startTopLeftRadius: CodegenTypes.Double,
-    startTopRightRadius: CodegenTypes.Double,
-    startBottomRightRadius: CodegenTypes.Double,
-    startBottomLeftRadius: CodegenTypes.Double,
-    startCurveCode: CodegenTypes.Int32,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    startContentScale: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    topLeftRadius: CodegenTypes.Double,
-    topRightRadius: CodegenTypes.Double,
-    bottomRightRadius: CodegenTypes.Double,
-    bottomLeftRadius: CodegenTypes.Double,
-    curveCode: CodegenTypes.Int32,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    contentScale: 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,
-    mass: CodegenTypes.Double,
-    stiffness: CodegenTypes.Double,
-    damping: CodegenTypes.Double,
-    initialVelocity: CodegenTypes.Double,
-    inheritVelocity: boolean,
-    reduceMotion: CodegenTypes.Int32
-  ): CodegenTypes.Int32;
-  animateSpringV2(
-    driverId: CodegenTypes.Double,
-    hasInteractiveStart: boolean,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startTopLeftRadius: CodegenTypes.Double,
-    startTopRightRadius: CodegenTypes.Double,
-    startBottomRightRadius: CodegenTypes.Double,
-    startBottomLeftRadius: CodegenTypes.Double,
-    startCurveCode: CodegenTypes.Int32,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    startContentScale: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    topLeftRadius: CodegenTypes.Double,
-    topRightRadius: CodegenTypes.Double,
-    bottomRightRadius: CodegenTypes.Double,
-    bottomLeftRadius: CodegenTypes.Double,
-    curveCode: CodegenTypes.Int32,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    contentScale: 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
-  ): CodegenTypes.Int32;
-  animateKeyframesV2(
-    driverId: CodegenTypes.Double,
-    hasInteractiveStart: boolean,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startTopLeftRadius: CodegenTypes.Double,
-    startTopRightRadius: CodegenTypes.Double,
-    startBottomRightRadius: CodegenTypes.Double,
-    startBottomLeftRadius: CodegenTypes.Double,
-    startCurveCode: CodegenTypes.Int32,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    startContentScale: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    topLeftRadius: CodegenTypes.Double,
-    topRightRadius: CodegenTypes.Double,
-    bottomRightRadius: CodegenTypes.Double,
-    bottomLeftRadius: CodegenTypes.Double,
-    curveCode: CodegenTypes.Int32,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    contentScale: CodegenTypes.Double,
-    durationMs: CodegenTypes.Double,
-    frames: ReadonlyArray<CodegenTypes.Double>,
-    reduceMotion: CodegenTypes.Int32
-  ): CodegenTypes.Int32;
-  animateTimingFromV2(
-    driverId: CodegenTypes.Double,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startTopLeftRadius: CodegenTypes.Double,
-    startTopRightRadius: CodegenTypes.Double,
-    startBottomRightRadius: CodegenTypes.Double,
-    startBottomLeftRadius: CodegenTypes.Double,
-    startCurveCode: CodegenTypes.Int32,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    startContentScale: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    topLeftRadius: CodegenTypes.Double,
-    topRightRadius: CodegenTypes.Double,
-    bottomRightRadius: CodegenTypes.Double,
-    bottomLeftRadius: CodegenTypes.Double,
-    curveCode: CodegenTypes.Int32,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    contentScale: CodegenTypes.Double,
-    durationMs: CodegenTypes.Double,
-    controlPoint1X: CodegenTypes.Double,
-    controlPoint1Y: CodegenTypes.Double,
-    controlPoint2X: CodegenTypes.Double,
-    controlPoint2Y: CodegenTypes.Double,
-    reduceMotion: CodegenTypes.Int32
-  ): CodegenTypes.Int32;
-  animateSpringFromV2(
-    driverId: CodegenTypes.Double,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startTopLeftRadius: CodegenTypes.Double,
-    startTopRightRadius: CodegenTypes.Double,
-    startBottomRightRadius: CodegenTypes.Double,
-    startBottomLeftRadius: CodegenTypes.Double,
-    startCurveCode: CodegenTypes.Int32,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    startContentScale: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    topLeftRadius: CodegenTypes.Double,
-    topRightRadius: CodegenTypes.Double,
-    bottomRightRadius: CodegenTypes.Double,
-    bottomLeftRadius: CodegenTypes.Double,
-    curveCode: CodegenTypes.Int32,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    contentScale: 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;
-  animateKeyframesFromV2(
-    driverId: CodegenTypes.Double,
-    startX: CodegenTypes.Double,
-    startY: CodegenTypes.Double,
-    startWidth: CodegenTypes.Double,
-    startHeight: CodegenTypes.Double,
-    startTopLeftRadius: CodegenTypes.Double,
-    startTopRightRadius: CodegenTypes.Double,
-    startBottomRightRadius: CodegenTypes.Double,
-    startBottomLeftRadius: CodegenTypes.Double,
-    startCurveCode: CodegenTypes.Int32,
-    startContentTranslateX: CodegenTypes.Double,
-    startContentTranslateY: CodegenTypes.Double,
-    startContentScale: CodegenTypes.Double,
-    x: CodegenTypes.Double,
-    y: CodegenTypes.Double,
-    width: CodegenTypes.Double,
-    height: CodegenTypes.Double,
-    topLeftRadius: CodegenTypes.Double,
-    topRightRadius: CodegenTypes.Double,
-    bottomRightRadius: CodegenTypes.Double,
-    bottomLeftRadius: CodegenTypes.Double,
-    curveCode: CodegenTypes.Int32,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double,
-    contentScale: 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(
@@ -369,11 +123,6 @@ export interface Spec extends TurboModule {
     animationId: CodegenTypes.Int32,
     behavior: CodegenTypes.Int32
   ): ReadonlyArray<CodegenTypes.Double>;
-  cancelAnimationV2(
-    driverId: CodegenTypes.Double,
-    animationId: CodegenTypes.Int32,
-    behavior: CodegenTypes.Int32
-  ): ReadonlyArray<CodegenTypes.Double>;
   destroyDriver(driverId: CodegenTypes.Double): void;
 }
 

package/src/SmoothClipView.ios.tsx

@@ -1,42 +1,132 @@
-import { forwardRef, type ComponentRef, type ReactNode } from 'react';
-import { type ViewProps } from 'react-native';
-import type { SmoothClipDriver } from './driverTypes';
-import { getDriverState } from './driverState';
-import { getSmoothClipCapabilities } from './capabilities';
-import { canonicalizeClipPresentation } from './geometry';
-import { assertInitialPresentationProtocol } from './presentationProtocol';
+/* 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 const SmoothClipView = forwardRef<
-  ComponentRef<typeof NativeSmoothClipView>,
-  SmoothClipViewProps
->(function SmoothClipViewComponent(
-  { driver, children, ...viewProps },
-  forwardedRef
-) {
-  const { driverId, initialPresentation } = getDriverState(driver);
-  const canonical = canonicalizeClipPresentation(initialPresentation);
-  if (canonical === null) return null;
+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 protocolVersion =
-    getSmoothClipCapabilities().presentationProtocolVersion;
-  assertInitialPresentationProtocol(canonical, protocolVersion);
+  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,
-    presentationVersion: protocolVersion,
     initialClipTopLeftRadius: clip.topLeftRadius,
     initialClipTopRightRadius: clip.topRightRadius,
     initialClipBottomRightRadius: clip.bottomRightRadius,
@@ -45,6 +135,15 @@ export const SmoothClipView = forwardRef<
     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 (
@@ -52,4 +151,12 @@ export const SmoothClipView = forwardRef<
       {children}
     </NativeSmoothClipView>
   );
+}
+
+export const SmoothClipView = forwardRef<
+  ComponentRef<typeof NativeSmoothClipView>,
+  SmoothClipViewProps
+>(function SmoothClipViewComponent(props, forwardedRef) {
+  useSingleControllerHost(props.controller);
+  return renderSmoothClipView(props, forwardedRef);
 });

package/src/SmoothClipView.tsx

@@ -1,2 +1,6 @@
-export { SmoothClipView } from './SmoothClipView.ios';
+export {
+  renderSmoothClipView,
+  sanitizeSmoothClipStyle,
+  SmoothClipView,
+} from './SmoothClipView.ios';
 export type { SmoothClipViewProps } from './SmoothClipView.ios';

package/src/SmoothClipViewNativeComponent.ts

@@ -12,8 +12,6 @@ export interface NativeProps extends ViewProps {
   initialClipY: CodegenTypes.Double;
   initialClipWidth: CodegenTypes.Double;
   initialClipHeight: CodegenTypes.Double;
-  initialClipRadius: CodegenTypes.Double;
-  presentationVersion: CodegenTypes.Int32;
   initialClipTopLeftRadius: CodegenTypes.Double;
   initialClipTopRightRadius: CodegenTypes.Double;
   initialClipBottomRightRadius: CodegenTypes.Double;
@@ -22,28 +20,19 @@ export interface NativeProps extends ViewProps {
   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,
-    contentTranslateX: CodegenTypes.Double,
-    contentTranslateY: CodegenTypes.Double
-  ) => void;
-  setClipPresentationV2: (
     viewRef: React.ElementRef<HostComponent<NativeProps>>,
     x: CodegenTypes.Double,
     y: CodegenTypes.Double,
@@ -56,16 +45,21 @@ interface NativeCommands {
     curveCode: CodegenTypes.Int32,
     contentTranslateX: CodegenTypes.Double,
     contentTranslateY: CodegenTypes.Double,
-    contentScale: 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',
-    'setClipPresentationV2',
-  ],
+  supportedCommands: ['setClipPresentation'],
 });
 
 export default codegenNativeComponent<NativeProps>(