@rootnative/inertia 0.0.6 → 0.0.7
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 +34 -1
- package/README.md +7 -1
- package/dist/{chunk-C3EDC5ZW.mjs → chunk-52QSN2VQ.mjs} +1 -1
- package/dist/{chunk-767UKZXG.js → chunk-6V7MOBXO.js} +12 -0
- package/dist/{chunk-2ICQLWH2.mjs → chunk-HPJMIBBK.mjs} +12 -0
- package/dist/{chunk-PFPO7DX2.mjs → chunk-KBFN4TRO.mjs} +1 -1
- package/dist/chunk-NPJ46457.js +8 -0
- package/dist/chunk-QJYFTTM2.js +28 -0
- package/dist/{chunk-X7B5WR5A.js → chunk-QYR66E2G.js} +2 -2
- package/dist/{chunk-CMHVF6F4.mjs → chunk-RUIOM2YZ.mjs} +1 -1
- package/dist/{chunk-BAAQI37F.mjs → chunk-VSK2E35J.mjs} +1 -1
- package/dist/{chunk-5MGWHOSV.js → chunk-WGCF3WQG.js} +2 -2
- package/dist/{chunk-F7LJX56B.mjs → chunk-WMLS4TMX.mjs} +1 -1
- package/dist/chunk-YUTS6JRU.js +8 -0
- package/dist/chunk-ZOBOKLAS.mjs +22 -0
- package/dist/chunk-ZSOCRHU3.js +8 -0
- package/dist/gestureLayer/index.d.mts +2 -2
- package/dist/gestureLayer/index.d.ts +2 -2
- package/dist/index.d.mts +17 -9
- package/dist/index.d.ts +17 -9
- package/dist/index.js +29 -23
- package/dist/index.mjs +16 -13
- package/dist/motion/FlatList.d.mts +53 -0
- package/dist/motion/FlatList.d.ts +53 -0
- package/dist/motion/FlatList.js +13 -0
- package/dist/motion/FlatList.mjs +4 -0
- package/dist/motion/Image.d.mts +1 -1
- package/dist/motion/Image.d.ts +1 -1
- package/dist/motion/Image.js +3 -3
- package/dist/motion/Image.mjs +2 -2
- package/dist/motion/Pressable.d.mts +1 -1
- package/dist/motion/Pressable.d.ts +1 -1
- package/dist/motion/Pressable.js +3 -3
- package/dist/motion/Pressable.mjs +2 -2
- package/dist/motion/ScrollView.d.mts +1 -1
- package/dist/motion/ScrollView.d.ts +1 -1
- package/dist/motion/ScrollView.js +3 -3
- package/dist/motion/ScrollView.mjs +2 -2
- package/dist/motion/Text.d.mts +1 -1
- package/dist/motion/Text.d.ts +1 -1
- package/dist/motion/Text.js +3 -3
- package/dist/motion/Text.mjs +2 -2
- package/dist/motion/View.d.mts +1 -1
- package/dist/motion/View.d.ts +1 -1
- package/dist/motion/View.js +3 -3
- package/dist/motion/View.mjs +2 -2
- package/dist/touch/index.d.mts +1 -1
- package/dist/touch/index.d.ts +1 -1
- package/dist/{types-BQgLJeQG.d.mts → types-DyJpG64F.d.mts} +1 -1
- package/dist/{types-BQgLJeQG.d.ts → types-DyJpG64F.d.ts} +1 -1
- package/dist/{useGesture-DfaTx-3t.d.mts → useGesture-CnZQnYHH.d.mts} +1 -1
- package/dist/{useGesture-B0_CzOUz.d.ts → useGesture-DbH46EBp.d.ts} +1 -1
- package/jest-setup.js +7 -1
- package/llms.txt +7 -3
- package/package.json +8 -1
- package/src/index.ts +1 -0
- package/src/motion/FlatList.tsx +77 -0
- package/src/motion/createMotionComponent.tsx +23 -0
- package/src/motion/index.ts +3 -0
- package/src/values/useScroll.ts +9 -5
- package/dist/chunk-FWWVHLXB.js +0 -8
- package/dist/chunk-K5SI6VXS.js +0 -8
- package/dist/chunk-STARIT6W.js +0 -8
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,38 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
|
|
|
4
4
|
|
|
5
5
|
## [Unreleased]
|
|
6
6
|
|
|
7
|
+
## [0.0.7] - 2026-08-14
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
|
|
11
|
+
- **`Motion.FlatList` — a virtualized animated scroller.** Reachable from the `Motion` namespace, as the named export `MotionFlatList`, and through the new `@rootnative/inertia/flat-list` subpath.
|
|
12
|
+
|
|
13
|
+
It closes a gap that forced a real architectural compromise on consumers: `useScroll`'s `onScroll` is a worklet handler, which only functions on a Reanimated animated component, and until now the only animated scroller was `Motion.ScrollView` — which mounts every row. A long list could virtualize (a plain `FlatList`, no animation) or animate from scroll position (`Motion.ScrollView`, every row mounted), not both. Nothing about `useScroll` was ever specific to `ScrollView`; the primitive was simply missing.
|
|
14
|
+
|
|
15
|
+
Animation props apply to the scroll **container**, matching `Motion.ScrollView`. Rows animate via a `Motion.*` primitive inside `renderItem`, which is what makes scroll-driven row effects work. The `layout` prop animates the list frame; Reanimated's `itemLayoutAnimation` is forwarded untouched for per-row layout animation.
|
|
16
|
+
|
|
17
|
+
Typing keeps both inference paths that a naive wrapper loses. `createMotionComponent<C>` returns a non-generic component, so `data` / `renderItem` would collapse to `any` — the item type is restored with a generic call signature, the same fix Reanimated applies to its own `Animated.FlatList`. The variants map is a **second** generic on that one signature, so `animate="typo"` against a `variants` prop stays a compile error here exactly as on every other primitive; declaring only the item generic would have silently dropped that narrowing on this primitive alone.
|
|
18
|
+
|
|
19
|
+
Built on Reanimated's `Animated.FlatList` rather than RN's `FlatList`, which supplies the `CellRendererComponent` injection behind `itemLayoutAnimation` and defaults `scrollEventThrottle` to 1 — so a `useScroll` handler reports every frame with no extra prop.
|
|
20
|
+
|
|
21
|
+
**Bundle cost: 9.10 kB for the new subpath, +0.04 kB on the root entry**, and nothing on existing subpaths. The cheapest primitive added so far: it is almost entirely the shared factory, adding no parser, no interpolation, and no worklet branch.
|
|
22
|
+
|
|
23
|
+
### Fixed
|
|
24
|
+
|
|
25
|
+
- **`gesture={{ pressed: … }}` now responds to a mouse on web.** On any primitive that isn't a `Pressable` — a plain `Motion.View`, `Motion.Text`, `Motion.Image` — the pressed layer never engaged under a desktop click. It has been inert on web since the `gesture` prop shipped in `0.0.1`.
|
|
26
|
+
|
|
27
|
+
The cause is which events the layer was wired to. `pressed` was driven by `onTouchStart` / `onTouchEnd` plus `onPressIn` / `onPressOut`. The press pair only exists on `Pressable`-style hosts, and react-native-web forwards `onTouchStart` to the DOM as a real `touchstart` listener — which a mouse never fires. So `Motion.Pressable` worked (it has the press path) while every other primitive had no live path at all for a pointer that isn't a finger.
|
|
28
|
+
|
|
29
|
+
The layer now also listens on `onPointerDown` / `onPointerUp` / `onPointerCancel`, which react-native-web forwards and which cover mouse, pen, and touch alike. `pressed` means "any pointer" on every platform. `onPointerCancel` is included so a browser-initiated takeover (a scroll or drag beginning mid-press) releases the layer instead of leaving it stuck on.
|
|
30
|
+
|
|
31
|
+
A web touch emits both `touchstart` and `pointerdown`; both set the same flag to the same value, so the overlap is idempotent rather than a double-toggle. React Native has no pointer props, so the added handlers are inert on iOS and Android. `hovered`, `focused`, and `focusVisible` were never affected — their events are forwarded on every primitive.
|
|
32
|
+
|
|
33
|
+
**Bundle cost: +0.06 kB (+0.7%) per primitive subpath**, 9.05 → 9.11 kB brotlied, +0.04 kB on the root entry. No `size-limit` cap moved. Handlers are still mounted only when `pressed` is declared, so the gesture-less path is unchanged.
|
|
34
|
+
|
|
35
|
+
### Internal
|
|
36
|
+
|
|
37
|
+
- **`pressed-modalities.test.tsx` asserts each input modality separately.** Every pre-existing gesture test fires `pressIn` — the one path that already worked on every platform — which is why a six-release gap in the touch and pointer paths went unseen. The new file drives touch, pointer, and press independently, plus the cancel path, the both-events-at-once overlap, composition with a consumer's own pointer handlers, and the guarantee that no pointer handler is mounted when `pressed` isn't declared.
|
|
38
|
+
|
|
7
39
|
## [0.0.6] - 2026-08-08
|
|
8
40
|
|
|
9
41
|
**Defect release: two animations that never ran.** Both trace to one assumption about what Reanimated accepts as an animatable value, and both were hidden by the same thing — `type: 'timing'` snaps to its target when the duration elapses, so a total interpolation failure still produced the right end state. `animate={{ boxShadow }}` was inert under the default spring; every colour key was inert when it rested at its default, which is the far more common path. Neither is caught by a mocked test suite, so this release also adds a test file that runs Reanimated's real drivers.
|
|
@@ -225,7 +257,8 @@ Initial alpha publish. The full initial surface is in place; APIs are still subj
|
|
|
225
257
|
- SVG path morphing, gradient interpolation, and shared-element transitions across screens are out of scope until `0.2.x` / `1.x` per the roadmap.
|
|
226
258
|
- `react-native-gesture-handler` integration (drag, pan, swipe sub-states) lands in `0.2` via the optional `@rootnative/inertia-gestures` adapter.
|
|
227
259
|
|
|
228
|
-
[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.
|
|
260
|
+
[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.7...HEAD
|
|
261
|
+
[0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7
|
|
229
262
|
[0.0.6]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.6
|
|
230
263
|
[0.0.5]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.5
|
|
231
264
|
[0.0.4]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.4
|
package/README.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Absolute URL, not a relative path: this README is the npm package page, and
|
|
3
|
+
npm does not resolve repository-relative image paths.
|
|
4
|
+
-->
|
|
5
|
+
<img src="https://raw.githubusercontent.com/rootnative/inertia/main/assets/brand/inertia-mark.png" alt="" width="88" height="88" />
|
|
6
|
+
|
|
1
7
|
# @rootnative/inertia
|
|
2
8
|
|
|
3
9
|
[](https://www.npmjs.com/package/@rootnative/inertia)
|
|
@@ -6,7 +12,7 @@
|
|
|
6
12
|
|
|
7
13
|
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
14
|
|
|
9
|
-
> **Status:** `0.0.
|
|
15
|
+
> **Status:** `0.0.7` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
|
|
10
16
|
|
|
11
17
|
## Install
|
|
12
18
|
|
|
@@ -1652,6 +1652,15 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1652
1652
|
);
|
|
1653
1653
|
handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
|
|
1654
1654
|
handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
|
|
1655
|
+
handlers.onPointerDown = compose(
|
|
1656
|
+
rest.onPointerDown,
|
|
1657
|
+
() => setPressed(true)
|
|
1658
|
+
);
|
|
1659
|
+
handlers.onPointerUp = compose(rest.onPointerUp, () => setPressed(false));
|
|
1660
|
+
handlers.onPointerCancel = compose(
|
|
1661
|
+
rest.onPointerCancel,
|
|
1662
|
+
() => setPressed(false)
|
|
1663
|
+
);
|
|
1655
1664
|
}
|
|
1656
1665
|
if (gesture.focused || gesture.focusVisible) {
|
|
1657
1666
|
handlers.onFocus = compose(rest.onFocus, () => {
|
|
@@ -1681,6 +1690,9 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1681
1690
|
rest.onTouchCancel,
|
|
1682
1691
|
rest.onPressIn,
|
|
1683
1692
|
rest.onPressOut,
|
|
1693
|
+
rest.onPointerDown,
|
|
1694
|
+
rest.onPointerUp,
|
|
1695
|
+
rest.onPointerCancel,
|
|
1684
1696
|
rest.onFocus,
|
|
1685
1697
|
rest.onBlur,
|
|
1686
1698
|
rest.onMouseEnter,
|
|
@@ -1646,6 +1646,15 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1646
1646
|
);
|
|
1647
1647
|
handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
|
|
1648
1648
|
handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
|
|
1649
|
+
handlers.onPointerDown = compose(
|
|
1650
|
+
rest.onPointerDown,
|
|
1651
|
+
() => setPressed(true)
|
|
1652
|
+
);
|
|
1653
|
+
handlers.onPointerUp = compose(rest.onPointerUp, () => setPressed(false));
|
|
1654
|
+
handlers.onPointerCancel = compose(
|
|
1655
|
+
rest.onPointerCancel,
|
|
1656
|
+
() => setPressed(false)
|
|
1657
|
+
);
|
|
1649
1658
|
}
|
|
1650
1659
|
if (gesture.focused || gesture.focusVisible) {
|
|
1651
1660
|
handlers.onFocus = compose(rest.onFocus, () => {
|
|
@@ -1675,6 +1684,9 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1675
1684
|
rest.onTouchCancel,
|
|
1676
1685
|
rest.onPressIn,
|
|
1677
1686
|
rest.onPressOut,
|
|
1687
|
+
rest.onPointerDown,
|
|
1688
|
+
rest.onPointerUp,
|
|
1689
|
+
rest.onPointerCancel,
|
|
1678
1690
|
rest.onFocus,
|
|
1679
1691
|
rest.onBlur,
|
|
1680
1692
|
rest.onMouseEnter,
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
|
|
4
|
+
var Animated = require('react-native-reanimated');
|
|
5
|
+
|
|
6
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var Animated__default = /*#__PURE__*/_interopDefault(Animated);
|
|
9
|
+
|
|
10
|
+
var MotionFlatList = chunk6V7MOBXO_js.createMotionComponent(
|
|
11
|
+
Animated__default.default.FlatList
|
|
12
|
+
// `createMotionComponent<C>` returns a non-generic `MotionComponent<C>`, so
|
|
13
|
+
// `data` / `renderItem` would collapse to `any` and lose `ItemT` inference.
|
|
14
|
+
// Restore it with the same call-signature cast Reanimated itself uses for
|
|
15
|
+
// this exact problem (see its `ReanimatedFlatList` export, and the
|
|
16
|
+
// `@ts-expect-error` above `AnimatedFlatList` explaining that
|
|
17
|
+
// `createAnimatedComponent` cannot create generic components).
|
|
18
|
+
//
|
|
19
|
+
// **Both** generics live on the one call signature, and that is deliberate:
|
|
20
|
+
// `ItemT` infers from `data` while `V` infers from `variants`, independently.
|
|
21
|
+
// Declaring only `ItemT` (the obvious first cut) silently drops the
|
|
22
|
+
// variant-key narrowing that `MotionComponent` provides on every other
|
|
23
|
+
// primitive — `animate="typo"` would stop being a compile error here and
|
|
24
|
+
// nowhere else. Both directions are pinned in
|
|
25
|
+
// `__type-tests__/flat-list.test-d.tsx`.
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
exports.MotionFlatList = MotionFlatList;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
5
|
|
|
6
|
-
var MotionScrollView =
|
|
6
|
+
var MotionScrollView = chunk6V7MOBXO_js.createMotionComponent(reactNative.ScrollView);
|
|
7
7
|
|
|
8
8
|
exports.MotionScrollView = MotionScrollView;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
5
|
|
|
6
|
-
var MotionPressable =
|
|
6
|
+
var MotionPressable = chunk6V7MOBXO_js.createMotionComponent(reactNative.Pressable);
|
|
7
7
|
|
|
8
8
|
exports.MotionPressable = MotionPressable;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createMotionComponent } from './chunk-HPJMIBBK.mjs';
|
|
2
|
+
import Animated from 'react-native-reanimated';
|
|
3
|
+
|
|
4
|
+
var MotionFlatList = createMotionComponent(
|
|
5
|
+
Animated.FlatList
|
|
6
|
+
// `createMotionComponent<C>` returns a non-generic `MotionComponent<C>`, so
|
|
7
|
+
// `data` / `renderItem` would collapse to `any` and lose `ItemT` inference.
|
|
8
|
+
// Restore it with the same call-signature cast Reanimated itself uses for
|
|
9
|
+
// this exact problem (see its `ReanimatedFlatList` export, and the
|
|
10
|
+
// `@ts-expect-error` above `AnimatedFlatList` explaining that
|
|
11
|
+
// `createAnimatedComponent` cannot create generic components).
|
|
12
|
+
//
|
|
13
|
+
// **Both** generics live on the one call signature, and that is deliberate:
|
|
14
|
+
// `ItemT` infers from `data` while `V` infers from `variants`, independently.
|
|
15
|
+
// Declaring only `ItemT` (the obvious first cut) silently drops the
|
|
16
|
+
// variant-key narrowing that `MotionComponent` provides on every other
|
|
17
|
+
// primitive — `animate="typo"` would stop being a compile error here and
|
|
18
|
+
// nowhere else. Both directions are pinned in
|
|
19
|
+
// `__type-tests__/flat-list.test-d.tsx`.
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
export { MotionFlatList };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SharedValue, AnimatedStyle } from 'react-native-reanimated';
|
|
2
|
-
import { U as UseGestureHandlers } from '../useGesture-
|
|
3
|
-
import {
|
|
2
|
+
import { U as UseGestureHandlers } from '../useGesture-CnZQnYHH.mjs';
|
|
3
|
+
import { b as TransitionInput, G as GestureLayerTransitions } from '../types-DyJpG64F.mjs';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-native';
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SharedValue, AnimatedStyle } from 'react-native-reanimated';
|
|
2
|
-
import { U as UseGestureHandlers } from '../useGesture-
|
|
3
|
-
import {
|
|
2
|
+
import { U as UseGestureHandlers } from '../useGesture-DbH46EBp.js';
|
|
3
|
+
import { b as TransitionInput, G as GestureLayerTransitions } from '../types-DyJpG64F.js';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-native';
|
|
6
6
|
|
package/dist/index.d.mts
CHANGED
|
@@ -2,11 +2,12 @@ import * as react from 'react';
|
|
|
2
2
|
import { ComponentType, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
4
|
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
5
|
-
import { M as MotionComponent, N as NamedTransitions,
|
|
6
|
-
export {
|
|
5
|
+
import { M as MotionComponent, V as VariantsMap, a as MotionProps, N as NamedTransitions, b as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, c as TransitionName, d as VariantController } from './types-DyJpG64F.mjs';
|
|
6
|
+
export { e as AnimateStyle, f as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, g as EasingFunction, h as EasingFunctionFactory, i as GestureSubStates, j as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, k as RepeatConfig, l as SequenceStep, m as TimingTransition, n as Transition } from './types-DyJpG64F.mjs';
|
|
7
7
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
8
8
|
export { SharedValue } from 'react-native-reanimated';
|
|
9
|
-
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-
|
|
9
|
+
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-CnZQnYHH.mjs';
|
|
10
|
+
export { MotionFlatList } from './motion/FlatList.mjs';
|
|
10
11
|
export { MotionImage } from './motion/Image.mjs';
|
|
11
12
|
export { MotionPressable } from './motion/Pressable.mjs';
|
|
12
13
|
export { MotionScrollView } from './motion/ScrollView.mjs';
|
|
@@ -36,6 +37,9 @@ declare const Motion: {
|
|
|
36
37
|
readonly Image: MotionComponent<typeof react_native.Image>;
|
|
37
38
|
readonly Pressable: MotionComponent<react.ForwardRefExoticComponent<react_native.PressableProps & react.RefAttributes<react_native.View>>>;
|
|
38
39
|
readonly ScrollView: MotionComponent<typeof react_native.ScrollView>;
|
|
40
|
+
readonly FlatList: <ItemT = any, V extends VariantsMap<react_native.FlatListProps<ItemT>> = VariantsMap<react_native.FlatListProps<ItemT>>>(props: react_native.FlatListProps<ItemT> & MotionProps<react_native.FlatListProps<ItemT>, V> & {
|
|
41
|
+
ref?: React.Ref<react_native.FlatList<ItemT>>;
|
|
42
|
+
}) => React.ReactElement;
|
|
39
43
|
};
|
|
40
44
|
|
|
41
45
|
/**
|
|
@@ -731,10 +735,10 @@ interface UseScrollResult {
|
|
|
731
735
|
/** Vertical scroll offset in points. */
|
|
732
736
|
scrollY: SharedValue<number>;
|
|
733
737
|
/**
|
|
734
|
-
* Handler to pass to
|
|
735
|
-
*
|
|
736
|
-
* as a worklet — but the type narrows to the same
|
|
737
|
-
* `onScroll` prop expects so it composes cleanly.
|
|
738
|
+
* Handler to pass to the `onScroll` prop of `Motion.ScrollView` or
|
|
739
|
+
* `Motion.FlatList` (or any other Reanimated animated scroller). The handler
|
|
740
|
+
* is opaque to JS — it runs as a worklet — but the type narrows to the same
|
|
741
|
+
* shape RN's native `onScroll` prop expects so it composes cleanly.
|
|
738
742
|
*/
|
|
739
743
|
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
740
744
|
}
|
|
@@ -766,9 +770,13 @@ interface UseScrollResult {
|
|
|
766
770
|
* read from any worklet (`useAnimatedStyle`, `useDerivedValue`,
|
|
767
771
|
* `useTransform`) without a JS-thread bounce.
|
|
768
772
|
*
|
|
769
|
-
* Remember to set `scrollEventThrottle={16}` on
|
|
773
|
+
* Remember to set `scrollEventThrottle={16}` on a `Motion.ScrollView` for 60Hz
|
|
770
774
|
* updates — RN's default is to dispatch on every event, which on iOS still
|
|
771
775
|
* means one per frame, but Android benefits from the explicit cap.
|
|
776
|
+
*
|
|
777
|
+
* `Motion.FlatList` needs no such setting — it defaults `scrollEventThrottle`
|
|
778
|
+
* to 1 for you. Prefer it over `Motion.ScrollView` for long or unbounded lists:
|
|
779
|
+
* it virtualizes, and both accept this handler.
|
|
772
780
|
*/
|
|
773
781
|
declare function useScroll(): UseScrollResult;
|
|
774
782
|
|
|
@@ -897,4 +905,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
|
|
|
897
905
|
*/
|
|
898
906
|
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
899
907
|
|
|
900
|
-
export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
|
908
|
+
export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, MotionProps, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, VariantsMap, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,12 @@ import * as react from 'react';
|
|
|
2
2
|
import { ComponentType, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
4
|
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
5
|
-
import { M as MotionComponent, N as NamedTransitions,
|
|
6
|
-
export {
|
|
5
|
+
import { M as MotionComponent, V as VariantsMap, a as MotionProps, N as NamedTransitions, b as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, c as TransitionName, d as VariantController } from './types-DyJpG64F.js';
|
|
6
|
+
export { e as AnimateStyle, f as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, g as EasingFunction, h as EasingFunctionFactory, i as GestureSubStates, j as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, k as RepeatConfig, l as SequenceStep, m as TimingTransition, n as Transition } from './types-DyJpG64F.js';
|
|
7
7
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
8
8
|
export { SharedValue } from 'react-native-reanimated';
|
|
9
|
-
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-
|
|
9
|
+
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-DbH46EBp.js';
|
|
10
|
+
export { MotionFlatList } from './motion/FlatList.js';
|
|
10
11
|
export { MotionImage } from './motion/Image.js';
|
|
11
12
|
export { MotionPressable } from './motion/Pressable.js';
|
|
12
13
|
export { MotionScrollView } from './motion/ScrollView.js';
|
|
@@ -36,6 +37,9 @@ declare const Motion: {
|
|
|
36
37
|
readonly Image: MotionComponent<typeof react_native.Image>;
|
|
37
38
|
readonly Pressable: MotionComponent<react.ForwardRefExoticComponent<react_native.PressableProps & react.RefAttributes<react_native.View>>>;
|
|
38
39
|
readonly ScrollView: MotionComponent<typeof react_native.ScrollView>;
|
|
40
|
+
readonly FlatList: <ItemT = any, V extends VariantsMap<react_native.FlatListProps<ItemT>> = VariantsMap<react_native.FlatListProps<ItemT>>>(props: react_native.FlatListProps<ItemT> & MotionProps<react_native.FlatListProps<ItemT>, V> & {
|
|
41
|
+
ref?: React.Ref<react_native.FlatList<ItemT>>;
|
|
42
|
+
}) => React.ReactElement;
|
|
39
43
|
};
|
|
40
44
|
|
|
41
45
|
/**
|
|
@@ -731,10 +735,10 @@ interface UseScrollResult {
|
|
|
731
735
|
/** Vertical scroll offset in points. */
|
|
732
736
|
scrollY: SharedValue<number>;
|
|
733
737
|
/**
|
|
734
|
-
* Handler to pass to
|
|
735
|
-
*
|
|
736
|
-
* as a worklet — but the type narrows to the same
|
|
737
|
-
* `onScroll` prop expects so it composes cleanly.
|
|
738
|
+
* Handler to pass to the `onScroll` prop of `Motion.ScrollView` or
|
|
739
|
+
* `Motion.FlatList` (or any other Reanimated animated scroller). The handler
|
|
740
|
+
* is opaque to JS — it runs as a worklet — but the type narrows to the same
|
|
741
|
+
* shape RN's native `onScroll` prop expects so it composes cleanly.
|
|
738
742
|
*/
|
|
739
743
|
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
740
744
|
}
|
|
@@ -766,9 +770,13 @@ interface UseScrollResult {
|
|
|
766
770
|
* read from any worklet (`useAnimatedStyle`, `useDerivedValue`,
|
|
767
771
|
* `useTransform`) without a JS-thread bounce.
|
|
768
772
|
*
|
|
769
|
-
* Remember to set `scrollEventThrottle={16}` on
|
|
773
|
+
* Remember to set `scrollEventThrottle={16}` on a `Motion.ScrollView` for 60Hz
|
|
770
774
|
* updates — RN's default is to dispatch on every event, which on iOS still
|
|
771
775
|
* means one per frame, but Android benefits from the explicit cap.
|
|
776
|
+
*
|
|
777
|
+
* `Motion.FlatList` needs no such setting — it defaults `scrollEventThrottle`
|
|
778
|
+
* to 1 for you. Prefer it over `Motion.ScrollView` for long or unbounded lists:
|
|
779
|
+
* it virtualizes, and both accept this handler.
|
|
772
780
|
*/
|
|
773
781
|
declare function useScroll(): UseScrollResult;
|
|
774
782
|
|
|
@@ -897,4 +905,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
|
|
|
897
905
|
*/
|
|
898
906
|
declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
|
|
899
907
|
|
|
900
|
-
export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
|
908
|
+
export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, MotionProps, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, VariantsMap, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var chunk4NAMD62I_js = require('./chunk-4NAMD62I.js');
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
4
|
+
var chunkNPJ46457_js = require('./chunk-NPJ46457.js');
|
|
5
|
+
var chunkZSOCRHU3_js = require('./chunk-ZSOCRHU3.js');
|
|
6
|
+
var chunkYUTS6JRU_js = require('./chunk-YUTS6JRU.js');
|
|
7
|
+
var chunkWGCF3WQG_js = require('./chunk-WGCF3WQG.js');
|
|
8
|
+
var chunkQYR66E2G_js = require('./chunk-QYR66E2G.js');
|
|
9
|
+
var chunkQJYFTTM2_js = require('./chunk-QJYFTTM2.js');
|
|
10
|
+
var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
|
|
10
11
|
var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
|
|
11
12
|
var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
|
|
12
13
|
var react = require('react');
|
|
@@ -15,11 +16,12 @@ var reactNativeWorklets = require('react-native-worklets');
|
|
|
15
16
|
|
|
16
17
|
// src/motion/index.ts
|
|
17
18
|
var Motion = {
|
|
18
|
-
View:
|
|
19
|
-
Text:
|
|
20
|
-
Image:
|
|
21
|
-
Pressable:
|
|
22
|
-
ScrollView:
|
|
19
|
+
View: chunkNPJ46457_js.MotionView,
|
|
20
|
+
Text: chunkZSOCRHU3_js.MotionText,
|
|
21
|
+
Image: chunkYUTS6JRU_js.MotionImage,
|
|
22
|
+
Pressable: chunkWGCF3WQG_js.MotionPressable,
|
|
23
|
+
ScrollView: chunkQYR66E2G_js.MotionScrollView,
|
|
24
|
+
FlatList: chunkQJYFTTM2_js.MotionFlatList
|
|
23
25
|
};
|
|
24
26
|
function useAnimation(target, transition) {
|
|
25
27
|
const output = reactNativeReanimated.useSharedValue(target);
|
|
@@ -362,9 +364,9 @@ function useShadow({
|
|
|
362
364
|
const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
|
|
363
365
|
const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
|
|
364
366
|
const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
|
|
365
|
-
const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ?
|
|
366
|
-
|
|
367
|
-
|
|
367
|
+
const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ? chunk6V7MOBXO_js.pairBoxShadowLayers(
|
|
368
|
+
chunk6V7MOBXO_js.resolveBoxShadowInput(from.boxShadow),
|
|
369
|
+
chunk6V7MOBXO_js.resolveBoxShadowInput(to.boxShadow)
|
|
368
370
|
) : [];
|
|
369
371
|
const opacityFrom = from.shadowOpacity ?? 0;
|
|
370
372
|
const opacityTo = to.shadowOpacity ?? 0;
|
|
@@ -467,39 +469,43 @@ Object.defineProperty(exports, "useGesture", {
|
|
|
467
469
|
});
|
|
468
470
|
Object.defineProperty(exports, "MotionView", {
|
|
469
471
|
enumerable: true,
|
|
470
|
-
get: function () { return
|
|
472
|
+
get: function () { return chunkNPJ46457_js.MotionView; }
|
|
471
473
|
});
|
|
472
474
|
Object.defineProperty(exports, "MotionText", {
|
|
473
475
|
enumerable: true,
|
|
474
|
-
get: function () { return
|
|
476
|
+
get: function () { return chunkZSOCRHU3_js.MotionText; }
|
|
475
477
|
});
|
|
476
478
|
Object.defineProperty(exports, "MotionImage", {
|
|
477
479
|
enumerable: true,
|
|
478
|
-
get: function () { return
|
|
480
|
+
get: function () { return chunkYUTS6JRU_js.MotionImage; }
|
|
479
481
|
});
|
|
480
482
|
Object.defineProperty(exports, "MotionPressable", {
|
|
481
483
|
enumerable: true,
|
|
482
|
-
get: function () { return
|
|
484
|
+
get: function () { return chunkWGCF3WQG_js.MotionPressable; }
|
|
483
485
|
});
|
|
484
486
|
Object.defineProperty(exports, "MotionScrollView", {
|
|
485
487
|
enumerable: true,
|
|
486
|
-
get: function () { return
|
|
488
|
+
get: function () { return chunkQYR66E2G_js.MotionScrollView; }
|
|
489
|
+
});
|
|
490
|
+
Object.defineProperty(exports, "MotionFlatList", {
|
|
491
|
+
enumerable: true,
|
|
492
|
+
get: function () { return chunkQJYFTTM2_js.MotionFlatList; }
|
|
487
493
|
});
|
|
488
494
|
Object.defineProperty(exports, "Presence", {
|
|
489
495
|
enumerable: true,
|
|
490
|
-
get: function () { return
|
|
496
|
+
get: function () { return chunk6V7MOBXO_js.Presence; }
|
|
491
497
|
});
|
|
492
498
|
Object.defineProperty(exports, "TRANSPARENT", {
|
|
493
499
|
enumerable: true,
|
|
494
|
-
get: function () { return
|
|
500
|
+
get: function () { return chunk6V7MOBXO_js.TRANSPARENT; }
|
|
495
501
|
});
|
|
496
502
|
Object.defineProperty(exports, "createMotionComponent", {
|
|
497
503
|
enumerable: true,
|
|
498
|
-
get: function () { return
|
|
504
|
+
get: function () { return chunk6V7MOBXO_js.createMotionComponent; }
|
|
499
505
|
});
|
|
500
506
|
Object.defineProperty(exports, "usePresence", {
|
|
501
507
|
enumerable: true,
|
|
502
|
-
get: function () { return
|
|
508
|
+
get: function () { return chunk6V7MOBXO_js.usePresence; }
|
|
503
509
|
});
|
|
504
510
|
Object.defineProperty(exports, "MotionConfig", {
|
|
505
511
|
enumerable: true,
|
package/dist/index.mjs
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
export { useGesture } from './chunk-OW5XTGVN.mjs';
|
|
2
|
-
import { MotionView } from './chunk-
|
|
3
|
-
export { MotionView } from './chunk-
|
|
4
|
-
import { MotionText } from './chunk-
|
|
5
|
-
export { MotionText } from './chunk-
|
|
6
|
-
import { MotionImage } from './chunk-
|
|
7
|
-
export { MotionImage } from './chunk-
|
|
8
|
-
import { MotionPressable } from './chunk-
|
|
9
|
-
export { MotionPressable } from './chunk-
|
|
10
|
-
import { MotionScrollView } from './chunk-
|
|
11
|
-
export { MotionScrollView } from './chunk-
|
|
12
|
-
import {
|
|
13
|
-
export {
|
|
2
|
+
import { MotionView } from './chunk-RUIOM2YZ.mjs';
|
|
3
|
+
export { MotionView } from './chunk-RUIOM2YZ.mjs';
|
|
4
|
+
import { MotionText } from './chunk-WMLS4TMX.mjs';
|
|
5
|
+
export { MotionText } from './chunk-WMLS4TMX.mjs';
|
|
6
|
+
import { MotionImage } from './chunk-KBFN4TRO.mjs';
|
|
7
|
+
export { MotionImage } from './chunk-KBFN4TRO.mjs';
|
|
8
|
+
import { MotionPressable } from './chunk-52QSN2VQ.mjs';
|
|
9
|
+
export { MotionPressable } from './chunk-52QSN2VQ.mjs';
|
|
10
|
+
import { MotionScrollView } from './chunk-VSK2E35J.mjs';
|
|
11
|
+
export { MotionScrollView } from './chunk-VSK2E35J.mjs';
|
|
12
|
+
import { MotionFlatList } from './chunk-ZOBOKLAS.mjs';
|
|
13
|
+
export { MotionFlatList } from './chunk-ZOBOKLAS.mjs';
|
|
14
|
+
import { pairBoxShadowLayers, resolveBoxShadowInput } from './chunk-HPJMIBBK.mjs';
|
|
15
|
+
export { Presence, TRANSPARENT, createMotionComponent, usePresence } from './chunk-HPJMIBBK.mjs';
|
|
14
16
|
import { useShouldReduceMotion, resolveNamedTransition, useNamedTransitions, lookupNamedTransition } from './chunk-Z3HCJ43H.mjs';
|
|
15
17
|
export { MotionConfig, resolveNamedTransition, useMotionConfig, useNamedTransitions, useShouldReduceMotion } from './chunk-Z3HCJ43H.mjs';
|
|
16
18
|
import { stableSig, resolveTransition, springToReanimated, warnNonWorkletOnce } from './chunk-REYL77RE.mjs';
|
|
@@ -25,7 +27,8 @@ var Motion = {
|
|
|
25
27
|
Text: MotionText,
|
|
26
28
|
Image: MotionImage,
|
|
27
29
|
Pressable: MotionPressable,
|
|
28
|
-
ScrollView: MotionScrollView
|
|
30
|
+
ScrollView: MotionScrollView,
|
|
31
|
+
FlatList: MotionFlatList
|
|
29
32
|
};
|
|
30
33
|
function useAnimation(target, transition) {
|
|
31
34
|
const output = useSharedValue(target);
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { FlatListProps, FlatList } from 'react-native';
|
|
2
|
+
import { V as VariantsMap, a as MotionProps } from '../types-DyJpG64F.mjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Animatable, virtualized `FlatList`.
|
|
7
|
+
*
|
|
8
|
+
* Built on Reanimated's `Animated.FlatList` rather than RN's `FlatList`. That
|
|
9
|
+
* wrapper supplies two things this primitive would otherwise have to
|
|
10
|
+
* re-implement: the `CellRendererComponent` injection that powers per-row
|
|
11
|
+
* `itemLayoutAnimation`, and a `scrollEventThrottle` default of 1.
|
|
12
|
+
*
|
|
13
|
+
* A note on that throttle default, because the reasoning is easy to get wrong
|
|
14
|
+
* from Reanimated's own source comment: it says RN defaults FlatList's
|
|
15
|
+
* `scrollEventThrottle` to 50, which **is stale**. On RN 0.81
|
|
16
|
+
* (`@react-native/virtualized-lists`, `VirtualizedList.js`) the default is
|
|
17
|
+
* `props.scrollEventThrottle ?? 0.0001` — effectively every frame. So the
|
|
18
|
+
* patch is belt-and-braces on current RN rather than the load-bearing reason
|
|
19
|
+
* to use the wrapper. It is still worth inheriting: it costs nothing, and it
|
|
20
|
+
* pins the behaviour if RN's default changes again. **Do not restate the "50"
|
|
21
|
+
* figure as fact** — verify against the installed RN before relying on it.
|
|
22
|
+
*
|
|
23
|
+
* This is the primitive that lets one list both virtualize and animate. The
|
|
24
|
+
* `useScroll()` handler works because `Motion.*` components are Reanimated
|
|
25
|
+
* animated components — the same mechanism `Motion.ScrollView` relies on, and
|
|
26
|
+
* nothing about it was ever specific to `ScrollView`:
|
|
27
|
+
*
|
|
28
|
+
* ```tsx
|
|
29
|
+
* const { scrollY, onScroll } = useScroll()
|
|
30
|
+
*
|
|
31
|
+
* <Motion.FlatList
|
|
32
|
+
* data={items}
|
|
33
|
+
* renderItem={renderItem}
|
|
34
|
+
* onScroll={onScroll}
|
|
35
|
+
* initial={{ opacity: 0 }}
|
|
36
|
+
* animate={{ opacity: 1 }}
|
|
37
|
+
* />
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* Two scoping notes:
|
|
41
|
+
*
|
|
42
|
+
* - `animate` / `initial` / `gesture` apply to the **scroll container**, not to
|
|
43
|
+
* rows. Animate rows by using a `Motion.*` primitive inside `renderItem`.
|
|
44
|
+
* - The `layout` prop animates the list frame. Per-row layout animation is
|
|
45
|
+
* Reanimated's `itemLayoutAnimation`, which is forwarded through untouched.
|
|
46
|
+
* Note that row-level layout animation can fight the list's own measurement
|
|
47
|
+
* passes — measure before adopting it.
|
|
48
|
+
*/
|
|
49
|
+
declare const MotionFlatList: <ItemT = any, V extends VariantsMap<FlatListProps<ItemT>> = VariantsMap<FlatListProps<ItemT>>>(props: FlatListProps<ItemT> & MotionProps<FlatListProps<ItemT>, V> & {
|
|
50
|
+
ref?: React.Ref<FlatList<ItemT>>;
|
|
51
|
+
}) => React.ReactElement;
|
|
52
|
+
|
|
53
|
+
export { MotionFlatList };
|