@rootnative/inertia 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -1
- package/README.md +1 -1
- package/dist/chunk-24NUL23E.js +8 -0
- package/dist/chunk-4XBX7KOD.js +8 -0
- package/dist/{chunk-OBRGJAST.js → chunk-6AN5X3YE.js} +3 -3
- package/dist/{chunk-WGCF3WQG.js → chunk-6NOCY764.js} +2 -2
- package/dist/{chunk-KBFN4TRO.mjs → chunk-6YIUETBF.mjs} +1 -1
- package/dist/{chunk-6V7MOBXO.js → chunk-E3ALFSH2.js} +64 -33
- package/dist/{chunk-ZOBOKLAS.mjs → chunk-EN4PN7X3.mjs} +1 -1
- package/dist/{chunk-RUIOM2YZ.mjs → chunk-GSUC4HWP.mjs} +1 -1
- package/dist/{chunk-QJYFTTM2.js → chunk-IHVMNOS4.js} +2 -2
- package/dist/{chunk-HPJMIBBK.mjs → chunk-IX6SEOSK.mjs} +41 -12
- package/dist/{chunk-52QSN2VQ.mjs → chunk-JBK5ZLMH.mjs} +1 -1
- package/dist/{chunk-OW5XTGVN.mjs → chunk-L4JFECXU.mjs} +2 -2
- package/dist/{chunk-VSK2E35J.mjs → chunk-M4766VUV.mjs} +1 -1
- package/dist/{chunk-Z3HCJ43H.mjs → chunk-MFAFB4K7.mjs} +1 -1
- package/dist/{chunk-4NAMD62I.js → chunk-MUT6BTZS.js} +7 -7
- package/dist/{chunk-WMLS4TMX.mjs → chunk-QNLSCOR5.mjs} +1 -1
- package/dist/{chunk-REYL77RE.mjs → chunk-W7NTRSPD.mjs} +17 -10
- package/dist/{chunk-PM6CVGXJ.js → chunk-WNVHPMBI.js} +16 -8
- package/dist/chunk-Z5USXWTE.js +8 -0
- package/dist/{chunk-QYR66E2G.js → chunk-ZBHQPVWE.js} +2 -2
- package/dist/gestureLayer/index.js +10 -10
- package/dist/gestureLayer/index.mjs +3 -3
- package/dist/index.d.mts +91 -4
- package/dist/index.d.ts +91 -4
- package/dist/index.js +69 -53
- package/dist/index.mjs +24 -20
- package/dist/motion/FlatList.js +5 -5
- package/dist/motion/FlatList.mjs +4 -4
- package/dist/motion/Image.js +5 -5
- package/dist/motion/Image.mjs +4 -4
- package/dist/motion/Pressable.js +5 -5
- package/dist/motion/Pressable.mjs +4 -4
- package/dist/motion/ScrollView.js +5 -5
- package/dist/motion/ScrollView.mjs +4 -4
- package/dist/motion/Text.js +5 -5
- package/dist/motion/Text.mjs +4 -4
- package/dist/motion/View.js +5 -5
- package/dist/motion/View.mjs +4 -4
- package/dist/touch/index.js +3 -3
- package/dist/touch/index.mjs +1 -1
- package/llms.txt +19 -2
- package/package.json +1 -1
- package/src/index.ts +5 -0
- package/src/motion/createMotionComponent.tsx +45 -10
- package/src/stagger/Stagger.tsx +75 -0
- package/src/stagger/StaggerContext.ts +25 -0
- package/src/stagger/index.ts +2 -0
- package/src/transitions/index.ts +6 -1
- package/src/transitions/resolve.ts +7 -1
- package/src/transitions/runtime.ts +22 -7
- package/src/values/index.ts +1 -0
- package/src/values/useInterpolatedStyle.ts +37 -7
- package/dist/chunk-NPJ46457.js +0 -8
- package/dist/chunk-YUTS6JRU.js +0 -8
- package/dist/chunk-ZSOCRHU3.js +0 -8
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { isWorkletFunction } from 'react-native-worklets';
|
|
2
|
-
import { withSequence, Easing, withDecay, withTiming, withSpring, withRepeat
|
|
2
|
+
import { withDelay, withSequence, Easing, withDecay, withTiming, withSpring, withRepeat } from 'react-native-reanimated';
|
|
3
3
|
|
|
4
4
|
// src/transitions/easing.ts
|
|
5
5
|
|
|
@@ -210,26 +210,33 @@ function bezier(x1, y1, x2, y2, source) {
|
|
|
210
210
|
return Easing.bezier(x1, y1, x2, y2);
|
|
211
211
|
}
|
|
212
212
|
var DEFAULT_TIMING_DURATION2 = 250;
|
|
213
|
-
function buildReleaseAnimation(transition, toValue) {
|
|
213
|
+
function buildReleaseAnimation(transition, toValue, callback) {
|
|
214
214
|
"worklet";
|
|
215
|
-
if (transition.type === "no-animation")
|
|
215
|
+
if (transition.type === "no-animation") {
|
|
216
|
+
if (callback) callback(true, toValue);
|
|
217
|
+
return toValue;
|
|
218
|
+
}
|
|
216
219
|
if (transition.type === "decay") {
|
|
217
220
|
const cfg = { velocity: transition.velocity ?? 0 };
|
|
218
221
|
if (transition.deceleration !== void 0) {
|
|
219
222
|
cfg.deceleration = transition.deceleration;
|
|
220
223
|
}
|
|
221
224
|
if (transition.clamp !== void 0) cfg.clamp = transition.clamp;
|
|
222
|
-
return withDecay(cfg);
|
|
225
|
+
return withDecay(cfg, callback);
|
|
223
226
|
}
|
|
224
227
|
if (transition.type === "timing") {
|
|
225
228
|
const e = transition.easing;
|
|
226
229
|
const easingFn = e && typeof e === "object" && "factory" in e ? e.factory() : e ?? Easing.inOut(Easing.ease);
|
|
227
|
-
return withTiming(
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
230
|
+
return withTiming(
|
|
231
|
+
toValue,
|
|
232
|
+
{
|
|
233
|
+
duration: transition.duration ?? DEFAULT_TIMING_DURATION2,
|
|
234
|
+
easing: easingFn
|
|
235
|
+
},
|
|
236
|
+
callback
|
|
237
|
+
);
|
|
231
238
|
}
|
|
232
|
-
return withSpring(toValue, springToReanimated(transition));
|
|
239
|
+
return withSpring(toValue, springToReanimated(transition), callback);
|
|
233
240
|
}
|
|
234
241
|
|
|
235
242
|
// src/transitions/keys.ts
|
|
@@ -277,4 +284,4 @@ function stableStringify(v) {
|
|
|
277
284
|
return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
|
|
278
285
|
}
|
|
279
286
|
|
|
280
|
-
export { DEFAULT_SPRING, buildReleaseAnimation, cubicBezier, ensureWorkletEasing, isTopLevelTransition, resolveAnimatableValue, resolveTransition, springToReanimated, stableSig, warnNonWorkletOnce, warnOnce };
|
|
287
|
+
export { DEFAULT_SPRING, applyDelay, buildReleaseAnimation, cubicBezier, ensureWorkletEasing, isTopLevelTransition, resolveAnimatableValue, resolveTransition, springToReanimated, stableSig, warnNonWorkletOnce, warnOnce };
|
|
@@ -212,26 +212,33 @@ function bezier(x1, y1, x2, y2, source) {
|
|
|
212
212
|
return reactNativeReanimated.Easing.bezier(x1, y1, x2, y2);
|
|
213
213
|
}
|
|
214
214
|
var DEFAULT_TIMING_DURATION2 = 250;
|
|
215
|
-
function buildReleaseAnimation(transition, toValue) {
|
|
215
|
+
function buildReleaseAnimation(transition, toValue, callback) {
|
|
216
216
|
"worklet";
|
|
217
|
-
if (transition.type === "no-animation")
|
|
217
|
+
if (transition.type === "no-animation") {
|
|
218
|
+
if (callback) callback(true, toValue);
|
|
219
|
+
return toValue;
|
|
220
|
+
}
|
|
218
221
|
if (transition.type === "decay") {
|
|
219
222
|
const cfg = { velocity: transition.velocity ?? 0 };
|
|
220
223
|
if (transition.deceleration !== void 0) {
|
|
221
224
|
cfg.deceleration = transition.deceleration;
|
|
222
225
|
}
|
|
223
226
|
if (transition.clamp !== void 0) cfg.clamp = transition.clamp;
|
|
224
|
-
return reactNativeReanimated.withDecay(cfg);
|
|
227
|
+
return reactNativeReanimated.withDecay(cfg, callback);
|
|
225
228
|
}
|
|
226
229
|
if (transition.type === "timing") {
|
|
227
230
|
const e = transition.easing;
|
|
228
231
|
const easingFn = e && typeof e === "object" && "factory" in e ? e.factory() : e ?? reactNativeReanimated.Easing.inOut(reactNativeReanimated.Easing.ease);
|
|
229
|
-
return reactNativeReanimated.withTiming(
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
232
|
+
return reactNativeReanimated.withTiming(
|
|
233
|
+
toValue,
|
|
234
|
+
{
|
|
235
|
+
duration: transition.duration ?? DEFAULT_TIMING_DURATION2,
|
|
236
|
+
easing: easingFn
|
|
237
|
+
},
|
|
238
|
+
callback
|
|
239
|
+
);
|
|
233
240
|
}
|
|
234
|
-
return reactNativeReanimated.withSpring(toValue, springToReanimated(transition));
|
|
241
|
+
return reactNativeReanimated.withSpring(toValue, springToReanimated(transition), callback);
|
|
235
242
|
}
|
|
236
243
|
|
|
237
244
|
// src/transitions/keys.ts
|
|
@@ -280,6 +287,7 @@ function stableStringify(v) {
|
|
|
280
287
|
}
|
|
281
288
|
|
|
282
289
|
exports.DEFAULT_SPRING = DEFAULT_SPRING;
|
|
290
|
+
exports.applyDelay = applyDelay;
|
|
283
291
|
exports.buildReleaseAnimation = buildReleaseAnimation;
|
|
284
292
|
exports.cubicBezier = cubicBezier;
|
|
285
293
|
exports.ensureWorkletEasing = ensureWorkletEasing;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
5
|
|
|
6
|
-
var MotionScrollView =
|
|
6
|
+
var MotionScrollView = chunkE3ALFSH2_js.createMotionComponent(reactNative.ScrollView);
|
|
7
7
|
|
|
8
8
|
exports.MotionScrollView = MotionScrollView;
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var chunkMUT6BTZS_js = require('../chunk-MUT6BTZS.js');
|
|
4
|
+
var chunk6AN5X3YE_js = require('../chunk-6AN5X3YE.js');
|
|
5
|
+
var chunkWNVHPMBI_js = require('../chunk-WNVHPMBI.js');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var reactNativeReanimated = require('react-native-reanimated');
|
|
8
8
|
|
|
9
9
|
function useGestureLayer(states, options = {}) {
|
|
10
10
|
const { disabled: isDisabled = false, transition: transitionInput } = options;
|
|
11
|
-
const shouldReduceMotion =
|
|
12
|
-
const transition =
|
|
11
|
+
const shouldReduceMotion = chunk6AN5X3YE_js.useShouldReduceMotion();
|
|
12
|
+
const transition = chunk6AN5X3YE_js.resolveNamedTransitionProp(
|
|
13
13
|
transitionInput,
|
|
14
|
-
|
|
14
|
+
chunk6AN5X3YE_js.useNamedTransitions()
|
|
15
15
|
);
|
|
16
|
-
const gesture =
|
|
16
|
+
const gesture = chunkMUT6BTZS_js.useGesture(transition);
|
|
17
17
|
const disabledProgress = reactNativeReanimated.useSharedValue(0);
|
|
18
|
-
const transitionSig =
|
|
18
|
+
const transitionSig = chunkWNVHPMBI_js.stableSig(transition);
|
|
19
19
|
react.useEffect(() => {
|
|
20
20
|
const target = isDisabled ? 1 : 0;
|
|
21
21
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : disabledTransition(transition) ?? { type: "spring" };
|
|
22
|
-
disabledProgress.value =
|
|
22
|
+
disabledProgress.value = chunkWNVHPMBI_js.resolveTransition(cfg, target);
|
|
23
23
|
}, [isDisabled, shouldReduceMotion, transitionSig, disabledProgress]);
|
|
24
24
|
const meta = react.useMemo(() => {
|
|
25
25
|
const layers = {
|
|
@@ -154,7 +154,7 @@ function useGestureLayer(states, options = {}) {
|
|
|
154
154
|
}
|
|
155
155
|
function disabledTransition(transition) {
|
|
156
156
|
if (!transition) return void 0;
|
|
157
|
-
if (
|
|
157
|
+
if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
|
|
158
158
|
return void 0;
|
|
159
159
|
}
|
|
160
160
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useGesture } from '../chunk-
|
|
2
|
-
import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions } from '../chunk-
|
|
3
|
-
import { stableSig, resolveTransition, isTopLevelTransition } from '../chunk-
|
|
1
|
+
import { useGesture } from '../chunk-L4JFECXU.mjs';
|
|
2
|
+
import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions } from '../chunk-MFAFB4K7.mjs';
|
|
3
|
+
import { stableSig, resolveTransition, isTopLevelTransition } from '../chunk-W7NTRSPD.mjs';
|
|
4
4
|
import { useEffect, useMemo } from 'react';
|
|
5
5
|
import { useSharedValue, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
|
|
6
6
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ComponentType, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
|
-
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
4
|
+
import { TextStyle, ImageStyle, ViewStyle, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
5
5
|
import { M as MotionComponent, V as VariantsMap, a as MotionProps, N as NamedTransitions, b as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, c as TransitionName, d as VariantController } from './types-DyJpG64F.mjs';
|
|
6
6
|
export { e as AnimateStyle, f as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, g as EasingFunction, h as EasingFunctionFactory, i as GestureSubStates, j as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, k as RepeatConfig, l as SequenceStep, m as TimingTransition, n as Transition } from './types-DyJpG64F.mjs';
|
|
7
7
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
@@ -174,6 +174,64 @@ interface PresenceContextValue {
|
|
|
174
174
|
*/
|
|
175
175
|
declare function usePresence(): PresenceContextValue | null;
|
|
176
176
|
|
|
177
|
+
interface StaggerProps {
|
|
178
|
+
children?: ReactNode;
|
|
179
|
+
/**
|
|
180
|
+
* Milliseconds between consecutive children. Child `i` (in render order)
|
|
181
|
+
* receives a delay of `delay + i * interval`.
|
|
182
|
+
*/
|
|
183
|
+
interval: number;
|
|
184
|
+
/**
|
|
185
|
+
* Base delay in milliseconds applied to every child before the interval,
|
|
186
|
+
* so the whole cascade can start late without pushing the spacing into
|
|
187
|
+
* each child. Defaults to `0`.
|
|
188
|
+
*/
|
|
189
|
+
delay?: number;
|
|
190
|
+
/**
|
|
191
|
+
* Which end of the child list starts the cascade. `'first'` (default)
|
|
192
|
+
* staggers top-down in render order; `'last'` reverses it, so the final
|
|
193
|
+
* child animates first.
|
|
194
|
+
*/
|
|
195
|
+
from?: 'first' | 'last';
|
|
196
|
+
/**
|
|
197
|
+
* Turn the stagger on or off in one place. When `false`, every child gets
|
|
198
|
+
* a delay of `0` — the single-switch escape hatch for "cascade in, but
|
|
199
|
+
* not back out": pass `enabled={revealed}` and the hide direction snaps
|
|
200
|
+
* together. Defaults to `true`.
|
|
201
|
+
*/
|
|
202
|
+
enabled?: boolean;
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* Assign each child a stagger delay from its position, so a list entrance
|
|
206
|
+
* cascades without every child computing `index * ms` itself.
|
|
207
|
+
*
|
|
208
|
+
* The parent owns the timing: reordering, filtering, or reversing the list
|
|
209
|
+
* re-derives every delay from the new render order, and `enabled` turns the
|
|
210
|
+
* whole cascade off in one place. Each child slot gets its own provider, so
|
|
211
|
+
* a `Motion.*` primitive anywhere inside child `i`'s subtree inherits child
|
|
212
|
+
* `i`'s delay.
|
|
213
|
+
*
|
|
214
|
+
* The delay applies to the declarative animations of the `Motion.*`
|
|
215
|
+
* primitives underneath — the mount animation (`initial` → `animate`) and
|
|
216
|
+
* any later `animate` change. It deliberately does not delay `gesture`
|
|
217
|
+
* feedback, `<Presence>` exits, or reduced-motion snaps.
|
|
218
|
+
*
|
|
219
|
+
* `<Stagger>` renders no host view — only per-child context providers.
|
|
220
|
+
*/
|
|
221
|
+
declare function Stagger({ children, interval, delay, from, enabled, }: StaggerProps): react.JSX.Element;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* The stagger delay (in milliseconds) assigned to this element's child slot
|
|
225
|
+
* by the nearest `<Stagger>` ancestor. `0` when there is none, when the
|
|
226
|
+
* stagger is disabled, or for the first child of a zero-`delay` stagger.
|
|
227
|
+
*
|
|
228
|
+
* The `Motion.*` primitives consume this automatically. Custom animated
|
|
229
|
+
* components built on `resolveTransition` / `resolveAnimatableValue` call
|
|
230
|
+
* this hook and add the returned value to their animation delay so they
|
|
231
|
+
* participate in a `<Stagger>` the same way the built-in primitives do.
|
|
232
|
+
*/
|
|
233
|
+
declare function useStaggerDelay(): number;
|
|
234
|
+
|
|
177
235
|
/**
|
|
178
236
|
* UI-thread callback Reanimated invokes when an animation settles. Must be a
|
|
179
237
|
* worklet — callers either author one with `'worklet'` or build one via
|
|
@@ -187,6 +245,13 @@ type AnimationCallback = (finished?: boolean, current?: number | string) => void
|
|
|
187
245
|
* `withDecay` call.
|
|
188
246
|
*/
|
|
189
247
|
type CallbackFactory = (phase: 'step' | 'animation', step: number | undefined) => AnimationCallback | undefined;
|
|
248
|
+
/**
|
|
249
|
+
* Wrap an animation in `withDelay`. A missing / zero / negative delay is a
|
|
250
|
+
* pass-through. Exported for the factory's stagger wrap, which must delay a
|
|
251
|
+
* fully-resolved animation exactly once — merging the delay into the base
|
|
252
|
+
* config instead would re-apply it per sequence step.
|
|
253
|
+
*/
|
|
254
|
+
declare function applyDelay(animation: unknown, delay: number | undefined): unknown;
|
|
190
255
|
/**
|
|
191
256
|
* Build a Reanimated animation for a single property. Runs on the JS thread
|
|
192
257
|
* once per change and produces a baked `withSpring` / `withTiming` /
|
|
@@ -293,8 +358,14 @@ declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: numb
|
|
|
293
358
|
*
|
|
294
359
|
* For decay transitions, `toValue` is ignored — decay decelerates from the
|
|
295
360
|
* SV's current position via its own physics. Pass `0` if you don't have one.
|
|
361
|
+
*
|
|
362
|
+
* `callback`, when provided, fires once when the animation settles — the same
|
|
363
|
+
* `(finished) => void` shape Reanimated's `with*` factories accept. It runs on
|
|
364
|
+
* the UI thread, so bridge to JS with `runOnJS(...)` inside it. For
|
|
365
|
+
* `no-animation` the callback fires synchronously with `finished: true`, since
|
|
366
|
+
* a direct assignment has no settle point of its own.
|
|
296
367
|
*/
|
|
297
|
-
declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number): unknown;
|
|
368
|
+
declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number, callback?: AnimationCallback): unknown;
|
|
298
369
|
|
|
299
370
|
/**
|
|
300
371
|
* The one colour spelling Reanimated's animation drivers cannot accept.
|
|
@@ -618,6 +689,22 @@ type InterpolatedStyleMap = {
|
|
|
618
689
|
} & {
|
|
619
690
|
[K in ColorStyleKey]?: readonly string[];
|
|
620
691
|
};
|
|
692
|
+
/**
|
|
693
|
+
* The style shape a map of `K` produces. Transform keys collapse into the
|
|
694
|
+
* single `transform` array the worklet emits; every other key survives under
|
|
695
|
+
* its own name, typed from the RN style family it belongs to.
|
|
696
|
+
*
|
|
697
|
+
* This is what lets the return narrow to `ViewStyle` at a call site whose map
|
|
698
|
+
* holds only view keys. Reanimated's own `useAnimatedStyle` resolves to
|
|
699
|
+
* `DefaultStyle` (`ViewStyle | ImageStyle | TextStyle`), and that union is
|
|
700
|
+
* rejected inside a `StyleProp<ViewStyle>` array — `TextStyle` fails on
|
|
701
|
+
* `cursor` — so a consumer had to cast.
|
|
702
|
+
*/
|
|
703
|
+
type InterpolatedStyle<K extends keyof InterpolatedStyleMap> = {
|
|
704
|
+
[P in Exclude<K, TransformKey>]: P extends keyof TextStyle ? TextStyle[P] : P extends keyof ImageStyle ? ImageStyle[P] : P extends keyof ViewStyle ? ViewStyle[P] : never;
|
|
705
|
+
} & (Extract<K, TransformKey> extends never ? unknown : {
|
|
706
|
+
transform: NonNullable<ViewStyle['transform']>;
|
|
707
|
+
});
|
|
621
708
|
interface UseInterpolatedStyleOptions {
|
|
622
709
|
/**
|
|
623
710
|
* Input range mapped onto every key's output range. Defaults to `[0, 1]`
|
|
@@ -675,7 +762,7 @@ interface UseInterpolatedStyleOptions {
|
|
|
675
762
|
* hook stays fully declarative and hashable so unchanged maps produce zero
|
|
676
763
|
* new UI-thread closures.
|
|
677
764
|
*/
|
|
678
|
-
declare function useInterpolatedStyle(progress: SharedValue<number>, map: InterpolatedStyleMap, options?: UseInterpolatedStyleOptions):
|
|
765
|
+
declare function useInterpolatedStyle<K extends keyof InterpolatedStyleMap>(progress: SharedValue<number>, map: Pick<InterpolatedStyleMap, K>, options?: UseInterpolatedStyleOptions): InterpolatedStyle<K>;
|
|
679
766
|
|
|
680
767
|
/**
|
|
681
768
|
* Create an animatable value owned by JS but readable from worklets.
|
|
@@ -905,4 +992,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
|
|
|
905
992
|
*/
|
|
906
993
|
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
907
994
|
|
|
908
|
-
export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, MotionProps, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, VariantsMap, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
|
995
|
+
export { AnimatableValue, type AnimationCallback, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyle, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, MotionProps, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, Stagger, type StaggerProps, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, VariantsMap, applyDelay, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useStaggerDelay, useTransform, useVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ComponentType, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
|
-
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
4
|
+
import { TextStyle, ImageStyle, ViewStyle, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
5
5
|
import { M as MotionComponent, V as VariantsMap, a as MotionProps, N as NamedTransitions, b as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, c as TransitionName, d as VariantController } from './types-DyJpG64F.js';
|
|
6
6
|
export { e as AnimateStyle, f as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, g as EasingFunction, h as EasingFunctionFactory, i as GestureSubStates, j as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, k as RepeatConfig, l as SequenceStep, m as TimingTransition, n as Transition } from './types-DyJpG64F.js';
|
|
7
7
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
@@ -174,6 +174,64 @@ interface PresenceContextValue {
|
|
|
174
174
|
*/
|
|
175
175
|
declare function usePresence(): PresenceContextValue | null;
|
|
176
176
|
|
|
177
|
+
interface StaggerProps {
|
|
178
|
+
children?: ReactNode;
|
|
179
|
+
/**
|
|
180
|
+
* Milliseconds between consecutive children. Child `i` (in render order)
|
|
181
|
+
* receives a delay of `delay + i * interval`.
|
|
182
|
+
*/
|
|
183
|
+
interval: number;
|
|
184
|
+
/**
|
|
185
|
+
* Base delay in milliseconds applied to every child before the interval,
|
|
186
|
+
* so the whole cascade can start late without pushing the spacing into
|
|
187
|
+
* each child. Defaults to `0`.
|
|
188
|
+
*/
|
|
189
|
+
delay?: number;
|
|
190
|
+
/**
|
|
191
|
+
* Which end of the child list starts the cascade. `'first'` (default)
|
|
192
|
+
* staggers top-down in render order; `'last'` reverses it, so the final
|
|
193
|
+
* child animates first.
|
|
194
|
+
*/
|
|
195
|
+
from?: 'first' | 'last';
|
|
196
|
+
/**
|
|
197
|
+
* Turn the stagger on or off in one place. When `false`, every child gets
|
|
198
|
+
* a delay of `0` — the single-switch escape hatch for "cascade in, but
|
|
199
|
+
* not back out": pass `enabled={revealed}` and the hide direction snaps
|
|
200
|
+
* together. Defaults to `true`.
|
|
201
|
+
*/
|
|
202
|
+
enabled?: boolean;
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* Assign each child a stagger delay from its position, so a list entrance
|
|
206
|
+
* cascades without every child computing `index * ms` itself.
|
|
207
|
+
*
|
|
208
|
+
* The parent owns the timing: reordering, filtering, or reversing the list
|
|
209
|
+
* re-derives every delay from the new render order, and `enabled` turns the
|
|
210
|
+
* whole cascade off in one place. Each child slot gets its own provider, so
|
|
211
|
+
* a `Motion.*` primitive anywhere inside child `i`'s subtree inherits child
|
|
212
|
+
* `i`'s delay.
|
|
213
|
+
*
|
|
214
|
+
* The delay applies to the declarative animations of the `Motion.*`
|
|
215
|
+
* primitives underneath — the mount animation (`initial` → `animate`) and
|
|
216
|
+
* any later `animate` change. It deliberately does not delay `gesture`
|
|
217
|
+
* feedback, `<Presence>` exits, or reduced-motion snaps.
|
|
218
|
+
*
|
|
219
|
+
* `<Stagger>` renders no host view — only per-child context providers.
|
|
220
|
+
*/
|
|
221
|
+
declare function Stagger({ children, interval, delay, from, enabled, }: StaggerProps): react.JSX.Element;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* The stagger delay (in milliseconds) assigned to this element's child slot
|
|
225
|
+
* by the nearest `<Stagger>` ancestor. `0` when there is none, when the
|
|
226
|
+
* stagger is disabled, or for the first child of a zero-`delay` stagger.
|
|
227
|
+
*
|
|
228
|
+
* The `Motion.*` primitives consume this automatically. Custom animated
|
|
229
|
+
* components built on `resolveTransition` / `resolveAnimatableValue` call
|
|
230
|
+
* this hook and add the returned value to their animation delay so they
|
|
231
|
+
* participate in a `<Stagger>` the same way the built-in primitives do.
|
|
232
|
+
*/
|
|
233
|
+
declare function useStaggerDelay(): number;
|
|
234
|
+
|
|
177
235
|
/**
|
|
178
236
|
* UI-thread callback Reanimated invokes when an animation settles. Must be a
|
|
179
237
|
* worklet — callers either author one with `'worklet'` or build one via
|
|
@@ -187,6 +245,13 @@ type AnimationCallback = (finished?: boolean, current?: number | string) => void
|
|
|
187
245
|
* `withDecay` call.
|
|
188
246
|
*/
|
|
189
247
|
type CallbackFactory = (phase: 'step' | 'animation', step: number | undefined) => AnimationCallback | undefined;
|
|
248
|
+
/**
|
|
249
|
+
* Wrap an animation in `withDelay`. A missing / zero / negative delay is a
|
|
250
|
+
* pass-through. Exported for the factory's stagger wrap, which must delay a
|
|
251
|
+
* fully-resolved animation exactly once — merging the delay into the base
|
|
252
|
+
* config instead would re-apply it per sequence step.
|
|
253
|
+
*/
|
|
254
|
+
declare function applyDelay(animation: unknown, delay: number | undefined): unknown;
|
|
190
255
|
/**
|
|
191
256
|
* Build a Reanimated animation for a single property. Runs on the JS thread
|
|
192
257
|
* once per change and produces a baked `withSpring` / `withTiming` /
|
|
@@ -293,8 +358,14 @@ declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: numb
|
|
|
293
358
|
*
|
|
294
359
|
* For decay transitions, `toValue` is ignored — decay decelerates from the
|
|
295
360
|
* SV's current position via its own physics. Pass `0` if you don't have one.
|
|
361
|
+
*
|
|
362
|
+
* `callback`, when provided, fires once when the animation settles — the same
|
|
363
|
+
* `(finished) => void` shape Reanimated's `with*` factories accept. It runs on
|
|
364
|
+
* the UI thread, so bridge to JS with `runOnJS(...)` inside it. For
|
|
365
|
+
* `no-animation` the callback fires synchronously with `finished: true`, since
|
|
366
|
+
* a direct assignment has no settle point of its own.
|
|
296
367
|
*/
|
|
297
|
-
declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number): unknown;
|
|
368
|
+
declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number, callback?: AnimationCallback): unknown;
|
|
298
369
|
|
|
299
370
|
/**
|
|
300
371
|
* The one colour spelling Reanimated's animation drivers cannot accept.
|
|
@@ -618,6 +689,22 @@ type InterpolatedStyleMap = {
|
|
|
618
689
|
} & {
|
|
619
690
|
[K in ColorStyleKey]?: readonly string[];
|
|
620
691
|
};
|
|
692
|
+
/**
|
|
693
|
+
* The style shape a map of `K` produces. Transform keys collapse into the
|
|
694
|
+
* single `transform` array the worklet emits; every other key survives under
|
|
695
|
+
* its own name, typed from the RN style family it belongs to.
|
|
696
|
+
*
|
|
697
|
+
* This is what lets the return narrow to `ViewStyle` at a call site whose map
|
|
698
|
+
* holds only view keys. Reanimated's own `useAnimatedStyle` resolves to
|
|
699
|
+
* `DefaultStyle` (`ViewStyle | ImageStyle | TextStyle`), and that union is
|
|
700
|
+
* rejected inside a `StyleProp<ViewStyle>` array — `TextStyle` fails on
|
|
701
|
+
* `cursor` — so a consumer had to cast.
|
|
702
|
+
*/
|
|
703
|
+
type InterpolatedStyle<K extends keyof InterpolatedStyleMap> = {
|
|
704
|
+
[P in Exclude<K, TransformKey>]: P extends keyof TextStyle ? TextStyle[P] : P extends keyof ImageStyle ? ImageStyle[P] : P extends keyof ViewStyle ? ViewStyle[P] : never;
|
|
705
|
+
} & (Extract<K, TransformKey> extends never ? unknown : {
|
|
706
|
+
transform: NonNullable<ViewStyle['transform']>;
|
|
707
|
+
});
|
|
621
708
|
interface UseInterpolatedStyleOptions {
|
|
622
709
|
/**
|
|
623
710
|
* Input range mapped onto every key's output range. Defaults to `[0, 1]`
|
|
@@ -675,7 +762,7 @@ interface UseInterpolatedStyleOptions {
|
|
|
675
762
|
* hook stays fully declarative and hashable so unchanged maps produce zero
|
|
676
763
|
* new UI-thread closures.
|
|
677
764
|
*/
|
|
678
|
-
declare function useInterpolatedStyle(progress: SharedValue<number>, map: InterpolatedStyleMap, options?: UseInterpolatedStyleOptions):
|
|
765
|
+
declare function useInterpolatedStyle<K extends keyof InterpolatedStyleMap>(progress: SharedValue<number>, map: Pick<InterpolatedStyleMap, K>, options?: UseInterpolatedStyleOptions): InterpolatedStyle<K>;
|
|
679
766
|
|
|
680
767
|
/**
|
|
681
768
|
* Create an animatable value owned by JS but readable from worklets.
|
|
@@ -905,4 +992,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
|
|
|
905
992
|
*/
|
|
906
993
|
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
907
994
|
|
|
908
|
-
export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, MotionProps, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, VariantsMap, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
|
995
|
+
export { AnimatableValue, type AnimationCallback, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyle, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, MotionProps, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, Stagger, type StaggerProps, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, VariantsMap, applyDelay, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useStaggerDelay, useTransform, useVariants };
|