@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.d.mts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
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';
|
|
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-
|
|
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,
|
|
4
|
+
import { TextStyle, ImageStyle, ViewStyle, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
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-08mG8fNk.mjs';
|
|
6
|
+
export { e as AnimateStyle, f as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, g as EasingFunction, h as EasingFunctionFactory, G as GestureLayerTransitions, i as GestureSubStates, j as MotionComponentProps, k as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, l as RepeatConfig, m as SequenceStep, n as TimingTransition, o as Transition } from './types-08mG8fNk.mjs';
|
|
7
|
+
export { a as applyBounds } from './applyBounds-BYGiHrYO.mjs';
|
|
7
8
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
8
9
|
export { SharedValue } from 'react-native-reanimated';
|
|
9
|
-
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-
|
|
10
|
+
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-DjszaHWz.mjs';
|
|
10
11
|
export { MotionFlatList } from './motion/FlatList.mjs';
|
|
11
12
|
export { MotionImage } from './motion/Image.mjs';
|
|
12
13
|
export { MotionPressable } from './motion/Pressable.mjs';
|
|
@@ -341,6 +342,8 @@ declare function cubicBezier(css: string): EasingInput;
|
|
|
341
342
|
*/
|
|
342
343
|
declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: number) => number) | undefined;
|
|
343
344
|
|
|
345
|
+
declare function isTopLevelTransition(t: unknown): t is TransitionConfig;
|
|
346
|
+
|
|
344
347
|
/**
|
|
345
348
|
* Worklet-safe single-step animation builder. Mirrors a subset of
|
|
346
349
|
* `resolveTransition` for the UI-thread path where the transition config is
|
|
@@ -367,6 +370,15 @@ declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: numb
|
|
|
367
370
|
*/
|
|
368
371
|
declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number, callback?: AnimationCallback): unknown;
|
|
369
372
|
|
|
373
|
+
/**
|
|
374
|
+
* Stable string signature for an arbitrary value — used as a dep-array
|
|
375
|
+
* member so a fresh object literal each render doesn't re-fire an effect
|
|
376
|
+
* unless something structurally changed. Functions serialize as `null`
|
|
377
|
+
* (their identity isn't useful in a sig); `undefined` collapses to an empty
|
|
378
|
+
* string so omitted props compare equal across renders.
|
|
379
|
+
*/
|
|
380
|
+
declare function stableSig(value: unknown): string;
|
|
381
|
+
|
|
370
382
|
/**
|
|
371
383
|
* The one colour spelling Reanimated's animation drivers cannot accept.
|
|
372
384
|
*
|
|
@@ -624,47 +636,6 @@ declare function useColorCascade(rest: string, layers: readonly ColorCascadeLaye
|
|
|
624
636
|
* - `'extend'` — continue the linear slope beyond the range.
|
|
625
637
|
*/
|
|
626
638
|
type ExtrapolationMode = 'clamp' | 'identity' | 'extend';
|
|
627
|
-
interface UseTransformOptions {
|
|
628
|
-
extrapolateLeft?: ExtrapolationMode;
|
|
629
|
-
extrapolateRight?: ExtrapolationMode;
|
|
630
|
-
}
|
|
631
|
-
/**
|
|
632
|
-
* Derive a value from one or more shared values via a transformer worklet.
|
|
633
|
-
*
|
|
634
|
-
* ```ts
|
|
635
|
-
* const x = useMotionValue(0)
|
|
636
|
-
* const y = useMotionValue(0)
|
|
637
|
-
* const distance = useTransform(() => Math.sqrt(x.value ** 2 + y.value ** 2))
|
|
638
|
-
* ```
|
|
639
|
-
*
|
|
640
|
-
* The transformer MUST be a worklet — put the `'worklet'` directive as its
|
|
641
|
-
* first statement so the consumer's Babel plugin captures the shared values
|
|
642
|
-
* it reads as its closure. It runs on the UI thread on every frame where
|
|
643
|
-
* any read shared value changes.
|
|
644
|
-
*
|
|
645
|
-
* A plain function cannot work here, and the hook warns in dev when it gets
|
|
646
|
-
* one: the best-effort wrapper it falls back to closes over the opaque
|
|
647
|
-
* function reference, not the shared values read inside it, so Reanimated
|
|
648
|
-
* can't track them as dependencies — the derived value only refreshes on
|
|
649
|
-
* React re-renders, and native builds reject the plain function when the
|
|
650
|
-
* closure crosses to the UI thread.
|
|
651
|
-
*/
|
|
652
|
-
declare function useTransform<T>(transformer: () => T): SharedValue<T>;
|
|
653
|
-
/**
|
|
654
|
-
* Interpolate a numeric shared value onto a range of numbers or colors.
|
|
655
|
-
*
|
|
656
|
-
* ```ts
|
|
657
|
-
* const scroll = useMotionValue(0)
|
|
658
|
-
* const headerOpacity = useTransform(scroll, [0, 100], [1, 0])
|
|
659
|
-
* const headerColor = useTransform(scroll, [0, 100], ['#fff', '#000'])
|
|
660
|
-
* ```
|
|
661
|
-
*
|
|
662
|
-
* When `outputRange` is numeric, this maps to Reanimated's `interpolate`;
|
|
663
|
-
* when it's a tuple of color strings, it maps to `interpolateColor`. The
|
|
664
|
-
* input range must be monotonically increasing.
|
|
665
|
-
*/
|
|
666
|
-
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly number[], options?: UseTransformOptions): SharedValue<number>;
|
|
667
|
-
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly string[], options?: UseTransformOptions): SharedValue<string>;
|
|
668
639
|
|
|
669
640
|
/**
|
|
670
641
|
* Numeric style keys `useInterpolatedStyle` can emit directly (not lifted into
|
|
@@ -689,6 +660,22 @@ type InterpolatedStyleMap = {
|
|
|
689
660
|
} & {
|
|
690
661
|
[K in ColorStyleKey]?: readonly string[];
|
|
691
662
|
};
|
|
663
|
+
/**
|
|
664
|
+
* The style shape a map of `K` produces. Transform keys collapse into the
|
|
665
|
+
* single `transform` array the worklet emits; every other key survives under
|
|
666
|
+
* its own name, typed from the RN style family it belongs to.
|
|
667
|
+
*
|
|
668
|
+
* This is what lets the return narrow to `ViewStyle` at a call site whose map
|
|
669
|
+
* holds only view keys. Reanimated's own `useAnimatedStyle` resolves to
|
|
670
|
+
* `DefaultStyle` (`ViewStyle | ImageStyle | TextStyle`), and that union is
|
|
671
|
+
* rejected inside a `StyleProp<ViewStyle>` array — `TextStyle` fails on
|
|
672
|
+
* `cursor` — so a consumer had to cast.
|
|
673
|
+
*/
|
|
674
|
+
type InterpolatedStyle<K extends keyof InterpolatedStyleMap> = {
|
|
675
|
+
[P in Exclude<K, TransformKey>]: P extends keyof TextStyle ? TextStyle[P] : P extends keyof ImageStyle ? ImageStyle[P] : P extends keyof ViewStyle ? ViewStyle[P] : never;
|
|
676
|
+
} & (Extract<K, TransformKey> extends never ? unknown : {
|
|
677
|
+
transform: NonNullable<ViewStyle['transform']>;
|
|
678
|
+
});
|
|
692
679
|
interface UseInterpolatedStyleOptions {
|
|
693
680
|
/**
|
|
694
681
|
* Input range mapped onto every key's output range. Defaults to `[0, 1]`
|
|
@@ -746,7 +733,7 @@ interface UseInterpolatedStyleOptions {
|
|
|
746
733
|
* hook stays fully declarative and hashable so unchanged maps produce zero
|
|
747
734
|
* new UI-thread closures.
|
|
748
735
|
*/
|
|
749
|
-
declare function useInterpolatedStyle(progress: SharedValue<number>, map: InterpolatedStyleMap, options?: UseInterpolatedStyleOptions):
|
|
736
|
+
declare function useInterpolatedStyle<K extends keyof InterpolatedStyleMap>(progress: SharedValue<number>, map: Pick<InterpolatedStyleMap, K>, options?: UseInterpolatedStyleOptions): InterpolatedStyle<K>;
|
|
750
737
|
|
|
751
738
|
/**
|
|
752
739
|
* Create an animatable value owned by JS but readable from worklets.
|
|
@@ -797,9 +784,57 @@ declare function useMotionValue<T extends number | string>(initial: T): SharedVa
|
|
|
797
784
|
* must resolve to a spring config — a name registered as timing / decay /
|
|
798
785
|
* no-animation warns in dev and falls back to the default spring (reach for
|
|
799
786
|
* `useAnimation` when the named transition's type should be honored).
|
|
787
|
+
*
|
|
788
|
+
* Reduced motion (via `<MotionConfig reducedMotion>`) is honoured: the output
|
|
789
|
+
* is assigned the target directly, with no spring, on both paths.
|
|
800
790
|
*/
|
|
801
791
|
declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition | TransitionName): SharedValue<number>;
|
|
802
792
|
|
|
793
|
+
interface UseTransformOptions {
|
|
794
|
+
extrapolateLeft?: ExtrapolationMode;
|
|
795
|
+
extrapolateRight?: ExtrapolationMode;
|
|
796
|
+
}
|
|
797
|
+
/**
|
|
798
|
+
* Derive a value from one or more shared values via a transformer worklet.
|
|
799
|
+
*
|
|
800
|
+
* ```ts
|
|
801
|
+
* const x = useMotionValue(0)
|
|
802
|
+
* const y = useMotionValue(0)
|
|
803
|
+
* const distance = useTransform(() => {
|
|
804
|
+
* 'worklet'
|
|
805
|
+
* return Math.sqrt(x.value ** 2 + y.value ** 2)
|
|
806
|
+
* })
|
|
807
|
+
* ```
|
|
808
|
+
*
|
|
809
|
+
* The transformer MUST be a worklet — put the `'worklet'` directive as its
|
|
810
|
+
* first statement so the consumer's Babel plugin captures the shared values
|
|
811
|
+
* it reads as its closure. It runs on the UI thread on every frame where
|
|
812
|
+
* any read shared value changes.
|
|
813
|
+
*
|
|
814
|
+
* A plain function cannot work here, and the hook warns in dev when it gets
|
|
815
|
+
* one: the best-effort wrapper it falls back to closes over the opaque
|
|
816
|
+
* function reference, not the shared values read inside it, so Reanimated
|
|
817
|
+
* can't track them as dependencies — the derived value only refreshes on
|
|
818
|
+
* React re-renders, and native builds reject the plain function when the
|
|
819
|
+
* closure crosses to the UI thread.
|
|
820
|
+
*/
|
|
821
|
+
declare function useTransform<T>(transformer: () => T): SharedValue<T>;
|
|
822
|
+
/**
|
|
823
|
+
* Interpolate a numeric shared value onto a range of numbers or colors.
|
|
824
|
+
*
|
|
825
|
+
* ```ts
|
|
826
|
+
* const scroll = useMotionValue(0)
|
|
827
|
+
* const headerOpacity = useTransform(scroll, [0, 100], [1, 0])
|
|
828
|
+
* const headerColor = useTransform(scroll, [0, 100], ['#fff', '#000'])
|
|
829
|
+
* ```
|
|
830
|
+
*
|
|
831
|
+
* When `outputRange` is numeric, this maps to Reanimated's `interpolate`;
|
|
832
|
+
* when it's a tuple of color strings, it maps to `interpolateColor`. The
|
|
833
|
+
* input range must be monotonically increasing.
|
|
834
|
+
*/
|
|
835
|
+
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly number[], options?: UseTransformOptions): SharedValue<number>;
|
|
836
|
+
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly string[], options?: UseTransformOptions): SharedValue<string>;
|
|
837
|
+
|
|
803
838
|
interface UseScrollResult {
|
|
804
839
|
/** Horizontal scroll offset in points. */
|
|
805
840
|
scrollX: SharedValue<number>;
|
|
@@ -963,6 +998,29 @@ interface UseShadowOptions {
|
|
|
963
998
|
*/
|
|
964
999
|
declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnType<typeof useAnimatedStyle>;
|
|
965
1000
|
|
|
1001
|
+
/**
|
|
1002
|
+
* Animated style that translates by two shared values:
|
|
1003
|
+
* `transform: [{ translateX: x }, { translateY: y }]`.
|
|
1004
|
+
*
|
|
1005
|
+
* This is the style fragment every drag-style hook returns (`useTouchDrag`,
|
|
1006
|
+
* and `useDrag` / `usePan` / `useSwipe` in `@rootnative/inertia-gestures`).
|
|
1007
|
+
* Use it directly when a custom gesture owns its own translation values.
|
|
1008
|
+
*
|
|
1009
|
+
* The style owns the whole `transform` key. Do not stack a second transform
|
|
1010
|
+
* style beside it — `transform` is one key in React Native, so the later
|
|
1011
|
+
* style replaces this one instead of merging. Nest another animated view, or
|
|
1012
|
+
* build one style from `x` / `y` with `useInterpolatedStyle`, to add a
|
|
1013
|
+
* transform.
|
|
1014
|
+
*
|
|
1015
|
+
* ```tsx
|
|
1016
|
+
* const x = useMotionValue(0)
|
|
1017
|
+
* const y = useMotionValue(0)
|
|
1018
|
+
* const style = useTranslateStyle(x, y)
|
|
1019
|
+
* return <Motion.View style={style} />
|
|
1020
|
+
* ```
|
|
1021
|
+
*/
|
|
1022
|
+
declare function useTranslateStyle(x: SharedValue<number>, y: SharedValue<number>): ReturnType<typeof useAnimatedStyle>;
|
|
1023
|
+
|
|
966
1024
|
/**
|
|
967
1025
|
* Build a controller for a variants map. The controller is the imperative
|
|
968
1026
|
* escape hatch — pass it to a Motion primitive via `controller={...}` and
|
|
@@ -976,4 +1034,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
|
|
|
976
1034
|
*/
|
|
977
1035
|
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
978
1036
|
|
|
979
|
-
export { AnimatableValue, type AnimationCallback, 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, 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 };
|
|
1037
|
+
export { AnimatableValue, type AnimationCallback, type Animator, type BoxShadowLayer, type CallbackFactory, 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, isTopLevelTransition, resolveAnimatableValue, resolveNamedTransition, resolveTransition, stableSig, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useStaggerDelay, useTransform, useTranslateStyle, useVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
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';
|
|
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-
|
|
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,
|
|
4
|
+
import { TextStyle, ImageStyle, ViewStyle, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
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-08mG8fNk.js';
|
|
6
|
+
export { e as AnimateStyle, f as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, g as EasingFunction, h as EasingFunctionFactory, G as GestureLayerTransitions, i as GestureSubStates, j as MotionComponentProps, k as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, l as RepeatConfig, m as SequenceStep, n as TimingTransition, o as Transition } from './types-08mG8fNk.js';
|
|
7
|
+
export { a as applyBounds } from './applyBounds-BYGiHrYO.js';
|
|
7
8
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
8
9
|
export { SharedValue } from 'react-native-reanimated';
|
|
9
|
-
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-
|
|
10
|
+
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-D1lHeQQ6.js';
|
|
10
11
|
export { MotionFlatList } from './motion/FlatList.js';
|
|
11
12
|
export { MotionImage } from './motion/Image.js';
|
|
12
13
|
export { MotionPressable } from './motion/Pressable.js';
|
|
@@ -341,6 +342,8 @@ declare function cubicBezier(css: string): EasingInput;
|
|
|
341
342
|
*/
|
|
342
343
|
declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: number) => number) | undefined;
|
|
343
344
|
|
|
345
|
+
declare function isTopLevelTransition(t: unknown): t is TransitionConfig;
|
|
346
|
+
|
|
344
347
|
/**
|
|
345
348
|
* Worklet-safe single-step animation builder. Mirrors a subset of
|
|
346
349
|
* `resolveTransition` for the UI-thread path where the transition config is
|
|
@@ -367,6 +370,15 @@ declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: numb
|
|
|
367
370
|
*/
|
|
368
371
|
declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number, callback?: AnimationCallback): unknown;
|
|
369
372
|
|
|
373
|
+
/**
|
|
374
|
+
* Stable string signature for an arbitrary value — used as a dep-array
|
|
375
|
+
* member so a fresh object literal each render doesn't re-fire an effect
|
|
376
|
+
* unless something structurally changed. Functions serialize as `null`
|
|
377
|
+
* (their identity isn't useful in a sig); `undefined` collapses to an empty
|
|
378
|
+
* string so omitted props compare equal across renders.
|
|
379
|
+
*/
|
|
380
|
+
declare function stableSig(value: unknown): string;
|
|
381
|
+
|
|
370
382
|
/**
|
|
371
383
|
* The one colour spelling Reanimated's animation drivers cannot accept.
|
|
372
384
|
*
|
|
@@ -624,47 +636,6 @@ declare function useColorCascade(rest: string, layers: readonly ColorCascadeLaye
|
|
|
624
636
|
* - `'extend'` — continue the linear slope beyond the range.
|
|
625
637
|
*/
|
|
626
638
|
type ExtrapolationMode = 'clamp' | 'identity' | 'extend';
|
|
627
|
-
interface UseTransformOptions {
|
|
628
|
-
extrapolateLeft?: ExtrapolationMode;
|
|
629
|
-
extrapolateRight?: ExtrapolationMode;
|
|
630
|
-
}
|
|
631
|
-
/**
|
|
632
|
-
* Derive a value from one or more shared values via a transformer worklet.
|
|
633
|
-
*
|
|
634
|
-
* ```ts
|
|
635
|
-
* const x = useMotionValue(0)
|
|
636
|
-
* const y = useMotionValue(0)
|
|
637
|
-
* const distance = useTransform(() => Math.sqrt(x.value ** 2 + y.value ** 2))
|
|
638
|
-
* ```
|
|
639
|
-
*
|
|
640
|
-
* The transformer MUST be a worklet — put the `'worklet'` directive as its
|
|
641
|
-
* first statement so the consumer's Babel plugin captures the shared values
|
|
642
|
-
* it reads as its closure. It runs on the UI thread on every frame where
|
|
643
|
-
* any read shared value changes.
|
|
644
|
-
*
|
|
645
|
-
* A plain function cannot work here, and the hook warns in dev when it gets
|
|
646
|
-
* one: the best-effort wrapper it falls back to closes over the opaque
|
|
647
|
-
* function reference, not the shared values read inside it, so Reanimated
|
|
648
|
-
* can't track them as dependencies — the derived value only refreshes on
|
|
649
|
-
* React re-renders, and native builds reject the plain function when the
|
|
650
|
-
* closure crosses to the UI thread.
|
|
651
|
-
*/
|
|
652
|
-
declare function useTransform<T>(transformer: () => T): SharedValue<T>;
|
|
653
|
-
/**
|
|
654
|
-
* Interpolate a numeric shared value onto a range of numbers or colors.
|
|
655
|
-
*
|
|
656
|
-
* ```ts
|
|
657
|
-
* const scroll = useMotionValue(0)
|
|
658
|
-
* const headerOpacity = useTransform(scroll, [0, 100], [1, 0])
|
|
659
|
-
* const headerColor = useTransform(scroll, [0, 100], ['#fff', '#000'])
|
|
660
|
-
* ```
|
|
661
|
-
*
|
|
662
|
-
* When `outputRange` is numeric, this maps to Reanimated's `interpolate`;
|
|
663
|
-
* when it's a tuple of color strings, it maps to `interpolateColor`. The
|
|
664
|
-
* input range must be monotonically increasing.
|
|
665
|
-
*/
|
|
666
|
-
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly number[], options?: UseTransformOptions): SharedValue<number>;
|
|
667
|
-
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly string[], options?: UseTransformOptions): SharedValue<string>;
|
|
668
639
|
|
|
669
640
|
/**
|
|
670
641
|
* Numeric style keys `useInterpolatedStyle` can emit directly (not lifted into
|
|
@@ -689,6 +660,22 @@ type InterpolatedStyleMap = {
|
|
|
689
660
|
} & {
|
|
690
661
|
[K in ColorStyleKey]?: readonly string[];
|
|
691
662
|
};
|
|
663
|
+
/**
|
|
664
|
+
* The style shape a map of `K` produces. Transform keys collapse into the
|
|
665
|
+
* single `transform` array the worklet emits; every other key survives under
|
|
666
|
+
* its own name, typed from the RN style family it belongs to.
|
|
667
|
+
*
|
|
668
|
+
* This is what lets the return narrow to `ViewStyle` at a call site whose map
|
|
669
|
+
* holds only view keys. Reanimated's own `useAnimatedStyle` resolves to
|
|
670
|
+
* `DefaultStyle` (`ViewStyle | ImageStyle | TextStyle`), and that union is
|
|
671
|
+
* rejected inside a `StyleProp<ViewStyle>` array — `TextStyle` fails on
|
|
672
|
+
* `cursor` — so a consumer had to cast.
|
|
673
|
+
*/
|
|
674
|
+
type InterpolatedStyle<K extends keyof InterpolatedStyleMap> = {
|
|
675
|
+
[P in Exclude<K, TransformKey>]: P extends keyof TextStyle ? TextStyle[P] : P extends keyof ImageStyle ? ImageStyle[P] : P extends keyof ViewStyle ? ViewStyle[P] : never;
|
|
676
|
+
} & (Extract<K, TransformKey> extends never ? unknown : {
|
|
677
|
+
transform: NonNullable<ViewStyle['transform']>;
|
|
678
|
+
});
|
|
692
679
|
interface UseInterpolatedStyleOptions {
|
|
693
680
|
/**
|
|
694
681
|
* Input range mapped onto every key's output range. Defaults to `[0, 1]`
|
|
@@ -746,7 +733,7 @@ interface UseInterpolatedStyleOptions {
|
|
|
746
733
|
* hook stays fully declarative and hashable so unchanged maps produce zero
|
|
747
734
|
* new UI-thread closures.
|
|
748
735
|
*/
|
|
749
|
-
declare function useInterpolatedStyle(progress: SharedValue<number>, map: InterpolatedStyleMap, options?: UseInterpolatedStyleOptions):
|
|
736
|
+
declare function useInterpolatedStyle<K extends keyof InterpolatedStyleMap>(progress: SharedValue<number>, map: Pick<InterpolatedStyleMap, K>, options?: UseInterpolatedStyleOptions): InterpolatedStyle<K>;
|
|
750
737
|
|
|
751
738
|
/**
|
|
752
739
|
* Create an animatable value owned by JS but readable from worklets.
|
|
@@ -797,9 +784,57 @@ declare function useMotionValue<T extends number | string>(initial: T): SharedVa
|
|
|
797
784
|
* must resolve to a spring config — a name registered as timing / decay /
|
|
798
785
|
* no-animation warns in dev and falls back to the default spring (reach for
|
|
799
786
|
* `useAnimation` when the named transition's type should be honored).
|
|
787
|
+
*
|
|
788
|
+
* Reduced motion (via `<MotionConfig reducedMotion>`) is honoured: the output
|
|
789
|
+
* is assigned the target directly, with no spring, on both paths.
|
|
800
790
|
*/
|
|
801
791
|
declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition | TransitionName): SharedValue<number>;
|
|
802
792
|
|
|
793
|
+
interface UseTransformOptions {
|
|
794
|
+
extrapolateLeft?: ExtrapolationMode;
|
|
795
|
+
extrapolateRight?: ExtrapolationMode;
|
|
796
|
+
}
|
|
797
|
+
/**
|
|
798
|
+
* Derive a value from one or more shared values via a transformer worklet.
|
|
799
|
+
*
|
|
800
|
+
* ```ts
|
|
801
|
+
* const x = useMotionValue(0)
|
|
802
|
+
* const y = useMotionValue(0)
|
|
803
|
+
* const distance = useTransform(() => {
|
|
804
|
+
* 'worklet'
|
|
805
|
+
* return Math.sqrt(x.value ** 2 + y.value ** 2)
|
|
806
|
+
* })
|
|
807
|
+
* ```
|
|
808
|
+
*
|
|
809
|
+
* The transformer MUST be a worklet — put the `'worklet'` directive as its
|
|
810
|
+
* first statement so the consumer's Babel plugin captures the shared values
|
|
811
|
+
* it reads as its closure. It runs on the UI thread on every frame where
|
|
812
|
+
* any read shared value changes.
|
|
813
|
+
*
|
|
814
|
+
* A plain function cannot work here, and the hook warns in dev when it gets
|
|
815
|
+
* one: the best-effort wrapper it falls back to closes over the opaque
|
|
816
|
+
* function reference, not the shared values read inside it, so Reanimated
|
|
817
|
+
* can't track them as dependencies — the derived value only refreshes on
|
|
818
|
+
* React re-renders, and native builds reject the plain function when the
|
|
819
|
+
* closure crosses to the UI thread.
|
|
820
|
+
*/
|
|
821
|
+
declare function useTransform<T>(transformer: () => T): SharedValue<T>;
|
|
822
|
+
/**
|
|
823
|
+
* Interpolate a numeric shared value onto a range of numbers or colors.
|
|
824
|
+
*
|
|
825
|
+
* ```ts
|
|
826
|
+
* const scroll = useMotionValue(0)
|
|
827
|
+
* const headerOpacity = useTransform(scroll, [0, 100], [1, 0])
|
|
828
|
+
* const headerColor = useTransform(scroll, [0, 100], ['#fff', '#000'])
|
|
829
|
+
* ```
|
|
830
|
+
*
|
|
831
|
+
* When `outputRange` is numeric, this maps to Reanimated's `interpolate`;
|
|
832
|
+
* when it's a tuple of color strings, it maps to `interpolateColor`. The
|
|
833
|
+
* input range must be monotonically increasing.
|
|
834
|
+
*/
|
|
835
|
+
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly number[], options?: UseTransformOptions): SharedValue<number>;
|
|
836
|
+
declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly string[], options?: UseTransformOptions): SharedValue<string>;
|
|
837
|
+
|
|
803
838
|
interface UseScrollResult {
|
|
804
839
|
/** Horizontal scroll offset in points. */
|
|
805
840
|
scrollX: SharedValue<number>;
|
|
@@ -963,6 +998,29 @@ interface UseShadowOptions {
|
|
|
963
998
|
*/
|
|
964
999
|
declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnType<typeof useAnimatedStyle>;
|
|
965
1000
|
|
|
1001
|
+
/**
|
|
1002
|
+
* Animated style that translates by two shared values:
|
|
1003
|
+
* `transform: [{ translateX: x }, { translateY: y }]`.
|
|
1004
|
+
*
|
|
1005
|
+
* This is the style fragment every drag-style hook returns (`useTouchDrag`,
|
|
1006
|
+
* and `useDrag` / `usePan` / `useSwipe` in `@rootnative/inertia-gestures`).
|
|
1007
|
+
* Use it directly when a custom gesture owns its own translation values.
|
|
1008
|
+
*
|
|
1009
|
+
* The style owns the whole `transform` key. Do not stack a second transform
|
|
1010
|
+
* style beside it — `transform` is one key in React Native, so the later
|
|
1011
|
+
* style replaces this one instead of merging. Nest another animated view, or
|
|
1012
|
+
* build one style from `x` / `y` with `useInterpolatedStyle`, to add a
|
|
1013
|
+
* transform.
|
|
1014
|
+
*
|
|
1015
|
+
* ```tsx
|
|
1016
|
+
* const x = useMotionValue(0)
|
|
1017
|
+
* const y = useMotionValue(0)
|
|
1018
|
+
* const style = useTranslateStyle(x, y)
|
|
1019
|
+
* return <Motion.View style={style} />
|
|
1020
|
+
* ```
|
|
1021
|
+
*/
|
|
1022
|
+
declare function useTranslateStyle(x: SharedValue<number>, y: SharedValue<number>): ReturnType<typeof useAnimatedStyle>;
|
|
1023
|
+
|
|
966
1024
|
/**
|
|
967
1025
|
* Build a controller for a variants map. The controller is the imperative
|
|
968
1026
|
* escape hatch — pass it to a Motion primitive via `controller={...}` and
|
|
@@ -976,4 +1034,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
|
|
|
976
1034
|
*/
|
|
977
1035
|
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
978
1036
|
|
|
979
|
-
export { AnimatableValue, type AnimationCallback, 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, 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 };
|
|
1037
|
+
export { AnimatableValue, type AnimationCallback, type Animator, type BoxShadowLayer, type CallbackFactory, 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, isTopLevelTransition, resolveAnimatableValue, resolveNamedTransition, resolveTransition, stableSig, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useStaggerDelay, useTransform, useTranslateStyle, useVariants };
|