react-native-smooth-clip-view 0.1.0

package/package.json

@@ -0,0 +1,201 @@
+{
+  "name": "react-native-smooth-clip-view",
+  "version": "0.1.0",
+  "description": "Layout-free animated rounded clipping for React Native Fabric",
+  "main": "./lib/module/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./src/index.ts",
+      "react-native-smooth-clip-view-source": "./src/index.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "SmoothClipView.podspec",
+    "README.md",
+    "LICENSE",
+    "!ios/build",
+    "!ios/tests",
+    "!android/build",
+    "!android/src/test",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-smooth-clip-view-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "test:android": "cd example/android && ./gradlew :react-native-smooth-clip-view:testDebugUnitTest",
+    "pack:check": "npm pack --dry-run --json",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "reanimated",
+    "animation",
+    "clipping",
+    "fabric",
+    "ios",
+    "android",
+    "web"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kbrattli/react-native-smooth-clip-view.git"
+  },
+  "author": "kbrattli <kbrattli@live.no> (https://github.com/kbrattli)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kbrattli/react-native-smooth-clip-view/issues"
+  },
+  "homepage": "https://github.com/kbrattli/react-native-smooth-clip-view#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@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",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@types/react": "^19.2.0",
+    "commitlint": "^21.0.2",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "hermes-eslint": "^0.37.0",
+    "jest": "^29.7.0",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.86.0",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-reanimated": "4.5.0",
+    "react-native-worklets": "0.10.0",
+    "release-it": "^20.2.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.85.0",
+    "react-native-reanimated": ">=4.3.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "SmoothClipViewSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.smoothclipview"
+    },
+    "ios": {
+      "components": {
+        "SmoothClipView": {
+          "className": "SmoothClipView"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "watchman": false,
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "react-native-smooth-clip-view-source"
+      ]
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.63.0"
+  }
+}

package/src/SmoothClipView.tsx

@@ -0,0 +1,72 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import Animated, {
+  dispatchCommand,
+  useAnimatedReaction,
+  useAnimatedRef,
+  type SharedValue,
+} from 'react-native-reanimated';
+import NativeSmoothClipView, {
+  type NativeProps,
+} from './SmoothClipViewNativeComponent';
+import {
+  clipGeometryEquals,
+  isFiniteClipGeometry,
+  type ClipGeometry,
+} from './geometry';
+
+const AnimatedNativeSmoothClipView =
+  Animated.createAnimatedComponent(NativeSmoothClipView);
+
+export type SmoothClipViewProps = ViewProps & {
+  initialClip: ClipGeometry;
+  animatedClip: SharedValue<ClipGeometry>;
+  children?: ReactNode;
+};
+
+export function SmoothClipView({
+  initialClip,
+  animatedClip,
+  children,
+  ...viewProps
+}: SmoothClipViewProps) {
+  const nativeRef =
+    useAnimatedRef<React.ComponentRef<typeof NativeSmoothClipView>>();
+
+  useAnimatedReaction(
+    () => animatedClip.value,
+    (clip, previousClip) => {
+      if (
+        !isFiniteClipGeometry(clip) ||
+        clipGeometryEquals(previousClip, clip)
+      ) {
+        return;
+      }
+
+      dispatchCommand(nativeRef, 'setClipGeometry', [
+        clip.x,
+        clip.y,
+        clip.width,
+        clip.height,
+        clip.radius,
+      ]);
+    },
+    [nativeRef, animatedClip]
+  );
+
+  const nativeProps: NativeProps = {
+    ...viewProps,
+    initialClipX: initialClip.x,
+    initialClipY: initialClip.y,
+    initialClipWidth: initialClip.width,
+    initialClipHeight: initialClip.height,
+    initialClipRadius: initialClip.radius,
+  };
+
+  return (
+    <AnimatedNativeSmoothClipView ref={nativeRef} {...nativeProps}>
+      {children}
+    </AnimatedNativeSmoothClipView>
+  );
+}

package/src/SmoothClipView.web.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } 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 { createWebClipPath } from './webClipPath';
+
+export type SmoothClipViewProps = ViewProps & {
+  initialClip: ClipGeometry;
+  animatedClip: SharedValue<ClipGeometry>;
+  children?: ReactNode;
+};
+
+/** Build-safe fallback. Web performance is intentionally outside the POC. */
+export function SmoothClipView({
+  initialClip,
+  animatedClip,
+  children,
+  style,
+  ...viewProps
+}: SmoothClipViewProps) {
+  const acceptedClip = useSharedValue(initialClip);
+  const initialClipStyle = {
+    clipPath: createWebClipPath(initialClip),
+    overflow: 'hidden',
+  } as unknown as ViewStyle;
+
+  useAnimatedReaction(
+    () => animatedClip.value,
+    (clip, previousClip) => {
+      if (
+        isFiniteClipGeometry(clip) &&
+        !clipGeometryEquals(previousClip, clip)
+      ) {
+        acceptedClip.value = clip;
+      }
+    },
+    [animatedClip, acceptedClip]
+  );
+
+  const clipStyle = useAnimatedStyle(() => {
+    const clip = acceptedClip.value;
+    return {
+      clipPath: createWebClipPath(clip),
+      overflow: 'hidden',
+    };
+  });
+
+  return (
+    <Animated.View {...viewProps} style={[style, initialClipStyle, clipStyle]}>
+      {children}
+    </Animated.View>
+  );
+}

