react-native-smooth-clip-view 0.2.2 → 0.2.5

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

@@ -0,0 +1,33 @@
+/**
+ * Exact cubic-Bézier control points for the standard polynomial easings, for
+ * use as `TimingClipAnimation.controlPoints`.
+ *
+ * Native transitions and a parallel Reanimated animation (content driven by
+ * `withTiming` alongside a native `animateTo`) only stay in sync when both
+ * sides run the identical curve. Each entry below is the exact single-Bézier
+ * form of the matching Reanimated easing — not an approximation — so pairing
+ * e.g. `Easing.out(Easing.cubic)` with `ClipEasings.easeOutCubic` is
+ * mathematically lossless:
+ *
+ * - `linear`       ↔ `Easing.linear`
+ * - `easeInQuad`   ↔ `Easing.in(Easing.quad)`
+ * - `easeOutQuad`  ↔ `Easing.out(Easing.quad)`
+ * - `easeInCubic`  ↔ `Easing.in(Easing.cubic)`
+ * - `easeOutCubic` ↔ `Easing.out(Easing.cubic)`
+ *
+ * With x-control-points at 1/3 and 2/3 the Bézier's x(t) is the identity, so
+ * y(t) is the easing polynomial itself (e.g. `easeOutCubic`: y = 1 − (1−t)³).
+ *
+ * `Easing.inOut(Easing.cubic)` (and the other `inOut` polynomials) are
+ * piecewise and have NO exact single-Bézier form — for those, define one
+ * `Easing.bezier(x1, y1, x2, y2)` and pass the same four numbers as
+ * `controlPoints` so both sides share the same (approximated) curve.
+ */
+export declare const ClipEasings: {
+    readonly linear: readonly [0, 0, 1, 1];
+    readonly easeInQuad: readonly [number, 0, number, number];
+    readonly easeOutQuad: readonly [number, number, number, 1];
+    readonly easeInCubic: readonly [number, 0, number, 0];
+    readonly easeOutCubic: readonly [number, 1, number, 1];
+};
+//# sourceMappingURL=easings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"easings.d.ts","sourceRoot":"","sources":["../../../src/easings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW;;;;;;CAMsD,CAAC"}

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

@@ -2,6 +2,7 @@ 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 { ClipEasings } from './easings.js';
 export { normalizeClipGeometry } from './geometry.js';
 export { createClipPresentation } from './geometry.js';
 export type { ClipBounds, ClipGeometry, SmoothClipPresentation, } from './geometry.js';

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,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,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"}

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

@@ -2,6 +2,7 @@ export { SmoothClipView } from './SmoothClipView.web.js';
 export type { SmoothClipViewProps } from './SmoothClipView.web.js';
 export { useSmoothClipDriver } from './drivers';
 export type { ClipAnimationResult, ClipReduceMotion, KeyframedClipAnimation, SmoothClipDriver, SmoothClipDriverOptions, SmoothClipReactControls, SmoothClipUIControls, SmoothClipAnimation, SpringClipAnimation, TimingClipAnimation, } from './driverTypes.js';
+export { ClipEasings } from './easings.js';
 export { normalizeClipGeometry } from './geometry.js';
 export { createClipPresentation } from './geometry.js';
 export type { ClipBounds, ClipGeometry, SmoothClipPresentation, } from './geometry.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAsB,CAAC;AACtD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAsB,CAAC;AAChE,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,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.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAsB,CAAC;AACtD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAsB,CAAC;AAChE,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-smooth-clip-view",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Layout-free animated rounded clipping for React Native Fabric",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",

package/src/driverTypes.ts

@@ -3,28 +3,59 @@ 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];
+/** Options shared by every animation kind. */
+type ClipAnimationBase = Readonly<{
+  /**
+   * Explicit start: fuses a `setScalars(from…)` take-ownership hot write
+   * immediately before the animation, so native starts from exactly this
+   * presentation instead of its last delivered value. Use at a gesture
+   * release when the freshest sample (e.g. the UP event's position) never
+   * reached native — a gated per-frame reaction may not have flushed it.
+   * Also re-grabs from a running animation (which an implicit interactive
+   * start would silently skip). Non-finite `from` rejects the whole call.
+   * On the native drivers `driver.presentation.value` is not written from
+   * `from` (it stays stale until success sets it to the target); the web
+   * fallback does write it — its presentation SharedValue is the render
+   * channel itself. Against a held pending-animation latch the seed is
+   * dropped by design — latch intent wins.
+   *
+   * Keyframes interpolate absolutely, so pass `frames[0].presentation` —
+   * the seed renders it before the first animation frame, making the
+   * handoff continuous.
+   *
+   * iOS note: keyframes start exactly at `from` (frame 0 travels in-band);
+   * timing/spring sample their Core Animation from-value off the
+   * presentation layer — the last committed frame, at most one frame behind
+   * `from` — identical to the two-call pattern this option desugars to.
+   */
+  from?: SmoothClipPresentation;
 }>;
 
-export type SpringClipAnimation = Readonly<{
-  type: 'spring';
-  mass?: number;
-  stiffness?: number;
-  damping?: number;
-  initialVelocity?: number | 'inherit';
-}>;
+export type TimingClipAnimation = ClipAnimationBase &
+  Readonly<{
+    type: 'timing';
+    duration: number;
+    controlPoints: readonly [number, number, number, number];
+  }>;
 
-export type KeyframedClipAnimation = Readonly<{
-  type: 'keyframes';
-  duration: number;
-  frames: readonly Readonly<{
-    offset: number;
-    presentation: SmoothClipPresentation;
-  }>[];
-}>;
+export type SpringClipAnimation = ClipAnimationBase &
+  Readonly<{
+    type: 'spring';
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+    initialVelocity?: number | 'inherit';
+  }>;
+
+export type KeyframedClipAnimation = ClipAnimationBase &
+  Readonly<{
+    type: 'keyframes';
+    duration: number;
+    frames: readonly Readonly<{
+      offset: number;
+      presentation: SmoothClipPresentation;
+    }>[];
+  }>;
 
 export type SmoothClipAnimation =
   TimingClipAnimation | SpringClipAnimation | KeyframedClipAnimation;
@@ -50,6 +81,9 @@ export type SmoothClipUIControls = Readonly<{
    * `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.
+   * To hand off into an animation from a fresher value than the last hot
+   * write, pass the geometry as `animation.from` to `animateTo` — it fuses
+   * this call and the handoff into one.
    */
   setScalars(
     x: number,

package/src/drivers.android.ts

@@ -1,6 +1,8 @@
-export { useSmoothClipDriver } from './drivers.ios';
+// Platform re-export only — the implementation is shared with iOS.
+// Edit drivers.native.ts, not this file.
+export { useSmoothClipDriver } from './drivers.native';
 export type {
   KeyframedClipAnimation,
   SpringClipAnimation,
   TimingClipAnimation,
-} from './drivers.ios';
+} from './drivers.native';