@onlynative/inertia 0.0.1-alpha.0
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 +33 -0
- package/LICENSE +21 -0
- package/README.md +90 -0
- package/dist/index.d.mts +185 -0
- package/dist/index.d.ts +185 -0
- package/dist/index.js +817 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +796 -0
- package/dist/index.mjs.map +1 -0
- package/dist/motion/Image.d.mts +12 -0
- package/dist/motion/Image.d.ts +12 -0
- package/dist/motion/Image.js +656 -0
- package/dist/motion/Image.js.map +1 -0
- package/dist/motion/Image.mjs +650 -0
- package/dist/motion/Image.mjs.map +1 -0
- package/dist/motion/Pressable.d.mts +15 -0
- package/dist/motion/Pressable.d.ts +15 -0
- package/dist/motion/Pressable.js +656 -0
- package/dist/motion/Pressable.js.map +1 -0
- package/dist/motion/Pressable.mjs +650 -0
- package/dist/motion/Pressable.mjs.map +1 -0
- package/dist/motion/ScrollView.d.mts +12 -0
- package/dist/motion/ScrollView.d.ts +12 -0
- package/dist/motion/ScrollView.js +656 -0
- package/dist/motion/ScrollView.js.map +1 -0
- package/dist/motion/ScrollView.mjs +650 -0
- package/dist/motion/ScrollView.mjs.map +1 -0
- package/dist/motion/Text.d.mts +11 -0
- package/dist/motion/Text.d.ts +11 -0
- package/dist/motion/Text.js +656 -0
- package/dist/motion/Text.js.map +1 -0
- package/dist/motion/Text.mjs +650 -0
- package/dist/motion/Text.mjs.map +1 -0
- package/dist/motion/View.d.mts +11 -0
- package/dist/motion/View.d.ts +11 -0
- package/dist/motion/View.js +656 -0
- package/dist/motion/View.js.map +1 -0
- package/dist/motion/View.mjs +650 -0
- package/dist/motion/View.mjs.map +1 -0
- package/dist/types-CmbXx-G3.d.mts +185 -0
- package/dist/types-CmbXx-G3.d.ts +185 -0
- package/llms.txt +78 -0
- package/package.json +120 -0
- package/src/config/MotionConfig.tsx +30 -0
- package/src/config/MotionConfigContext.ts +53 -0
- package/src/config/index.ts +9 -0
- package/src/index.ts +49 -0
- package/src/motion/Image.tsx +9 -0
- package/src/motion/Pressable.tsx +12 -0
- package/src/motion/ScrollView.tsx +9 -0
- package/src/motion/Text.tsx +8 -0
- package/src/motion/View.tsx +8 -0
- package/src/motion/createMotionComponent.tsx +850 -0
- package/src/motion/index.ts +26 -0
- package/src/presence/Presence.tsx +165 -0
- package/src/presence/PresenceContext.ts +28 -0
- package/src/presence/index.ts +6 -0
- package/src/transitions/easing.ts +29 -0
- package/src/transitions/index.ts +2 -0
- package/src/transitions/resolve.ts +265 -0
- package/src/types.ts +207 -0
- package/src/values/index.ts +1 -0
- package/src/values/useVariants.ts +60 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@onlynative/inertia` are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). Pre-`1.0`, breaking changes may land in minor versions and are called out under their release.
|
|
4
|
+
|
|
5
|
+
## [Unreleased]
|
|
6
|
+
|
|
7
|
+
## [0.0.1-alpha.0] — 2026-05-07
|
|
8
|
+
|
|
9
|
+
Initial alpha publish. The full v0.1 surface is in place; APIs are still subject to change before `0.1.0`.
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- **Primitives** — `Motion.View`, `Motion.Text`, `Motion.Image`, `Motion.Pressable`, `Motion.ScrollView` with per-primitive style inference (no shared `ViewStyle & TextStyle & ImageStyle` fallback).
|
|
14
|
+
- **Subpath imports** — `@onlynative/inertia/view`, `/text`, `/image`, `/pressable`, `/scroll-view` for per-primitive tree-shaking. Bundle-size baselines recorded via `size-limit`.
|
|
15
|
+
- **Transitions** — `spring` (default, react-spring vocabulary `tension`/`friction`/`mass`/`velocity`), `timing` (with auto-worklet-wrapped easing functions), `decay`, `no-animation`. Per-property `transition` shape takes precedence over top-level.
|
|
16
|
+
- **Sequences and keyframes** — `animate={{ x: [0, 100, 0] }}` and `[{ to, ...override }]` step shape with per-step transition overrides.
|
|
17
|
+
- **Repeat config** — unified `repeat: number | 'infinite' | { count, alternate }` shape; `alternate` defaults to `true`.
|
|
18
|
+
- **Variants** — `variants={{ open, closed }}` + `animate="open"` props; `useVariants` hook returning `{ current, transitionTo, subscribe }` for programmatic flows; `controller` prop wires the hook back to the component.
|
|
19
|
+
- **Gestures** — single `gesture` prop on every primitive: `pressed`, `focused`, `hovered` (web) sub-states. Pressable-based, zero overhead when omitted.
|
|
20
|
+
- **`<Presence>`** — mount/unmount transitions on top of Reanimated's `entering` / `exiting`. Exiting children automatically receive `pointerEvents: 'none'`.
|
|
21
|
+
- **`<MotionConfig reducedMotion>`** — `'user' | 'never' | 'always'` provider with `'user'` as the default. `useMotionConfig` and `useShouldReduceMotion` exposed for custom integrations.
|
|
22
|
+
- **`onAnimationEnd`** — `{ key, finished, value, target, phase, step, iteration }` payload. Transform-group keys (`translateX`/`translateY`, `scaleX`/`scaleY`) coalesce so a single `translate` step fires once, not once per axis.
|
|
23
|
+
- **Stable worklets, JS-thread resolver** — animate/transition objects compile to baked `withSpring` / `withTiming` / `withDecay` calls on the JS thread. Worklet bodies never iterate `Object.keys(...)` at frame time, and re-renders with unchanged values produce zero new UI-thread closures (regression-tested).
|
|
24
|
+
- **`createMotionComponent<C>()`** — public factory for custom primitives, with style inference from `C`'s `style` prop.
|
|
25
|
+
- **Docs** — Docusaurus site at `onlynative.github.io/inertia`; `llms.txt` and `llms-full.txt` shipped both on the docs site and in the npm tarball.
|
|
26
|
+
|
|
27
|
+
### Known limitations
|
|
28
|
+
|
|
29
|
+
- SVG path morphing, gradient interpolation, and shared-element transitions across screens are out of scope until `0.2.x` / `1.x` per the roadmap.
|
|
30
|
+
- `react-native-gesture-handler` integration (drag, pan, swipe sub-states) lands in `0.2` via the optional `@onlynative/inertia-gestures` adapter.
|
|
31
|
+
|
|
32
|
+
[unreleased]: https://github.com/onlynative/inertia/compare/v0.0.1-alpha.0...HEAD
|
|
33
|
+
[0.0.1-alpha.0]: https://github.com/onlynative/inertia/releases/tag/v0.0.1-alpha.0
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 OnlyNative
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# @onlynative/inertia
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@onlynative/inertia)
|
|
4
|
+
[](https://docs.swmansion.com/react-native-reanimated/)
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
|
|
7
|
+
Declarative animation primitives for React Native, built as a thin wrapper around [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/). Inspired by Framer Motion (web) and react-spring (cross-platform).
|
|
8
|
+
|
|
9
|
+
> **Status:** `0.0.1-alpha`. Pre-1.0 minor versions may break — see the root [README](https://github.com/onlynative/inertia#versioning--release).
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
pnpm add @onlynative/inertia react-native-reanimated
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Then enable the [Reanimated Babel plugin](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
|
|
18
|
+
|
|
19
|
+
**Peer dependencies:** `react >=19.0.0`, `react-native >=0.81.0`, `react-native-reanimated >=4.0.0`.
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { Motion, Presence } from '@onlynative/inertia'
|
|
25
|
+
|
|
26
|
+
export function FadeIn() {
|
|
27
|
+
return (
|
|
28
|
+
<Motion.View
|
|
29
|
+
initial={{ opacity: 0, translateY: 20 }}
|
|
30
|
+
animate={{ opacity: 1, translateY: 0 }}
|
|
31
|
+
transition={{
|
|
32
|
+
opacity: { type: 'timing', duration: 200 },
|
|
33
|
+
translateY: { type: 'spring', tension: 180, friction: 12 },
|
|
34
|
+
}}
|
|
35
|
+
/>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## What ships
|
|
41
|
+
|
|
42
|
+
- **Primitives** — `Motion.View`, `Motion.Text`, `Motion.Image`, `Motion.Pressable`, `Motion.ScrollView`. Per-primitive style inference (no shared `ViewStyle & TextStyle & ImageStyle` fallback).
|
|
43
|
+
- **Sequences and keyframes** — `animate={{ x: [0, 100, 0] }}` with per-step transitions; unified `repeat: number | 'infinite' | { count, alternate }`.
|
|
44
|
+
- **Variants** — `variants={{ open, closed }}` with `animate="open"`. Programmatic control via `useVariants` + `controller={...}`.
|
|
45
|
+
- **Gestures** — single `gesture` prop on every primitive: `gesture={{ pressed, focused, hovered }}`. Zero overhead when omitted.
|
|
46
|
+
- **`<Presence>`** — mount/unmount transitions; exiting children automatically receive `pointerEvents: 'none'`.
|
|
47
|
+
- **`<MotionConfig reducedMotion>`** — OS reduce-motion honored end-to-end (`'user' | 'never' | 'always'`).
|
|
48
|
+
- **Per-primitive subpath imports** — `@onlynative/inertia/view`, `/text`, `/image`, `/pressable`, `/scroll-view`.
|
|
49
|
+
- **JS-thread resolver, memoized worklets** — animate/transition objects compile to baked `withSpring` / `withTiming` / `withDecay` calls on the JS thread; the worklet body never iterates `Object.keys(...)` at frame time.
|
|
50
|
+
|
|
51
|
+
## Subpath imports
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import { MotionView } from '@onlynative/inertia/view'
|
|
55
|
+
import { MotionText } from '@onlynative/inertia/text'
|
|
56
|
+
import { MotionImage } from '@onlynative/inertia/image'
|
|
57
|
+
import { MotionPressable } from '@onlynative/inertia/pressable'
|
|
58
|
+
import { MotionScrollView } from '@onlynative/inertia/scroll-view'
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
A `Motion.View`-only import currently bundles to ~3.2 kB brotlied (excluding peers).
|
|
62
|
+
|
|
63
|
+
## Transitions
|
|
64
|
+
|
|
65
|
+
| `type` | Public config keys | Maps to |
|
|
66
|
+
| -------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------- |
|
|
67
|
+
| `'spring'` (default) | `tension`, `friction`, `mass`, `velocity`, `restSpeedThreshold`, `restDisplacementThreshold` | `withSpring` |
|
|
68
|
+
| `'timing'` | `duration`, `easing`, `delay` | `withTiming` |
|
|
69
|
+
| `'decay'` | `velocity`, `deceleration`, `clamp` | `withDecay` |
|
|
70
|
+
| `'no-animation'` | — | direct assignment, no interpolation |
|
|
71
|
+
|
|
72
|
+
Plus, on any transition: `delay`, `repeat`. Per-property transitions take precedence over the top-level transition. Spring config uses **react-spring vocabulary** (`tension`/`friction`); Reanimated's raw `stiffness`/`damping` is never on the public surface.
|
|
73
|
+
|
|
74
|
+
## Animatable properties
|
|
75
|
+
|
|
76
|
+
`opacity`, `translateX`, `translateY`, `scale`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`, `backgroundColor`, `borderRadius`, `width`, `height`. Layout transforms via `transform: [...]`. Color interpolation uses Reanimated's color utilities.
|
|
77
|
+
|
|
78
|
+
Out of scope for `0.x`: SVG path morphing, gradient interpolation, shared-element transitions across screens.
|
|
79
|
+
|
|
80
|
+
## Documentation
|
|
81
|
+
|
|
82
|
+
Full docs, every primitive's example screen, and an `llms-full.txt` reference live at:
|
|
83
|
+
|
|
84
|
+
- [https://onlynative.github.io/inertia/](https://onlynative.github.io/inertia/)
|
|
85
|
+
- [llms.txt](https://onlynative.github.io/inertia/llms.txt) — concise overview
|
|
86
|
+
- [llms-full.txt](https://onlynative.github.io/inertia/llms-full.txt) — full API reference
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
[MIT](./LICENSE) © OnlyNative
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ComponentType, ReactNode } from 'react';
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, V as VariantController } from './types-CmbXx-G3.mjs';
|
|
5
|
+
export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, S as SequenceStep, d as SpringTransition, e as TimingTransition, f as Transition, g as VariantsMap } from './types-CmbXx-G3.mjs';
|
|
6
|
+
export { MotionImage } from './motion/Image.mjs';
|
|
7
|
+
export { MotionPressable } from './motion/Pressable.mjs';
|
|
8
|
+
export { MotionScrollView } from './motion/ScrollView.mjs';
|
|
9
|
+
export { MotionText } from './motion/Text.mjs';
|
|
10
|
+
export { MotionView } from './motion/View.mjs';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Factory that wraps a React Native primitive as a `Motion.*` component.
|
|
14
|
+
*
|
|
15
|
+
* The generic `C` flows through `MotionProps`, so `animate` / `initial` /
|
|
16
|
+
* `exit` / `transition` all infer from `C`'s `style` prop. There is no
|
|
17
|
+
* shared `ViewStyle & TextStyle & ImageStyle` fallback.
|
|
18
|
+
*
|
|
19
|
+
* Alpha scope: numeric properties listed in `ALL_KEYS`, applied via
|
|
20
|
+
* Reanimated shared values + `useAnimatedStyle`. Sequences, variants,
|
|
21
|
+
* gestures, color animation, and the cross-render memoization optimization
|
|
22
|
+
* land in later phases.
|
|
23
|
+
*/
|
|
24
|
+
declare function createMotionComponent<C extends ComponentType<any>>(Component: C): MotionComponent<C>;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* The `Motion.*` namespace. Each property is a primitive with its style prop
|
|
28
|
+
* inferred from the underlying RN component. There is no shared style fallback.
|
|
29
|
+
*/
|
|
30
|
+
declare const Motion: {
|
|
31
|
+
readonly View: MotionComponent<typeof react_native.View>;
|
|
32
|
+
readonly Text: MotionComponent<typeof react_native.Text>;
|
|
33
|
+
readonly Image: MotionComponent<typeof react_native.Image>;
|
|
34
|
+
readonly Pressable: MotionComponent<react.ForwardRefExoticComponent<react_native.PressableProps & react.RefAttributes<react_native.View>>>;
|
|
35
|
+
readonly ScrollView: MotionComponent<typeof react_native.ScrollView>;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* How descendant Motion primitives should treat reduced-motion preferences.
|
|
40
|
+
*
|
|
41
|
+
* - `'user'` (default): defer to the OS accessibility setting via
|
|
42
|
+
* Reanimated's `useReducedMotion()`. This is the only value that respects
|
|
43
|
+
* user choice and is the right default for app-level wrappers.
|
|
44
|
+
* - `'never'`: animate regardless of OS setting. Use sparingly — e.g. for
|
|
45
|
+
* onboarding transitions you've decided are essential.
|
|
46
|
+
* - `'always'`: never animate, regardless of OS setting. Useful for tests
|
|
47
|
+
* and snapshots.
|
|
48
|
+
*/
|
|
49
|
+
type ReducedMotion = 'user' | 'never' | 'always';
|
|
50
|
+
interface MotionConfigValue {
|
|
51
|
+
reducedMotion: ReducedMotion;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Read the active `<MotionConfig>` from a descendant. Returns the default
|
|
55
|
+
* (`'user'`) when no provider is present.
|
|
56
|
+
*/
|
|
57
|
+
declare function useMotionConfig(): MotionConfigValue;
|
|
58
|
+
/**
|
|
59
|
+
* Resolve the active reduced-motion mode to a boolean. `'user'` consults
|
|
60
|
+
* Reanimated's OS-backed hook; `'always'` / `'never'` shortcut. Motion
|
|
61
|
+
* primitives call this to decide whether to swap transitions for
|
|
62
|
+
* `no-animation`.
|
|
63
|
+
*/
|
|
64
|
+
declare function useShouldReduceMotion(): boolean;
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Provider that controls how descendant Motion primitives respond to
|
|
68
|
+
* reduced-motion preferences. Wrap the root of your app once with the
|
|
69
|
+
* default (`reducedMotion="user"`) to respect the OS accessibility setting,
|
|
70
|
+
* or scope a subtree with `'always'` / `'never'` for specific use cases.
|
|
71
|
+
*/
|
|
72
|
+
declare function MotionConfig({ reducedMotion, children, }: {
|
|
73
|
+
reducedMotion?: ReducedMotion;
|
|
74
|
+
children: ReactNode;
|
|
75
|
+
}): react.JSX.Element;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Wrap a list of children with mount / unmount transitions. When a child is
|
|
79
|
+
* removed from the incoming list it stays in the snapshot until its exit
|
|
80
|
+
* animation completes; descendants consume the per-child `<PresenceContext>`
|
|
81
|
+
* to coordinate.
|
|
82
|
+
*
|
|
83
|
+
* Children must be `<Motion.*>` primitives (or any component that consumes
|
|
84
|
+
* `usePresence()` and calls `safeToRemove`). Plain elements without that
|
|
85
|
+
* contract will linger in the snapshot once removed; document that and pick
|
|
86
|
+
* the right primitive.
|
|
87
|
+
*
|
|
88
|
+
* Children also need explicit `key`s so removal is detectable across
|
|
89
|
+
* renders. Without a key, React falls back to positional identity and
|
|
90
|
+
* removal looks like a prop change — Presence has nothing to mark exiting.
|
|
91
|
+
*/
|
|
92
|
+
declare function Presence({ children }: {
|
|
93
|
+
children: ReactNode;
|
|
94
|
+
}): react.JSX.Element;
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Per-child contract between `<Presence>` and its descendant Motion
|
|
98
|
+
* primitives. `<Presence>` provides a fresh value to each rendered child;
|
|
99
|
+
* Motion primitives consume it to gate exit animations.
|
|
100
|
+
*
|
|
101
|
+
* - `isPresent`: `true` while the child is in the incoming children list.
|
|
102
|
+
* Flips to `false` when the parent removes it; the child remains rendered
|
|
103
|
+
* until `safeToRemove` is called.
|
|
104
|
+
* - `safeToRemove`: callback the child invokes when its exit animation has
|
|
105
|
+
* settled. `<Presence>` then drops the snapshot entry and unmounts.
|
|
106
|
+
*/
|
|
107
|
+
interface PresenceContextValue {
|
|
108
|
+
isPresent: boolean;
|
|
109
|
+
safeToRemove: () => void;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Read the surrounding `<Presence>` contract from a child component. Returns
|
|
113
|
+
* `null` when there is no `<Presence>` ancestor — useful for components that
|
|
114
|
+
* want to support both standalone and Presence-wrapped use without branching.
|
|
115
|
+
*/
|
|
116
|
+
declare function usePresence(): PresenceContextValue | null;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* UI-thread callback Reanimated invokes when an animation settles. Must be a
|
|
120
|
+
* worklet — callers either author one with `'worklet'` or build one via
|
|
121
|
+
* `runOnJS(...)` to bridge to JS-thread code.
|
|
122
|
+
*/
|
|
123
|
+
type AnimationCallback = (finished?: boolean, current?: number | string) => void;
|
|
124
|
+
/**
|
|
125
|
+
* Per-step callback factory. Resolvers call this with the step's phase and
|
|
126
|
+
* sequence index (or `undefined` for non-sequence animations) and attach the
|
|
127
|
+
* resulting callback to the underlying `withSpring` / `withTiming` /
|
|
128
|
+
* `withDecay` call.
|
|
129
|
+
*/
|
|
130
|
+
type CallbackFactory = (phase: 'step' | 'animation', step: number | undefined) => AnimationCallback | undefined;
|
|
131
|
+
/**
|
|
132
|
+
* Build a Reanimated animation for a single property. Runs on the JS thread
|
|
133
|
+
* once per change and produces a baked `withSpring` / `withTiming` /
|
|
134
|
+
* `withDecay` (optionally wrapped in `withDelay` / `withRepeat`) call. The
|
|
135
|
+
* worklet body only consumes the result.
|
|
136
|
+
*
|
|
137
|
+
* `callback`, when provided, fires once when the underlying single-shot
|
|
138
|
+
* animation settles. Repeat-wrapped animations forward the callback to
|
|
139
|
+
* `withRepeat`, so it fires once per iteration as Reanimated does.
|
|
140
|
+
*/
|
|
141
|
+
declare function resolveTransition(config: TransitionConfig | undefined, toValue: number | string, callback?: AnimationCallback): unknown;
|
|
142
|
+
/**
|
|
143
|
+
* Resolve a per-property `animate` value into a Reanimated animation.
|
|
144
|
+
*
|
|
145
|
+
* Handles the three shapes of `AnimatableValue`:
|
|
146
|
+
* 1. plain value → single `resolveTransition` call
|
|
147
|
+
* 2. `{ to, ...over }` → single step with the override merged into `base`
|
|
148
|
+
* 3. array of either → `withSequence` of resolved steps, with the
|
|
149
|
+
* top-level `repeat` applied at the **sequence level** (not per step).
|
|
150
|
+
* Per-step `repeat` overrides remain step-local.
|
|
151
|
+
*/
|
|
152
|
+
declare function resolveAnimatableValue<V extends number | string>(value: AnimatableValue<V>, base: TransitionConfig | undefined, factory?: CallbackFactory): unknown;
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Reanimated 3.9+ validates that easing functions used in nested-transition
|
|
156
|
+
* contexts (variants, sequences, per-property maps) are worklets, and crashes
|
|
157
|
+
* with `[Reanimated] The easing function is not a worklet` otherwise. The
|
|
158
|
+
* library accepts plain functions on the public surface; this helper wraps
|
|
159
|
+
* them so consumers don't have to think about the worklet boundary.
|
|
160
|
+
*
|
|
161
|
+
* If the input is already a worklet (has been processed by the worklets babel
|
|
162
|
+
* plugin), it's returned as-is. Otherwise it's wrapped in a function whose
|
|
163
|
+
* body declares the `'worklet'` directive — when our source is processed by
|
|
164
|
+
* the consumer's worklets babel plugin (the default Expo/RN setup), the
|
|
165
|
+
* wrapper becomes a real worklet that captures the user fn via closure.
|
|
166
|
+
*
|
|
167
|
+
* The user fn must be pure: no JS-thread captured refs, no shared mutable
|
|
168
|
+
* state, no calls to non-worklet APIs.
|
|
169
|
+
*/
|
|
170
|
+
declare function ensureWorkletEasing(easing: ((t: number) => number) | undefined): ((t: number) => number) | undefined;
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Build a controller for a variants map. The controller is the imperative
|
|
174
|
+
* escape hatch — pass it to a Motion primitive via `controller={...}` and
|
|
175
|
+
* call `controller.transitionTo('open')` from event handlers, async chains,
|
|
176
|
+
* etc. The hook name mirrors the prop name (`variants`) so the relationship
|
|
177
|
+
* is obvious.
|
|
178
|
+
*
|
|
179
|
+
* The controller is identity-stable across renders. State changes are
|
|
180
|
+
* delivered to subscribers via `subscribe` — Motion primitives subscribe
|
|
181
|
+
* internally and re-resolve `animate` on each transition.
|
|
182
|
+
*/
|
|
183
|
+
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
184
|
+
|
|
185
|
+
export { AnimatableValue, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, TransitionConfig, VariantController, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useMotionConfig, usePresence, useShouldReduceMotion, useVariants };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ComponentType, ReactNode } from 'react';
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, V as VariantController } from './types-CmbXx-G3.js';
|
|
5
|
+
export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, S as SequenceStep, d as SpringTransition, e as TimingTransition, f as Transition, g as VariantsMap } from './types-CmbXx-G3.js';
|
|
6
|
+
export { MotionImage } from './motion/Image.js';
|
|
7
|
+
export { MotionPressable } from './motion/Pressable.js';
|
|
8
|
+
export { MotionScrollView } from './motion/ScrollView.js';
|
|
9
|
+
export { MotionText } from './motion/Text.js';
|
|
10
|
+
export { MotionView } from './motion/View.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Factory that wraps a React Native primitive as a `Motion.*` component.
|
|
14
|
+
*
|
|
15
|
+
* The generic `C` flows through `MotionProps`, so `animate` / `initial` /
|
|
16
|
+
* `exit` / `transition` all infer from `C`'s `style` prop. There is no
|
|
17
|
+
* shared `ViewStyle & TextStyle & ImageStyle` fallback.
|
|
18
|
+
*
|
|
19
|
+
* Alpha scope: numeric properties listed in `ALL_KEYS`, applied via
|
|
20
|
+
* Reanimated shared values + `useAnimatedStyle`. Sequences, variants,
|
|
21
|
+
* gestures, color animation, and the cross-render memoization optimization
|
|
22
|
+
* land in later phases.
|
|
23
|
+
*/
|
|
24
|
+
declare function createMotionComponent<C extends ComponentType<any>>(Component: C): MotionComponent<C>;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* The `Motion.*` namespace. Each property is a primitive with its style prop
|
|
28
|
+
* inferred from the underlying RN component. There is no shared style fallback.
|
|
29
|
+
*/
|
|
30
|
+
declare const Motion: {
|
|
31
|
+
readonly View: MotionComponent<typeof react_native.View>;
|
|
32
|
+
readonly Text: MotionComponent<typeof react_native.Text>;
|
|
33
|
+
readonly Image: MotionComponent<typeof react_native.Image>;
|
|
34
|
+
readonly Pressable: MotionComponent<react.ForwardRefExoticComponent<react_native.PressableProps & react.RefAttributes<react_native.View>>>;
|
|
35
|
+
readonly ScrollView: MotionComponent<typeof react_native.ScrollView>;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* How descendant Motion primitives should treat reduced-motion preferences.
|
|
40
|
+
*
|
|
41
|
+
* - `'user'` (default): defer to the OS accessibility setting via
|
|
42
|
+
* Reanimated's `useReducedMotion()`. This is the only value that respects
|
|
43
|
+
* user choice and is the right default for app-level wrappers.
|
|
44
|
+
* - `'never'`: animate regardless of OS setting. Use sparingly — e.g. for
|
|
45
|
+
* onboarding transitions you've decided are essential.
|
|
46
|
+
* - `'always'`: never animate, regardless of OS setting. Useful for tests
|
|
47
|
+
* and snapshots.
|
|
48
|
+
*/
|
|
49
|
+
type ReducedMotion = 'user' | 'never' | 'always';
|
|
50
|
+
interface MotionConfigValue {
|
|
51
|
+
reducedMotion: ReducedMotion;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Read the active `<MotionConfig>` from a descendant. Returns the default
|
|
55
|
+
* (`'user'`) when no provider is present.
|
|
56
|
+
*/
|
|
57
|
+
declare function useMotionConfig(): MotionConfigValue;
|
|
58
|
+
/**
|
|
59
|
+
* Resolve the active reduced-motion mode to a boolean. `'user'` consults
|
|
60
|
+
* Reanimated's OS-backed hook; `'always'` / `'never'` shortcut. Motion
|
|
61
|
+
* primitives call this to decide whether to swap transitions for
|
|
62
|
+
* `no-animation`.
|
|
63
|
+
*/
|
|
64
|
+
declare function useShouldReduceMotion(): boolean;
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Provider that controls how descendant Motion primitives respond to
|
|
68
|
+
* reduced-motion preferences. Wrap the root of your app once with the
|
|
69
|
+
* default (`reducedMotion="user"`) to respect the OS accessibility setting,
|
|
70
|
+
* or scope a subtree with `'always'` / `'never'` for specific use cases.
|
|
71
|
+
*/
|
|
72
|
+
declare function MotionConfig({ reducedMotion, children, }: {
|
|
73
|
+
reducedMotion?: ReducedMotion;
|
|
74
|
+
children: ReactNode;
|
|
75
|
+
}): react.JSX.Element;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Wrap a list of children with mount / unmount transitions. When a child is
|
|
79
|
+
* removed from the incoming list it stays in the snapshot until its exit
|
|
80
|
+
* animation completes; descendants consume the per-child `<PresenceContext>`
|
|
81
|
+
* to coordinate.
|
|
82
|
+
*
|
|
83
|
+
* Children must be `<Motion.*>` primitives (or any component that consumes
|
|
84
|
+
* `usePresence()` and calls `safeToRemove`). Plain elements without that
|
|
85
|
+
* contract will linger in the snapshot once removed; document that and pick
|
|
86
|
+
* the right primitive.
|
|
87
|
+
*
|
|
88
|
+
* Children also need explicit `key`s so removal is detectable across
|
|
89
|
+
* renders. Without a key, React falls back to positional identity and
|
|
90
|
+
* removal looks like a prop change — Presence has nothing to mark exiting.
|
|
91
|
+
*/
|
|
92
|
+
declare function Presence({ children }: {
|
|
93
|
+
children: ReactNode;
|
|
94
|
+
}): react.JSX.Element;
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Per-child contract between `<Presence>` and its descendant Motion
|
|
98
|
+
* primitives. `<Presence>` provides a fresh value to each rendered child;
|
|
99
|
+
* Motion primitives consume it to gate exit animations.
|
|
100
|
+
*
|
|
101
|
+
* - `isPresent`: `true` while the child is in the incoming children list.
|
|
102
|
+
* Flips to `false` when the parent removes it; the child remains rendered
|
|
103
|
+
* until `safeToRemove` is called.
|
|
104
|
+
* - `safeToRemove`: callback the child invokes when its exit animation has
|
|
105
|
+
* settled. `<Presence>` then drops the snapshot entry and unmounts.
|
|
106
|
+
*/
|
|
107
|
+
interface PresenceContextValue {
|
|
108
|
+
isPresent: boolean;
|
|
109
|
+
safeToRemove: () => void;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Read the surrounding `<Presence>` contract from a child component. Returns
|
|
113
|
+
* `null` when there is no `<Presence>` ancestor — useful for components that
|
|
114
|
+
* want to support both standalone and Presence-wrapped use without branching.
|
|
115
|
+
*/
|
|
116
|
+
declare function usePresence(): PresenceContextValue | null;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* UI-thread callback Reanimated invokes when an animation settles. Must be a
|
|
120
|
+
* worklet — callers either author one with `'worklet'` or build one via
|
|
121
|
+
* `runOnJS(...)` to bridge to JS-thread code.
|
|
122
|
+
*/
|
|
123
|
+
type AnimationCallback = (finished?: boolean, current?: number | string) => void;
|
|
124
|
+
/**
|
|
125
|
+
* Per-step callback factory. Resolvers call this with the step's phase and
|
|
126
|
+
* sequence index (or `undefined` for non-sequence animations) and attach the
|
|
127
|
+
* resulting callback to the underlying `withSpring` / `withTiming` /
|
|
128
|
+
* `withDecay` call.
|
|
129
|
+
*/
|
|
130
|
+
type CallbackFactory = (phase: 'step' | 'animation', step: number | undefined) => AnimationCallback | undefined;
|
|
131
|
+
/**
|
|
132
|
+
* Build a Reanimated animation for a single property. Runs on the JS thread
|
|
133
|
+
* once per change and produces a baked `withSpring` / `withTiming` /
|
|
134
|
+
* `withDecay` (optionally wrapped in `withDelay` / `withRepeat`) call. The
|
|
135
|
+
* worklet body only consumes the result.
|
|
136
|
+
*
|
|
137
|
+
* `callback`, when provided, fires once when the underlying single-shot
|
|
138
|
+
* animation settles. Repeat-wrapped animations forward the callback to
|
|
139
|
+
* `withRepeat`, so it fires once per iteration as Reanimated does.
|
|
140
|
+
*/
|
|
141
|
+
declare function resolveTransition(config: TransitionConfig | undefined, toValue: number | string, callback?: AnimationCallback): unknown;
|
|
142
|
+
/**
|
|
143
|
+
* Resolve a per-property `animate` value into a Reanimated animation.
|
|
144
|
+
*
|
|
145
|
+
* Handles the three shapes of `AnimatableValue`:
|
|
146
|
+
* 1. plain value → single `resolveTransition` call
|
|
147
|
+
* 2. `{ to, ...over }` → single step with the override merged into `base`
|
|
148
|
+
* 3. array of either → `withSequence` of resolved steps, with the
|
|
149
|
+
* top-level `repeat` applied at the **sequence level** (not per step).
|
|
150
|
+
* Per-step `repeat` overrides remain step-local.
|
|
151
|
+
*/
|
|
152
|
+
declare function resolveAnimatableValue<V extends number | string>(value: AnimatableValue<V>, base: TransitionConfig | undefined, factory?: CallbackFactory): unknown;
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Reanimated 3.9+ validates that easing functions used in nested-transition
|
|
156
|
+
* contexts (variants, sequences, per-property maps) are worklets, and crashes
|
|
157
|
+
* with `[Reanimated] The easing function is not a worklet` otherwise. The
|
|
158
|
+
* library accepts plain functions on the public surface; this helper wraps
|
|
159
|
+
* them so consumers don't have to think about the worklet boundary.
|
|
160
|
+
*
|
|
161
|
+
* If the input is already a worklet (has been processed by the worklets babel
|
|
162
|
+
* plugin), it's returned as-is. Otherwise it's wrapped in a function whose
|
|
163
|
+
* body declares the `'worklet'` directive — when our source is processed by
|
|
164
|
+
* the consumer's worklets babel plugin (the default Expo/RN setup), the
|
|
165
|
+
* wrapper becomes a real worklet that captures the user fn via closure.
|
|
166
|
+
*
|
|
167
|
+
* The user fn must be pure: no JS-thread captured refs, no shared mutable
|
|
168
|
+
* state, no calls to non-worklet APIs.
|
|
169
|
+
*/
|
|
170
|
+
declare function ensureWorkletEasing(easing: ((t: number) => number) | undefined): ((t: number) => number) | undefined;
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Build a controller for a variants map. The controller is the imperative
|
|
174
|
+
* escape hatch — pass it to a Motion primitive via `controller={...}` and
|
|
175
|
+
* call `controller.transitionTo('open')` from event handlers, async chains,
|
|
176
|
+
* etc. The hook name mirrors the prop name (`variants`) so the relationship
|
|
177
|
+
* is obvious.
|
|
178
|
+
*
|
|
179
|
+
* The controller is identity-stable across renders. State changes are
|
|
180
|
+
* delivered to subscribers via `subscribe` — Motion primitives subscribe
|
|
181
|
+
* internally and re-resolve `animate` on each transition.
|
|
182
|
+
*/
|
|
183
|
+
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
184
|
+
|
|
185
|
+
export { AnimatableValue, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, TransitionConfig, VariantController, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useMotionConfig, usePresence, useShouldReduceMotion, useVariants };
|