package/src/SmoothClipViewNativeComponent.ts

@@ -0,0 +1,34 @@
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  initialClipX: CodegenTypes.Double;
+  initialClipY: CodegenTypes.Double;
+  initialClipWidth: CodegenTypes.Double;
+  initialClipHeight: CodegenTypes.Double;
+  initialClipRadius: 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;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['setClipGeometry'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'SmoothClipView'
+) as HostComponent<NativeProps>;

package/src/geometry.ts

@@ -0,0 +1,83 @@
+export type ClipGeometry = Readonly<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+}>;
+
+export type ClipBounds = Readonly<{
+  width: number;
+  height: number;
+}>;
+
+export function isFiniteClipGeometry(geometry: ClipGeometry): boolean {
+  'worklet';
+  return (
+    Number.isFinite(geometry.x) &&
+    Number.isFinite(geometry.y) &&
+    Number.isFinite(geometry.width) &&
+    Number.isFinite(geometry.height) &&
+    Number.isFinite(geometry.radius)
+  );
+}
+
+export function clipGeometryEquals(
+  first: ClipGeometry | null,
+  second: ClipGeometry
+): boolean {
+  'worklet';
+  return (
+    first !== null &&
+    first.x === second.x &&
+    first.y === second.y &&
+    first.width === second.width &&
+    first.height === second.height &&
+    first.radius === second.radius
+  );
+}
+
+/**
+ * Mirrors the native geometry contract for tests and non-native fallbacks.
+ * Native remains authoritative because its bounds are the actual rendered size.
+ */
+export function normalizeClipGeometry(
+  geometry: ClipGeometry,
+  bounds: ClipBounds
+): ClipGeometry | null {
+  'worklet';
+  const values = [
+    geometry.x,
+    geometry.y,
+    geometry.width,
+    geometry.height,
+    geometry.radius,
+    bounds.width,
+    bounds.height,
+  ];
+
+  if (!values.every(Number.isFinite)) return null;
+
+  const boundsWidth = Math.max(0, bounds.width);
+  const boundsHeight = Math.max(0, bounds.height);
+  const requestedWidth = Math.max(0, geometry.width);
+  const requestedHeight = Math.max(0, geometry.height);
+
+  const left = Math.min(boundsWidth, Math.max(0, geometry.x));
+  const top = Math.min(boundsHeight, Math.max(0, geometry.y));
+  const right = Math.min(boundsWidth, Math.max(0, geometry.x + requestedWidth));
+  const bottom = Math.min(
+    boundsHeight,
+    Math.max(0, geometry.y + requestedHeight)
+  );
+  const width = Math.max(0, right - left);
+  const height = Math.max(0, bottom - top);
+
+  return {
+    x: left,
+    y: top,
+    width,
+    height,
+    radius: Math.min(Math.max(0, geometry.radius), Math.min(width, height) / 2),
+  };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { SmoothClipView } from './SmoothClipView';
+export type { SmoothClipViewProps } from './SmoothClipView';
+export { normalizeClipGeometry } from './geometry';
+export type { ClipBounds, ClipGeometry } from './geometry';

package/src/index.web.ts

@@ -0,0 +1,4 @@
+export { SmoothClipView } from './SmoothClipView.web';
+export type { SmoothClipViewProps } from './SmoothClipView.web';
+export { normalizeClipGeometry } from './geometry';
+export type { ClipBounds, ClipGeometry } from './geometry';

package/src/webClipPath.ts

@@ -0,0 +1,30 @@
+import type { ClipGeometry } from './geometry';
+
+function px(value: number): string {
+  'worklet';
+  return `${value}px`;
+}
+
+/**
+ * Creates a fixed-host CSS clip. Percentage/right/bottom anchored descendants
+ * continue resolving against the host because this never changes its layout.
+ */
+export function createWebClipPath(geometry: ClipGeometry): string {
+  'worklet';
+  const width = Math.max(0, geometry.width);
+  const height = Math.max(0, geometry.height);
+  const left = Math.max(0, geometry.x);
+  const top = Math.max(0, geometry.y);
+  const rightEdge = Math.max(0, geometry.x + width);
+  const bottomEdge = Math.max(0, geometry.y + height);
+  const radius = Math.min(
+    Math.max(0, geometry.radius),
+    Math.min(width, height) / 2
+  );
+
+  return `inset(${px(top)} max(0px, calc(100% - ${px(
+    rightEdge
+  )})) max(0px, calc(100% - ${px(bottomEdge)})) ${px(
+    left
+  )} round ${px(radius)})`;
+}