@rootnative/inertia 0.0.8 → 0.0.10
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 +81 -1
- package/README.md +7 -7
- package/dist/applyBounds-BYGiHrYO.d.mts +18 -0
- package/dist/applyBounds-BYGiHrYO.d.ts +18 -0
- package/dist/{chunk-E3ALFSH2.js → chunk-2UGWAB6N.js} +78 -70
- package/dist/{chunk-ZBHQPVWE.js → chunk-3ZNHPT5Z.js} +2 -2
- package/dist/{chunk-IHVMNOS4.js → chunk-46766TBM.js} +2 -2
- package/dist/{chunk-MUT6BTZS.js → chunk-4EZ5DBL3.js} +10 -7
- package/dist/{chunk-MFAFB4K7.mjs → chunk-6FCATUMY.mjs} +8 -10
- package/dist/{chunk-6YIUETBF.mjs → chunk-7BH3CAO5.mjs} +1 -1
- package/dist/{chunk-JBK5ZLMH.mjs → chunk-CUHOCONB.mjs} +1 -1
- package/dist/{chunk-M4766VUV.mjs → chunk-DRA2K53O.mjs} +1 -1
- package/dist/{chunk-L4JFECXU.mjs → chunk-F4HMCXAX.mjs} +6 -3
- package/dist/{chunk-W7NTRSPD.mjs → chunk-HEAWMZEM.mjs} +105 -66
- package/dist/{chunk-IX6SEOSK.mjs → chunk-JENYDTXH.mjs} +52 -44
- package/dist/chunk-KFHZMFAX.js +23 -0
- package/dist/{chunk-6AN5X3YE.js → chunk-KXU6VH2Y.js} +10 -11
- package/dist/{chunk-WNVHPMBI.js → chunk-N33GSDNQ.js} +106 -65
- package/dist/chunk-OH46TGEA.mjs +20 -0
- package/dist/{chunk-QNLSCOR5.mjs → chunk-OLOSU2BD.mjs} +1 -1
- package/dist/chunk-PLKXCJIB.js +8 -0
- package/dist/{chunk-GSUC4HWP.mjs → chunk-QXKPIENP.mjs} +1 -1
- package/dist/chunk-UBHQJFUW.js +8 -0
- package/dist/{chunk-6NOCY764.js → chunk-VKXSL3ZL.js} +2 -2
- package/dist/chunk-XKNEQDAT.js +8 -0
- package/dist/{chunk-EN4PN7X3.mjs → chunk-Z23AMUSW.mjs} +1 -1
- package/dist/gestureLayer/index.d.mts +3 -3
- package/dist/gestureLayer/index.d.ts +3 -3
- package/dist/gestureLayer/index.js +12 -18
- package/dist/gestureLayer/index.mjs +5 -11
- package/dist/index.d.mts +105 -47
- package/dist/index.d.ts +105 -47
- package/dist/index.js +119 -92
- package/dist/index.mjs +71 -60
- package/dist/motion/FlatList.d.mts +1 -1
- package/dist/motion/FlatList.d.ts +1 -1
- package/dist/motion/FlatList.js +5 -5
- package/dist/motion/FlatList.mjs +4 -4
- package/dist/motion/Image.d.mts +1 -1
- package/dist/motion/Image.d.ts +1 -1
- package/dist/motion/Image.js +5 -5
- package/dist/motion/Image.mjs +4 -4
- package/dist/motion/Pressable.d.mts +1 -1
- package/dist/motion/Pressable.d.ts +1 -1
- package/dist/motion/Pressable.js +5 -5
- package/dist/motion/Pressable.mjs +4 -4
- package/dist/motion/ScrollView.d.mts +1 -1
- package/dist/motion/ScrollView.d.ts +1 -1
- package/dist/motion/ScrollView.js +5 -5
- package/dist/motion/ScrollView.mjs +4 -4
- package/dist/motion/Text.d.mts +1 -1
- package/dist/motion/Text.d.ts +1 -1
- package/dist/motion/Text.js +5 -5
- package/dist/motion/Text.mjs +4 -4
- package/dist/motion/View.d.mts +1 -1
- package/dist/motion/View.d.ts +1 -1
- package/dist/motion/View.js +5 -5
- package/dist/motion/View.mjs +4 -4
- package/dist/touch/index.d.mts +2 -1
- package/dist/touch/index.d.ts +2 -1
- package/dist/touch/index.js +16 -31
- package/dist/touch/index.mjs +11 -29
- package/dist/{types-DyJpG64F.d.mts → types-08mG8fNk.d.mts} +10 -3
- package/dist/{types-DyJpG64F.d.ts → types-08mG8fNk.d.ts} +10 -3
- package/dist/{useGesture-DbH46EBp.d.ts → useGesture-D1lHeQQ6.d.ts} +1 -1
- package/dist/{useGesture-CnZQnYHH.d.mts → useGesture-DjszaHWz.d.mts} +1 -1
- package/llms.txt +1 -1
- package/package.json +4 -2
- package/src/config/namedTransitions.ts +7 -9
- package/src/gestureLayer/index.ts +3 -0
- package/src/gestureLayer/useGestureLayer.ts +6 -9
- package/src/gestures/focusVisibility.ts +19 -17
- package/src/gestures/index.ts +1 -1
- package/src/index.ts +10 -0
- package/src/layout/resolveLayout.ts +4 -1
- package/src/layout/useSharedLayout.ts +2 -1
- package/src/motion/createMotionComponent.tsx +92 -44
- package/src/presence/Presence.tsx +5 -7
- package/src/touch/applyBounds.ts +30 -0
- package/src/touch/index.ts +1 -0
- package/src/touch/useTouchDrag.ts +15 -45
- package/src/transitions/constants.ts +14 -0
- package/src/transitions/easing.ts +23 -11
- package/src/transitions/index.ts +5 -0
- package/src/transitions/keys.ts +0 -2
- package/src/transitions/resolve.ts +86 -11
- package/src/transitions/resolveSequence.ts +3 -1
- package/src/transitions/runtime.ts +4 -7
- package/src/transitions/spring.ts +7 -2
- package/src/types.ts +9 -2
- package/src/values/extrapolation.ts +21 -0
- package/src/values/index.ts +2 -0
- package/src/values/useGesture.ts +9 -2
- package/src/values/useInterpolatedStyle.ts +42 -19
- package/src/values/useShadow.ts +18 -7
- package/src/values/useSpring.ts +34 -25
- package/src/values/useTransform.ts +24 -20
- package/src/values/useTranslateStyle.ts +31 -0
- package/dist/chunk-24NUL23E.js +0 -8
- package/dist/chunk-4XBX7KOD.js +0 -8
- package/dist/chunk-Z5USXWTE.js +0 -8
package/dist/index.js
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
3
|
+
var chunkKFHZMFAX_js = require('./chunk-KFHZMFAX.js');
|
|
4
|
+
var chunk4EZ5DBL3_js = require('./chunk-4EZ5DBL3.js');
|
|
5
|
+
var chunkPLKXCJIB_js = require('./chunk-PLKXCJIB.js');
|
|
6
|
+
var chunkUBHQJFUW_js = require('./chunk-UBHQJFUW.js');
|
|
7
|
+
var chunkXKNEQDAT_js = require('./chunk-XKNEQDAT.js');
|
|
8
|
+
var chunkVKXSL3ZL_js = require('./chunk-VKXSL3ZL.js');
|
|
9
|
+
var chunk3ZNHPT5Z_js = require('./chunk-3ZNHPT5Z.js');
|
|
10
|
+
var chunk46766TBM_js = require('./chunk-46766TBM.js');
|
|
11
|
+
var chunk2UGWAB6N_js = require('./chunk-2UGWAB6N.js');
|
|
12
|
+
var chunkKXU6VH2Y_js = require('./chunk-KXU6VH2Y.js');
|
|
13
|
+
var chunkN33GSDNQ_js = require('./chunk-N33GSDNQ.js');
|
|
13
14
|
var react = require('react');
|
|
14
15
|
var reactNativeReanimated = require('react-native-reanimated');
|
|
15
16
|
var reactNativeWorklets = require('react-native-worklets');
|
|
16
17
|
|
|
17
18
|
// src/motion/index.ts
|
|
18
19
|
var Motion = {
|
|
19
|
-
View:
|
|
20
|
-
Text:
|
|
21
|
-
Image:
|
|
22
|
-
Pressable:
|
|
23
|
-
ScrollView:
|
|
24
|
-
FlatList:
|
|
20
|
+
View: chunkPLKXCJIB_js.MotionView,
|
|
21
|
+
Text: chunkUBHQJFUW_js.MotionText,
|
|
22
|
+
Image: chunkXKNEQDAT_js.MotionImage,
|
|
23
|
+
Pressable: chunkVKXSL3ZL_js.MotionPressable,
|
|
24
|
+
ScrollView: chunk3ZNHPT5Z_js.MotionScrollView,
|
|
25
|
+
FlatList: chunk46766TBM_js.MotionFlatList
|
|
25
26
|
};
|
|
26
27
|
function useAnimation(target, transition) {
|
|
27
28
|
const output = reactNativeReanimated.useSharedValue(target);
|
|
28
|
-
const shouldReduceMotion =
|
|
29
|
-
const resolved =
|
|
30
|
-
const cfgSig =
|
|
29
|
+
const shouldReduceMotion = chunkKXU6VH2Y_js.useShouldReduceMotion();
|
|
30
|
+
const resolved = chunkKXU6VH2Y_js.resolveNamedTransition(transition, chunkKXU6VH2Y_js.useNamedTransitions());
|
|
31
|
+
const cfgSig = chunkN33GSDNQ_js.stableSig(resolved);
|
|
31
32
|
react.useEffect(() => {
|
|
32
33
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : resolved ?? { type: "spring" };
|
|
33
|
-
output.value =
|
|
34
|
+
output.value = chunkN33GSDNQ_js.resolveTransition(cfg, target);
|
|
34
35
|
}, [target, cfgSig, shouldReduceMotion]);
|
|
35
36
|
react.useEffect(
|
|
36
37
|
() => () => reactNativeReanimated.cancelAnimation(output),
|
|
@@ -41,55 +42,50 @@ function useAnimation(target, transition) {
|
|
|
41
42
|
return output;
|
|
42
43
|
}
|
|
43
44
|
function useAnimator() {
|
|
44
|
-
const registry =
|
|
45
|
-
const shouldReduceMotion =
|
|
45
|
+
const registry = chunkKXU6VH2Y_js.useNamedTransitions();
|
|
46
|
+
const shouldReduceMotion = chunkKXU6VH2Y_js.useShouldReduceMotion();
|
|
46
47
|
const registryRef = react.useRef(registry);
|
|
47
48
|
registryRef.current = registry;
|
|
48
49
|
const reduceMotionRef = react.useRef(shouldReduceMotion);
|
|
49
50
|
reduceMotionRef.current = shouldReduceMotion;
|
|
50
51
|
return react.useCallback((value, to, transition) => {
|
|
51
|
-
const resolved =
|
|
52
|
+
const resolved = chunkKXU6VH2Y_js.resolveNamedTransition(transition, registryRef.current);
|
|
52
53
|
const cfg = reduceMotionRef.current ? { type: "no-animation" } : resolved ?? { type: "spring" };
|
|
53
|
-
value.value =
|
|
54
|
+
value.value = chunkN33GSDNQ_js.resolveTransition(cfg, to);
|
|
54
55
|
}, []);
|
|
55
56
|
}
|
|
56
57
|
function useSpring(target, config) {
|
|
57
|
-
const spring = resolveSpringInput(config,
|
|
58
|
+
const spring = resolveSpringInput(config, chunkKXU6VH2Y_js.useNamedTransitions());
|
|
59
|
+
const shouldReduceMotion = chunkKXU6VH2Y_js.useShouldReduceMotion();
|
|
58
60
|
const reanimConfig = react.useMemo(
|
|
59
|
-
() =>
|
|
61
|
+
() => chunkN33GSDNQ_js.springToReanimated(spring ?? {}),
|
|
60
62
|
// Keyed on the resolved primitive fields rather than the `config` object
|
|
61
63
|
// identity: callers routinely pass a fresh object literal each render, so
|
|
62
64
|
// depending on `config` itself would rebuild the Reanimated config on
|
|
63
65
|
// every render and defeat the memo.
|
|
64
66
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
-
[
|
|
66
|
-
spring?.tension,
|
|
67
|
-
spring?.friction,
|
|
68
|
-
spring?.mass,
|
|
69
|
-
spring?.velocity,
|
|
70
|
-
spring?.restSpeedThreshold,
|
|
71
|
-
spring?.restDisplacementThreshold
|
|
72
|
-
]
|
|
67
|
+
[spring?.tension, spring?.friction, spring?.mass, spring?.velocity]
|
|
73
68
|
);
|
|
74
69
|
const isSharedTarget = isSharedValue(target);
|
|
75
70
|
const initial = isSharedTarget ? target.value : target;
|
|
76
71
|
const output = reactNativeReanimated.useSharedValue(initial);
|
|
77
72
|
react.useEffect(() => {
|
|
78
73
|
if (isSharedTarget) return;
|
|
79
|
-
output.value = reactNativeReanimated.withSpring(target, reanimConfig);
|
|
80
|
-
}, [isSharedTarget, target, reanimConfig]);
|
|
74
|
+
output.value = shouldReduceMotion ? target : reactNativeReanimated.withSpring(target, reanimConfig);
|
|
75
|
+
}, [isSharedTarget, target, reanimConfig, shouldReduceMotion]);
|
|
76
|
+
const source = isSharedTarget ? target : null;
|
|
81
77
|
reactNativeReanimated.useAnimatedReaction(
|
|
82
78
|
() => {
|
|
83
79
|
"worklet";
|
|
84
|
-
if (
|
|
85
|
-
return
|
|
80
|
+
if (source === null) return null;
|
|
81
|
+
return source.value;
|
|
86
82
|
},
|
|
87
83
|
(next, prev) => {
|
|
88
84
|
"worklet";
|
|
89
85
|
if (next === null || next === prev) return;
|
|
90
|
-
output.value = reactNativeReanimated.withSpring(next, reanimConfig);
|
|
86
|
+
output.value = shouldReduceMotion ? next : reactNativeReanimated.withSpring(next, reanimConfig);
|
|
91
87
|
},
|
|
92
|
-
[
|
|
88
|
+
[source, reanimConfig, shouldReduceMotion]
|
|
93
89
|
);
|
|
94
90
|
react.useEffect(
|
|
95
91
|
() => () => reactNativeReanimated.cancelAnimation(output),
|
|
@@ -101,13 +97,12 @@ function useSpring(target, config) {
|
|
|
101
97
|
}
|
|
102
98
|
function resolveSpringInput(config, registry) {
|
|
103
99
|
if (typeof config !== "string") return config;
|
|
104
|
-
const cfg =
|
|
100
|
+
const cfg = chunkKXU6VH2Y_js.lookupNamedTransition(config, registry);
|
|
105
101
|
if (cfg.type === void 0 || cfg.type === "spring") return cfg;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
102
|
+
chunkN33GSDNQ_js.warnOnce(
|
|
103
|
+
`spring-only:${config}`,
|
|
104
|
+
`[inertia] Named transition "${config}" resolves to type '${cfg.type}', but useSpring / useBooleanSpring are spring-only \u2014 falling back to the default spring. Use useAnimation to honor non-spring named transitions.`
|
|
105
|
+
);
|
|
111
106
|
return void 0;
|
|
112
107
|
}
|
|
113
108
|
function isSharedValue(v) {
|
|
@@ -157,6 +152,13 @@ function useColorTransition(progress, range, options) {
|
|
|
157
152
|
return { [key]: reactNativeReanimated.interpolateColor(progress.value, [0, 1], [from, to]) };
|
|
158
153
|
});
|
|
159
154
|
}
|
|
155
|
+
function mapExtrapolation(mode) {
|
|
156
|
+
if (mode === "identity") return reactNativeReanimated.Extrapolation.IDENTITY;
|
|
157
|
+
if (mode === "extend") return reactNativeReanimated.Extrapolation.EXTEND;
|
|
158
|
+
return reactNativeReanimated.Extrapolation.CLAMP;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// src/values/useInterpolatedStyle.ts
|
|
160
162
|
var TRANSFORM_KEYS = /* @__PURE__ */ new Set([
|
|
161
163
|
"translateX",
|
|
162
164
|
"translateY",
|
|
@@ -185,11 +187,6 @@ function evenlySpaced(count) {
|
|
|
185
187
|
for (let i = 0; i < count; i++) out.push(i / (count - 1));
|
|
186
188
|
return out;
|
|
187
189
|
}
|
|
188
|
-
function mapExtrapolation(mode) {
|
|
189
|
-
if (mode === "identity") return reactNativeReanimated.Extrapolation.IDENTITY;
|
|
190
|
-
if (mode === "extend") return reactNativeReanimated.Extrapolation.EXTEND;
|
|
191
|
-
return reactNativeReanimated.Extrapolation.CLAMP;
|
|
192
|
-
}
|
|
193
190
|
function buildSignature(map, options) {
|
|
194
191
|
let sig = "";
|
|
195
192
|
for (const key of Object.keys(map)) {
|
|
@@ -206,8 +203,9 @@ function buildEntries(map, options) {
|
|
|
206
203
|
const output = map[key];
|
|
207
204
|
if (output === void 0 || output.length === 0) continue;
|
|
208
205
|
const input = explicitInput ? explicitInput : output.length === 2 ? [0, 1] : evenlySpaced(output.length);
|
|
209
|
-
if (
|
|
210
|
-
|
|
206
|
+
if (explicitInput && explicitInput.length !== output.length) {
|
|
207
|
+
chunkN33GSDNQ_js.warnOnce(
|
|
208
|
+
`interpolated-style-range:${String(key)}:${explicitInput.length}:${output.length}`,
|
|
211
209
|
`[inertia] useInterpolatedStyle: inputRange has ${explicitInput.length} stops but the "${String(
|
|
212
210
|
key
|
|
213
211
|
)}" output has ${output.length}. They must match \u2014 interpolation results are undefined otherwise.`
|
|
@@ -249,7 +247,11 @@ function buildEntries(map, options) {
|
|
|
249
247
|
function useInterpolatedStyle(progress, map, options) {
|
|
250
248
|
const extrapolate = mapExtrapolation(options?.extrapolate);
|
|
251
249
|
const sig = buildSignature(map, options);
|
|
252
|
-
const entries = react.useMemo(
|
|
250
|
+
const entries = react.useMemo(
|
|
251
|
+
() => buildEntries(map, options),
|
|
252
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
253
|
+
[sig]
|
|
254
|
+
);
|
|
253
255
|
return reactNativeReanimated.useAnimatedStyle(() => {
|
|
254
256
|
"worklet";
|
|
255
257
|
const out = {};
|
|
@@ -292,13 +294,22 @@ function useMotionValue(initial) {
|
|
|
292
294
|
return sv;
|
|
293
295
|
}
|
|
294
296
|
function useTransform(arg1, inputRange, outputRange, options) {
|
|
297
|
+
const rangeSig = chunkN33GSDNQ_js.stableSig([inputRange, outputRange]);
|
|
298
|
+
const ranges = react.useMemo(
|
|
299
|
+
() => ({
|
|
300
|
+
input: inputRange ?? [],
|
|
301
|
+
output: outputRange ?? []
|
|
302
|
+
}),
|
|
303
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
304
|
+
[rangeSig]
|
|
305
|
+
);
|
|
295
306
|
let producer;
|
|
296
307
|
if (typeof arg1 === "function") {
|
|
297
308
|
const userFn = arg1;
|
|
298
309
|
if (reactNativeWorklets.isWorkletFunction(userFn)) {
|
|
299
310
|
producer = userFn;
|
|
300
311
|
} else {
|
|
301
|
-
|
|
312
|
+
chunkN33GSDNQ_js.warnNonWorkletOnce(
|
|
302
313
|
"useTransform-transformer",
|
|
303
314
|
"[inertia] useTransform: the transformer is not a worklet, so the shared values it reads can't be tracked as dependencies \u2014 the derived value will only refresh on React re-renders, and native builds reject plain functions on the UI thread. Add the 'worklet' directive as the first statement of the transformer."
|
|
304
315
|
);
|
|
@@ -309,11 +320,11 @@ function useTransform(arg1, inputRange, outputRange, options) {
|
|
|
309
320
|
}
|
|
310
321
|
} else {
|
|
311
322
|
const source = arg1;
|
|
312
|
-
const input =
|
|
313
|
-
const output =
|
|
323
|
+
const input = ranges.input;
|
|
324
|
+
const output = ranges.output;
|
|
314
325
|
const isColor = output.length > 0 && typeof output[0] === "string";
|
|
315
|
-
const extrapolateLeft =
|
|
316
|
-
const extrapolateRight =
|
|
326
|
+
const extrapolateLeft = mapExtrapolation(options?.extrapolateLeft);
|
|
327
|
+
const extrapolateRight = mapExtrapolation(options?.extrapolateRight);
|
|
317
328
|
producer = isColor ? () => {
|
|
318
329
|
"worklet";
|
|
319
330
|
return reactNativeReanimated.interpolateColor(
|
|
@@ -333,11 +344,6 @@ function useTransform(arg1, inputRange, outputRange, options) {
|
|
|
333
344
|
}
|
|
334
345
|
return reactNativeReanimated.useDerivedValue(producer);
|
|
335
346
|
}
|
|
336
|
-
function mapExtrapolation2(mode) {
|
|
337
|
-
if (mode === "identity") return reactNativeReanimated.Extrapolation.IDENTITY;
|
|
338
|
-
if (mode === "extend") return reactNativeReanimated.Extrapolation.EXTEND;
|
|
339
|
-
return reactNativeReanimated.Extrapolation.CLAMP;
|
|
340
|
-
}
|
|
341
347
|
function useScroll() {
|
|
342
348
|
const scrollX = reactNativeReanimated.useSharedValue(0);
|
|
343
349
|
const scrollY = reactNativeReanimated.useSharedValue(0);
|
|
@@ -364,10 +370,15 @@ function useShadow({
|
|
|
364
370
|
const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
|
|
365
371
|
const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
|
|
366
372
|
const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
|
|
367
|
-
const
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
373
|
+
const boxShadowSig = chunkN33GSDNQ_js.stableSig([from.boxShadow, to.boxShadow]);
|
|
374
|
+
const boxShadowPairs = react.useMemo(
|
|
375
|
+
() => from.boxShadow !== void 0 || to.boxShadow !== void 0 ? chunk2UGWAB6N_js.pairBoxShadowLayers(
|
|
376
|
+
chunk2UGWAB6N_js.resolveBoxShadowInput(from.boxShadow),
|
|
377
|
+
chunk2UGWAB6N_js.resolveBoxShadowInput(to.boxShadow)
|
|
378
|
+
) : [],
|
|
379
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
380
|
+
[boxShadowSig]
|
|
381
|
+
);
|
|
371
382
|
const opacityFrom = from.shadowOpacity ?? 0;
|
|
372
383
|
const opacityTo = to.shadowOpacity ?? 0;
|
|
373
384
|
const radiusFrom = from.shadowRadius ?? 0;
|
|
@@ -463,101 +474,117 @@ function useVariants(variants, initial) {
|
|
|
463
474
|
}, []);
|
|
464
475
|
}
|
|
465
476
|
|
|
477
|
+
Object.defineProperty(exports, "applyBounds", {
|
|
478
|
+
enumerable: true,
|
|
479
|
+
get: function () { return chunkKFHZMFAX_js.applyBounds; }
|
|
480
|
+
});
|
|
481
|
+
Object.defineProperty(exports, "useTranslateStyle", {
|
|
482
|
+
enumerable: true,
|
|
483
|
+
get: function () { return chunkKFHZMFAX_js.useTranslateStyle; }
|
|
484
|
+
});
|
|
466
485
|
Object.defineProperty(exports, "useGesture", {
|
|
467
486
|
enumerable: true,
|
|
468
|
-
get: function () { return
|
|
487
|
+
get: function () { return chunk4EZ5DBL3_js.useGesture; }
|
|
469
488
|
});
|
|
470
489
|
Object.defineProperty(exports, "MotionView", {
|
|
471
490
|
enumerable: true,
|
|
472
|
-
get: function () { return
|
|
491
|
+
get: function () { return chunkPLKXCJIB_js.MotionView; }
|
|
473
492
|
});
|
|
474
493
|
Object.defineProperty(exports, "MotionText", {
|
|
475
494
|
enumerable: true,
|
|
476
|
-
get: function () { return
|
|
495
|
+
get: function () { return chunkUBHQJFUW_js.MotionText; }
|
|
477
496
|
});
|
|
478
497
|
Object.defineProperty(exports, "MotionImage", {
|
|
479
498
|
enumerable: true,
|
|
480
|
-
get: function () { return
|
|
499
|
+
get: function () { return chunkXKNEQDAT_js.MotionImage; }
|
|
481
500
|
});
|
|
482
501
|
Object.defineProperty(exports, "MotionPressable", {
|
|
483
502
|
enumerable: true,
|
|
484
|
-
get: function () { return
|
|
503
|
+
get: function () { return chunkVKXSL3ZL_js.MotionPressable; }
|
|
485
504
|
});
|
|
486
505
|
Object.defineProperty(exports, "MotionScrollView", {
|
|
487
506
|
enumerable: true,
|
|
488
|
-
get: function () { return
|
|
507
|
+
get: function () { return chunk3ZNHPT5Z_js.MotionScrollView; }
|
|
489
508
|
});
|
|
490
509
|
Object.defineProperty(exports, "MotionFlatList", {
|
|
491
510
|
enumerable: true,
|
|
492
|
-
get: function () { return
|
|
511
|
+
get: function () { return chunk46766TBM_js.MotionFlatList; }
|
|
493
512
|
});
|
|
494
513
|
Object.defineProperty(exports, "Presence", {
|
|
495
514
|
enumerable: true,
|
|
496
|
-
get: function () { return
|
|
515
|
+
get: function () { return chunk2UGWAB6N_js.Presence; }
|
|
497
516
|
});
|
|
498
517
|
Object.defineProperty(exports, "Stagger", {
|
|
499
518
|
enumerable: true,
|
|
500
|
-
get: function () { return
|
|
519
|
+
get: function () { return chunk2UGWAB6N_js.Stagger; }
|
|
501
520
|
});
|
|
502
521
|
Object.defineProperty(exports, "TRANSPARENT", {
|
|
503
522
|
enumerable: true,
|
|
504
|
-
get: function () { return
|
|
523
|
+
get: function () { return chunk2UGWAB6N_js.TRANSPARENT; }
|
|
505
524
|
});
|
|
506
525
|
Object.defineProperty(exports, "createMotionComponent", {
|
|
507
526
|
enumerable: true,
|
|
508
|
-
get: function () { return
|
|
527
|
+
get: function () { return chunk2UGWAB6N_js.createMotionComponent; }
|
|
509
528
|
});
|
|
510
529
|
Object.defineProperty(exports, "usePresence", {
|
|
511
530
|
enumerable: true,
|
|
512
|
-
get: function () { return
|
|
531
|
+
get: function () { return chunk2UGWAB6N_js.usePresence; }
|
|
513
532
|
});
|
|
514
533
|
Object.defineProperty(exports, "useStaggerDelay", {
|
|
515
534
|
enumerable: true,
|
|
516
|
-
get: function () { return
|
|
535
|
+
get: function () { return chunk2UGWAB6N_js.useStaggerDelay; }
|
|
517
536
|
});
|
|
518
537
|
Object.defineProperty(exports, "MotionConfig", {
|
|
519
538
|
enumerable: true,
|
|
520
|
-
get: function () { return
|
|
539
|
+
get: function () { return chunkKXU6VH2Y_js.MotionConfig; }
|
|
521
540
|
});
|
|
522
541
|
Object.defineProperty(exports, "resolveNamedTransition", {
|
|
523
542
|
enumerable: true,
|
|
524
|
-
get: function () { return
|
|
543
|
+
get: function () { return chunkKXU6VH2Y_js.resolveNamedTransition; }
|
|
525
544
|
});
|
|
526
545
|
Object.defineProperty(exports, "useMotionConfig", {
|
|
527
546
|
enumerable: true,
|
|
528
|
-
get: function () { return
|
|
547
|
+
get: function () { return chunkKXU6VH2Y_js.useMotionConfig; }
|
|
529
548
|
});
|
|
530
549
|
Object.defineProperty(exports, "useNamedTransitions", {
|
|
531
550
|
enumerable: true,
|
|
532
|
-
get: function () { return
|
|
551
|
+
get: function () { return chunkKXU6VH2Y_js.useNamedTransitions; }
|
|
533
552
|
});
|
|
534
553
|
Object.defineProperty(exports, "useShouldReduceMotion", {
|
|
535
554
|
enumerable: true,
|
|
536
|
-
get: function () { return
|
|
555
|
+
get: function () { return chunkKXU6VH2Y_js.useShouldReduceMotion; }
|
|
537
556
|
});
|
|
538
557
|
Object.defineProperty(exports, "applyDelay", {
|
|
539
558
|
enumerable: true,
|
|
540
|
-
get: function () { return
|
|
559
|
+
get: function () { return chunkN33GSDNQ_js.applyDelay; }
|
|
541
560
|
});
|
|
542
561
|
Object.defineProperty(exports, "buildReleaseAnimation", {
|
|
543
562
|
enumerable: true,
|
|
544
|
-
get: function () { return
|
|
563
|
+
get: function () { return chunkN33GSDNQ_js.buildReleaseAnimation; }
|
|
545
564
|
});
|
|
546
565
|
Object.defineProperty(exports, "cubicBezier", {
|
|
547
566
|
enumerable: true,
|
|
548
|
-
get: function () { return
|
|
567
|
+
get: function () { return chunkN33GSDNQ_js.cubicBezier; }
|
|
549
568
|
});
|
|
550
569
|
Object.defineProperty(exports, "ensureWorkletEasing", {
|
|
551
570
|
enumerable: true,
|
|
552
|
-
get: function () { return
|
|
571
|
+
get: function () { return chunkN33GSDNQ_js.ensureWorkletEasing; }
|
|
572
|
+
});
|
|
573
|
+
Object.defineProperty(exports, "isTopLevelTransition", {
|
|
574
|
+
enumerable: true,
|
|
575
|
+
get: function () { return chunkN33GSDNQ_js.isTopLevelTransition; }
|
|
553
576
|
});
|
|
554
577
|
Object.defineProperty(exports, "resolveAnimatableValue", {
|
|
555
578
|
enumerable: true,
|
|
556
|
-
get: function () { return
|
|
579
|
+
get: function () { return chunkN33GSDNQ_js.resolveAnimatableValue; }
|
|
557
580
|
});
|
|
558
581
|
Object.defineProperty(exports, "resolveTransition", {
|
|
559
582
|
enumerable: true,
|
|
560
|
-
get: function () { return
|
|
583
|
+
get: function () { return chunkN33GSDNQ_js.resolveTransition; }
|
|
584
|
+
});
|
|
585
|
+
Object.defineProperty(exports, "stableSig", {
|
|
586
|
+
enumerable: true,
|
|
587
|
+
get: function () { return chunkN33GSDNQ_js.stableSig; }
|
|
561
588
|
});
|
|
562
589
|
exports.Motion = Motion;
|
|
563
590
|
exports.useAnimation = useAnimation;
|
package/dist/index.mjs
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
export {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
export { applyBounds, useTranslateStyle } from './chunk-OH46TGEA.mjs';
|
|
2
|
+
export { useGesture } from './chunk-F4HMCXAX.mjs';
|
|
3
|
+
import { MotionView } from './chunk-QXKPIENP.mjs';
|
|
4
|
+
export { MotionView } from './chunk-QXKPIENP.mjs';
|
|
5
|
+
import { MotionText } from './chunk-OLOSU2BD.mjs';
|
|
6
|
+
export { MotionText } from './chunk-OLOSU2BD.mjs';
|
|
7
|
+
import { MotionImage } from './chunk-7BH3CAO5.mjs';
|
|
8
|
+
export { MotionImage } from './chunk-7BH3CAO5.mjs';
|
|
9
|
+
import { MotionPressable } from './chunk-CUHOCONB.mjs';
|
|
10
|
+
export { MotionPressable } from './chunk-CUHOCONB.mjs';
|
|
11
|
+
import { MotionScrollView } from './chunk-DRA2K53O.mjs';
|
|
12
|
+
export { MotionScrollView } from './chunk-DRA2K53O.mjs';
|
|
13
|
+
import { MotionFlatList } from './chunk-Z23AMUSW.mjs';
|
|
14
|
+
export { MotionFlatList } from './chunk-Z23AMUSW.mjs';
|
|
15
|
+
import { pairBoxShadowLayers, resolveBoxShadowInput } from './chunk-JENYDTXH.mjs';
|
|
16
|
+
export { Presence, Stagger, TRANSPARENT, createMotionComponent, usePresence, useStaggerDelay } from './chunk-JENYDTXH.mjs';
|
|
17
|
+
import { useShouldReduceMotion, resolveNamedTransition, useNamedTransitions, lookupNamedTransition } from './chunk-6FCATUMY.mjs';
|
|
18
|
+
export { MotionConfig, resolveNamedTransition, useMotionConfig, useNamedTransitions, useShouldReduceMotion } from './chunk-6FCATUMY.mjs';
|
|
19
|
+
import { stableSig, resolveTransition, springToReanimated, warnOnce, warnNonWorkletOnce } from './chunk-HEAWMZEM.mjs';
|
|
20
|
+
export { applyDelay, buildReleaseAnimation, cubicBezier, ensureWorkletEasing, isTopLevelTransition, resolveAnimatableValue, resolveTransition, stableSig } from './chunk-HEAWMZEM.mjs';
|
|
20
21
|
import { useEffect, useRef, useCallback, useMemo } from 'react';
|
|
21
|
-
import { useSharedValue, cancelAnimation, withSpring, useAnimatedReaction, useAnimatedStyle, interpolateColor, interpolate, useDerivedValue,
|
|
22
|
+
import { useSharedValue, cancelAnimation, withSpring, useAnimatedReaction, useAnimatedStyle, interpolateColor, interpolate, useDerivedValue, useAnimatedScrollHandler, Extrapolation } from 'react-native-reanimated';
|
|
22
23
|
import { isWorkletFunction } from 'react-native-worklets';
|
|
23
24
|
|
|
24
25
|
// src/motion/index.ts
|
|
@@ -62,6 +63,7 @@ function useAnimator() {
|
|
|
62
63
|
}
|
|
63
64
|
function useSpring(target, config) {
|
|
64
65
|
const spring = resolveSpringInput(config, useNamedTransitions());
|
|
66
|
+
const shouldReduceMotion = useShouldReduceMotion();
|
|
65
67
|
const reanimConfig = useMemo(
|
|
66
68
|
() => springToReanimated(spring ?? {}),
|
|
67
69
|
// Keyed on the resolved primitive fields rather than the `config` object
|
|
@@ -69,34 +71,28 @@ function useSpring(target, config) {
|
|
|
69
71
|
// depending on `config` itself would rebuild the Reanimated config on
|
|
70
72
|
// every render and defeat the memo.
|
|
71
73
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
72
|
-
[
|
|
73
|
-
spring?.tension,
|
|
74
|
-
spring?.friction,
|
|
75
|
-
spring?.mass,
|
|
76
|
-
spring?.velocity,
|
|
77
|
-
spring?.restSpeedThreshold,
|
|
78
|
-
spring?.restDisplacementThreshold
|
|
79
|
-
]
|
|
74
|
+
[spring?.tension, spring?.friction, spring?.mass, spring?.velocity]
|
|
80
75
|
);
|
|
81
76
|
const isSharedTarget = isSharedValue(target);
|
|
82
77
|
const initial = isSharedTarget ? target.value : target;
|
|
83
78
|
const output = useSharedValue(initial);
|
|
84
79
|
useEffect(() => {
|
|
85
80
|
if (isSharedTarget) return;
|
|
86
|
-
output.value = withSpring(target, reanimConfig);
|
|
87
|
-
}, [isSharedTarget, target, reanimConfig]);
|
|
81
|
+
output.value = shouldReduceMotion ? target : withSpring(target, reanimConfig);
|
|
82
|
+
}, [isSharedTarget, target, reanimConfig, shouldReduceMotion]);
|
|
83
|
+
const source = isSharedTarget ? target : null;
|
|
88
84
|
useAnimatedReaction(
|
|
89
85
|
() => {
|
|
90
86
|
"worklet";
|
|
91
|
-
if (
|
|
92
|
-
return
|
|
87
|
+
if (source === null) return null;
|
|
88
|
+
return source.value;
|
|
93
89
|
},
|
|
94
90
|
(next, prev) => {
|
|
95
91
|
"worklet";
|
|
96
92
|
if (next === null || next === prev) return;
|
|
97
|
-
output.value = withSpring(next, reanimConfig);
|
|
93
|
+
output.value = shouldReduceMotion ? next : withSpring(next, reanimConfig);
|
|
98
94
|
},
|
|
99
|
-
[
|
|
95
|
+
[source, reanimConfig, shouldReduceMotion]
|
|
100
96
|
);
|
|
101
97
|
useEffect(
|
|
102
98
|
() => () => cancelAnimation(output),
|
|
@@ -110,11 +106,10 @@ function resolveSpringInput(config, registry) {
|
|
|
110
106
|
if (typeof config !== "string") return config;
|
|
111
107
|
const cfg = lookupNamedTransition(config, registry);
|
|
112
108
|
if (cfg.type === void 0 || cfg.type === "spring") return cfg;
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}
|
|
109
|
+
warnOnce(
|
|
110
|
+
`spring-only:${config}`,
|
|
111
|
+
`[inertia] Named transition "${config}" resolves to type '${cfg.type}', but useSpring / useBooleanSpring are spring-only \u2014 falling back to the default spring. Use useAnimation to honor non-spring named transitions.`
|
|
112
|
+
);
|
|
118
113
|
return void 0;
|
|
119
114
|
}
|
|
120
115
|
function isSharedValue(v) {
|
|
@@ -164,6 +159,13 @@ function useColorTransition(progress, range, options) {
|
|
|
164
159
|
return { [key]: interpolateColor(progress.value, [0, 1], [from, to]) };
|
|
165
160
|
});
|
|
166
161
|
}
|
|
162
|
+
function mapExtrapolation(mode) {
|
|
163
|
+
if (mode === "identity") return Extrapolation.IDENTITY;
|
|
164
|
+
if (mode === "extend") return Extrapolation.EXTEND;
|
|
165
|
+
return Extrapolation.CLAMP;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// src/values/useInterpolatedStyle.ts
|
|
167
169
|
var TRANSFORM_KEYS = /* @__PURE__ */ new Set([
|
|
168
170
|
"translateX",
|
|
169
171
|
"translateY",
|
|
@@ -192,11 +194,6 @@ function evenlySpaced(count) {
|
|
|
192
194
|
for (let i = 0; i < count; i++) out.push(i / (count - 1));
|
|
193
195
|
return out;
|
|
194
196
|
}
|
|
195
|
-
function mapExtrapolation(mode) {
|
|
196
|
-
if (mode === "identity") return Extrapolation.IDENTITY;
|
|
197
|
-
if (mode === "extend") return Extrapolation.EXTEND;
|
|
198
|
-
return Extrapolation.CLAMP;
|
|
199
|
-
}
|
|
200
197
|
function buildSignature(map, options) {
|
|
201
198
|
let sig = "";
|
|
202
199
|
for (const key of Object.keys(map)) {
|
|
@@ -213,8 +210,9 @@ function buildEntries(map, options) {
|
|
|
213
210
|
const output = map[key];
|
|
214
211
|
if (output === void 0 || output.length === 0) continue;
|
|
215
212
|
const input = explicitInput ? explicitInput : output.length === 2 ? [0, 1] : evenlySpaced(output.length);
|
|
216
|
-
if (
|
|
217
|
-
|
|
213
|
+
if (explicitInput && explicitInput.length !== output.length) {
|
|
214
|
+
warnOnce(
|
|
215
|
+
`interpolated-style-range:${String(key)}:${explicitInput.length}:${output.length}`,
|
|
218
216
|
`[inertia] useInterpolatedStyle: inputRange has ${explicitInput.length} stops but the "${String(
|
|
219
217
|
key
|
|
220
218
|
)}" output has ${output.length}. They must match \u2014 interpolation results are undefined otherwise.`
|
|
@@ -256,7 +254,11 @@ function buildEntries(map, options) {
|
|
|
256
254
|
function useInterpolatedStyle(progress, map, options) {
|
|
257
255
|
const extrapolate = mapExtrapolation(options?.extrapolate);
|
|
258
256
|
const sig = buildSignature(map, options);
|
|
259
|
-
const entries = useMemo(
|
|
257
|
+
const entries = useMemo(
|
|
258
|
+
() => buildEntries(map, options),
|
|
259
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
260
|
+
[sig]
|
|
261
|
+
);
|
|
260
262
|
return useAnimatedStyle(() => {
|
|
261
263
|
"worklet";
|
|
262
264
|
const out = {};
|
|
@@ -299,6 +301,15 @@ function useMotionValue(initial) {
|
|
|
299
301
|
return sv;
|
|
300
302
|
}
|
|
301
303
|
function useTransform(arg1, inputRange, outputRange, options) {
|
|
304
|
+
const rangeSig = stableSig([inputRange, outputRange]);
|
|
305
|
+
const ranges = useMemo(
|
|
306
|
+
() => ({
|
|
307
|
+
input: inputRange ?? [],
|
|
308
|
+
output: outputRange ?? []
|
|
309
|
+
}),
|
|
310
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
311
|
+
[rangeSig]
|
|
312
|
+
);
|
|
302
313
|
let producer;
|
|
303
314
|
if (typeof arg1 === "function") {
|
|
304
315
|
const userFn = arg1;
|
|
@@ -316,11 +327,11 @@ function useTransform(arg1, inputRange, outputRange, options) {
|
|
|
316
327
|
}
|
|
317
328
|
} else {
|
|
318
329
|
const source = arg1;
|
|
319
|
-
const input =
|
|
320
|
-
const output =
|
|
330
|
+
const input = ranges.input;
|
|
331
|
+
const output = ranges.output;
|
|
321
332
|
const isColor = output.length > 0 && typeof output[0] === "string";
|
|
322
|
-
const extrapolateLeft =
|
|
323
|
-
const extrapolateRight =
|
|
333
|
+
const extrapolateLeft = mapExtrapolation(options?.extrapolateLeft);
|
|
334
|
+
const extrapolateRight = mapExtrapolation(options?.extrapolateRight);
|
|
324
335
|
producer = isColor ? () => {
|
|
325
336
|
"worklet";
|
|
326
337
|
return interpolateColor(
|
|
@@ -340,11 +351,6 @@ function useTransform(arg1, inputRange, outputRange, options) {
|
|
|
340
351
|
}
|
|
341
352
|
return useDerivedValue(producer);
|
|
342
353
|
}
|
|
343
|
-
function mapExtrapolation2(mode) {
|
|
344
|
-
if (mode === "identity") return Extrapolation.IDENTITY;
|
|
345
|
-
if (mode === "extend") return Extrapolation.EXTEND;
|
|
346
|
-
return Extrapolation.CLAMP;
|
|
347
|
-
}
|
|
348
354
|
function useScroll() {
|
|
349
355
|
const scrollX = useSharedValue(0);
|
|
350
356
|
const scrollY = useSharedValue(0);
|
|
@@ -371,10 +377,15 @@ function useShadow({
|
|
|
371
377
|
const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
|
|
372
378
|
const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
|
|
373
379
|
const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
|
|
374
|
-
const
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
380
|
+
const boxShadowSig = stableSig([from.boxShadow, to.boxShadow]);
|
|
381
|
+
const boxShadowPairs = useMemo(
|
|
382
|
+
() => from.boxShadow !== void 0 || to.boxShadow !== void 0 ? pairBoxShadowLayers(
|
|
383
|
+
resolveBoxShadowInput(from.boxShadow),
|
|
384
|
+
resolveBoxShadowInput(to.boxShadow)
|
|
385
|
+
) : [],
|
|
386
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
387
|
+
[boxShadowSig]
|
|
388
|
+
);
|
|
378
389
|
const opacityFrom = from.shadowOpacity ?? 0;
|
|
379
390
|
const opacityTo = to.shadowOpacity ?? 0;
|
|
380
391
|
const radiusFrom = from.shadowRadius ?? 0;
|