react-native-screen-transitions 3.0.0-rc.4 → 3.0.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/README.md +228 -96
- package/lib/commonjs/blank-stack/components/overlay.js +1 -1
- package/lib/commonjs/blank-stack/components/overlay.js.map +1 -1
- package/lib/commonjs/blank-stack/components/screens.js +6 -2
- package/lib/commonjs/blank-stack/components/screens.js.map +1 -1
- package/lib/commonjs/blank-stack/components/stack-view.js +2 -5
- package/lib/commonjs/blank-stack/components/stack-view.js.map +1 -1
- package/lib/commonjs/blank-stack/utils/with-stack-navigation/index.js +11 -10
- package/lib/commonjs/blank-stack/utils/with-stack-navigation/index.js.map +1 -1
- package/lib/commonjs/shared/components/controllers/native-stack-lifecycle.js +2 -0
- package/lib/commonjs/shared/components/controllers/native-stack-lifecycle.js.map +1 -1
- package/lib/commonjs/shared/components/create-transition-aware-component.js +2 -0
- package/lib/commonjs/shared/components/create-transition-aware-component.js.map +1 -1
- package/lib/commonjs/shared/hooks/animation/use-screen-animation.js +8 -4
- package/lib/commonjs/shared/hooks/animation/use-screen-animation.js.map +1 -1
- package/lib/commonjs/shared/hooks/gestures/use-build-gestures.js +29 -5
- package/lib/commonjs/shared/hooks/gestures/use-build-gestures.js.map +1 -1
- package/lib/commonjs/shared/hooks/gestures/use-screen-gesture.js +26 -0
- package/lib/commonjs/shared/hooks/gestures/use-screen-gesture.js.map +1 -0
- package/lib/commonjs/shared/hooks/gestures/use-scroll-registry.js +32 -60
- package/lib/commonjs/shared/hooks/gestures/use-scroll-registry.js.map +1 -1
- package/lib/commonjs/shared/index.js +7 -0
- package/lib/commonjs/shared/index.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures.provider.js +21 -42
- package/lib/commonjs/shared/providers/gestures.provider.js.map +1 -1
- package/lib/commonjs/shared/utils/bounds/helpers/interpolate-style.js +30 -0
- package/lib/commonjs/shared/utils/bounds/helpers/interpolate-style.js.map +1 -0
- package/lib/commonjs/shared/utils/bounds/index.js +29 -1
- package/lib/commonjs/shared/utils/bounds/index.js.map +1 -1
- package/lib/commonjs/shared/utils/create-provider.js +16 -0
- package/lib/commonjs/shared/utils/create-provider.js.map +1 -1
- package/lib/commonjs/shared/utils/gesture/check-gesture-activation.js +4 -0
- package/lib/commonjs/shared/utils/gesture/check-gesture-activation.js.map +1 -1
- package/lib/module/blank-stack/components/overlay.js +1 -1
- package/lib/module/blank-stack/components/overlay.js.map +1 -1
- package/lib/module/blank-stack/components/screens.js +6 -2
- package/lib/module/blank-stack/components/screens.js.map +1 -1
- package/lib/module/blank-stack/components/stack-view.js +2 -5
- package/lib/module/blank-stack/components/stack-view.js.map +1 -1
- package/lib/module/blank-stack/utils/with-stack-navigation/index.js +11 -10
- package/lib/module/blank-stack/utils/with-stack-navigation/index.js.map +1 -1
- package/lib/module/shared/components/controllers/native-stack-lifecycle.js +1 -0
- package/lib/module/shared/components/controllers/native-stack-lifecycle.js.map +1 -1
- package/lib/module/shared/components/create-transition-aware-component.js +2 -0
- package/lib/module/shared/components/create-transition-aware-component.js.map +1 -1
- package/lib/module/shared/hooks/animation/use-screen-animation.js +8 -4
- package/lib/module/shared/hooks/animation/use-screen-animation.js.map +1 -1
- package/lib/module/shared/hooks/gestures/use-build-gestures.js +30 -6
- package/lib/module/shared/hooks/gestures/use-build-gestures.js.map +1 -1
- package/lib/module/shared/hooks/gestures/use-screen-gesture.js +22 -0
- package/lib/module/shared/hooks/gestures/use-screen-gesture.js.map +1 -0
- package/lib/module/shared/hooks/gestures/use-scroll-registry.js +32 -60
- package/lib/module/shared/hooks/gestures/use-scroll-registry.js.map +1 -1
- package/lib/module/shared/index.js +1 -0
- package/lib/module/shared/index.js.map +1 -1
- package/lib/module/shared/providers/gestures.provider.js +19 -41
- package/lib/module/shared/providers/gestures.provider.js.map +1 -1
- package/lib/module/shared/utils/bounds/helpers/interpolate-style.js +26 -0
- package/lib/module/shared/utils/bounds/helpers/interpolate-style.js.map +1 -0
- package/lib/module/shared/utils/bounds/index.js +29 -1
- package/lib/module/shared/utils/bounds/index.js.map +1 -1
- package/lib/module/shared/utils/create-provider.js +17 -1
- package/lib/module/shared/utils/create-provider.js.map +1 -1
- package/lib/module/shared/utils/gesture/check-gesture-activation.js +4 -4
- package/lib/module/shared/utils/gesture/check-gesture-activation.js.map +1 -1
- package/lib/typescript/blank-stack/components/screens.d.ts +1 -3
- package/lib/typescript/blank-stack/components/screens.d.ts.map +1 -1
- package/lib/typescript/blank-stack/components/stack-view.d.ts.map +1 -1
- package/lib/typescript/blank-stack/types.d.ts +2 -14
- package/lib/typescript/blank-stack/types.d.ts.map +1 -1
- package/lib/typescript/blank-stack/utils/with-stack-navigation/index.d.ts.map +1 -1
- package/lib/typescript/shared/components/controllers/native-stack-lifecycle.d.ts.map +1 -1
- package/lib/typescript/shared/components/create-transition-aware-component.d.ts +1 -0
- package/lib/typescript/shared/components/create-transition-aware-component.d.ts.map +1 -1
- package/lib/typescript/shared/hooks/animation/use-screen-animation.d.ts.map +1 -1
- package/lib/typescript/shared/hooks/gestures/use-build-gestures.d.ts +1 -0
- package/lib/typescript/shared/hooks/gestures/use-build-gestures.d.ts.map +1 -1
- package/lib/typescript/shared/hooks/gestures/use-screen-gesture.d.ts +15 -0
- package/lib/typescript/shared/hooks/gestures/use-screen-gesture.d.ts.map +1 -0
- package/lib/typescript/shared/hooks/gestures/use-scroll-registry.d.ts +1 -0
- package/lib/typescript/shared/hooks/gestures/use-scroll-registry.d.ts.map +1 -1
- package/lib/typescript/shared/index.d.ts +4 -2
- package/lib/typescript/shared/index.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures.provider.d.ts +6 -13
- package/lib/typescript/shared/providers/gestures.provider.d.ts.map +1 -1
- package/lib/typescript/shared/types/animation.types.d.ts +44 -0
- package/lib/typescript/shared/types/animation.types.d.ts.map +1 -1
- package/lib/typescript/shared/types/bounds.types.d.ts +6 -0
- package/lib/typescript/shared/types/bounds.types.d.ts.map +1 -1
- package/lib/typescript/shared/types/core.types.d.ts +7 -0
- package/lib/typescript/shared/types/core.types.d.ts.map +1 -1
- package/lib/typescript/shared/utils/bounds/helpers/interpolate-style.d.ts +17 -0
- package/lib/typescript/shared/utils/bounds/helpers/interpolate-style.d.ts.map +1 -0
- package/lib/typescript/shared/utils/bounds/index.d.ts.map +1 -1
- package/lib/typescript/shared/utils/create-provider.d.ts +5 -1
- package/lib/typescript/shared/utils/create-provider.d.ts.map +1 -1
- package/lib/typescript/shared/utils/gesture/check-gesture-activation.d.ts +49 -1
- package/lib/typescript/shared/utils/gesture/check-gesture-activation.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/blank-stack/components/overlay.tsx +1 -1
- package/src/blank-stack/components/screens.tsx +4 -4
- package/src/blank-stack/components/stack-view.tsx +4 -11
- package/src/blank-stack/types.ts +2 -15
- package/src/blank-stack/utils/with-stack-navigation/index.tsx +17 -3
- package/src/shared/__tests__/derivations.test.ts +155 -0
- package/src/shared/__tests__/gesture-activation.test.ts +251 -0
- package/src/shared/components/controllers/native-stack-lifecycle.tsx +4 -2
- package/src/shared/components/create-transition-aware-component.tsx +2 -1
- package/src/shared/hooks/animation/use-screen-animation.tsx +8 -2
- package/src/shared/hooks/gestures/use-build-gestures.tsx +35 -8
- package/src/shared/hooks/gestures/use-screen-gesture.ts +19 -0
- package/src/shared/hooks/gestures/use-scroll-registry.tsx +39 -59
- package/src/shared/index.ts +2 -0
- package/src/shared/providers/gestures.provider.tsx +35 -75
- package/src/shared/types/animation.types.ts +49 -0
- package/src/shared/types/bounds.types.ts +11 -0
- package/src/shared/types/core.types.ts +8 -0
- package/src/shared/utils/bounds/helpers/interpolate-style.ts +38 -0
- package/src/shared/utils/bounds/index.ts +31 -1
- package/src/shared/utils/create-provider.tsx +31 -1
- package/src/shared/utils/gesture/check-gesture-activation.ts +4 -4
package/README.md
CHANGED
|
@@ -12,8 +12,8 @@ Customizable screen transitions for React Native. Build gesture-driven, shared e
|
|
|
12
12
|
- **Shared Elements** – Measure-driven transitions between screens using the Bounds API
|
|
13
13
|
- **Gesture Support** – Swipe-to-dismiss with edge or full-screen activation, works with ScrollViews
|
|
14
14
|
- **Two Stack Options** – Pure JS stack (recommended) or native stack integration
|
|
15
|
+
- **Stack Progress** – Track animation progress across the entire stack, not just adjacent screens
|
|
15
16
|
- **Ready-Made Presets** – Instagram, Apple Music, X (Twitter) style transitions included
|
|
16
|
-
- **TypeScript First** – Fully typed for better development experience
|
|
17
17
|
|
|
18
18
|
## Installation
|
|
19
19
|
|
|
@@ -36,10 +36,67 @@ npm install react-native-reanimated react-native-gesture-handler \
|
|
|
36
36
|
|
|
37
37
|
This package provides two stack navigators:
|
|
38
38
|
|
|
39
|
-
| Stack
|
|
40
|
-
|
|
41
|
-
| **Blank Stack** (recommended) | Pure JavaScript stack with full control over transitions, overlays, and gestures.
|
|
42
|
-
| **Native Stack**
|
|
39
|
+
| Stack | Description |
|
|
40
|
+
| ----------------------------- | --------------------------------------------------------------------------------- |
|
|
41
|
+
| **Blank Stack** (recommended) | Pure JavaScript stack with full control over transitions, overlays, and gestures. |
|
|
42
|
+
| **Native Stack** | Extends `@react-navigation/native-stack`. Fewer features but potentially faster. |
|
|
43
|
+
|
|
44
|
+
### Choosing a Stack
|
|
45
|
+
|
|
46
|
+
**Blank Stack** is feature-rich and recommended for most use cases:
|
|
47
|
+
|
|
48
|
+
- Full overlay system (float and screen modes)
|
|
49
|
+
- Stack progress tracking across the entire stack
|
|
50
|
+
- No delayed touch events on exiting screens
|
|
51
|
+
|
|
52
|
+
However, it's still a JavaScript implementation. While optimized to be as fast as possible (using `react-native-screens` under the hood, with animations and gesture logic running on the UI thread), heavy usage may not match native performance.
|
|
53
|
+
|
|
54
|
+
**Native Stack** has limitations but uses native navigation primitives:
|
|
55
|
+
|
|
56
|
+
- No overlay system
|
|
57
|
+
- Relies on `beforeRemove` listeners to intercept navigation
|
|
58
|
+
- Uses transparent modal presentation which can cause delayed touch events
|
|
59
|
+
- Some edge cases with rapid navigation
|
|
60
|
+
|
|
61
|
+
Choose Native Stack if you need maximum performance and can live without overlays.
|
|
62
|
+
|
|
63
|
+
### Blank Stack Philosophy
|
|
64
|
+
|
|
65
|
+
The Blank Stack is intentionally **blank** - transparent screens with no default animations. Unlike platform navigators that impose iOS or Android-style transitions, the Blank Stack gives you a clean slate.
|
|
66
|
+
|
|
67
|
+
**Why no defaults?**
|
|
68
|
+
|
|
69
|
+
- **Full creative control** – You define exactly how screens appear, not the OS
|
|
70
|
+
- **Consistency across platforms** – Same animation on iOS and Android
|
|
71
|
+
- **No fighting the framework** – No need to override or disable built-in behaviors
|
|
72
|
+
|
|
73
|
+
Every screen starts invisible and static. You bring it to life with your own `screenStyleInterpolator`. This encourages intentional, custom transitions rather than settling for platform defaults.
|
|
74
|
+
|
|
75
|
+
Under the hood, the Blank Stack uses `react-native-screens` for native-level performance. All animation and gesture logic runs on the UI thread via Reanimated worklets.
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
// A screen with no options = invisible, no animation
|
|
79
|
+
<Stack.Screen name="Detail" component={DetailScreen} />
|
|
80
|
+
|
|
81
|
+
// Add your own transition
|
|
82
|
+
<Stack.Screen
|
|
83
|
+
name="Detail"
|
|
84
|
+
component={DetailScreen}
|
|
85
|
+
options={{
|
|
86
|
+
screenStyleInterpolator: ({ progress, layouts }) => {
|
|
87
|
+
"worklet";
|
|
88
|
+
return {
|
|
89
|
+
contentStyle: {
|
|
90
|
+
opacity: progress,
|
|
91
|
+
transform: [
|
|
92
|
+
{ translateY: interpolate(progress, [0, 1], [layouts.screen.height, 0]) }
|
|
93
|
+
],
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
},
|
|
97
|
+
}}
|
|
98
|
+
/>
|
|
99
|
+
```
|
|
43
100
|
|
|
44
101
|
### Blank Stack Setup
|
|
45
102
|
|
|
@@ -104,16 +161,16 @@ Built-in animation presets you can spread into screen options:
|
|
|
104
161
|
/>
|
|
105
162
|
```
|
|
106
163
|
|
|
107
|
-
| Preset
|
|
108
|
-
|
|
109
|
-
| `SlideFromTop()`
|
|
110
|
-
| `SlideFromBottom()`
|
|
111
|
-
| `ZoomIn()`
|
|
112
|
-
| `DraggableCard()`
|
|
113
|
-
| `ElasticCard()`
|
|
114
|
-
| `SharedIGImage({ sharedBoundTag })`
|
|
115
|
-
| `SharedAppleMusic({ sharedBoundTag })` | Apple Music-style shared element
|
|
116
|
-
| `SharedXImage({ sharedBoundTag })`
|
|
164
|
+
| Preset | Description |
|
|
165
|
+
| -------------------------------------- | ----------------------------------------------- |
|
|
166
|
+
| `SlideFromTop()` | Slides in from top, vertical gesture dismiss |
|
|
167
|
+
| `SlideFromBottom()` | Slides in from bottom, vertical gesture dismiss |
|
|
168
|
+
| `ZoomIn()` | Scales in with fade, no gesture |
|
|
169
|
+
| `DraggableCard()` | Multi-directional drag with card scaling |
|
|
170
|
+
| `ElasticCard()` | Elastic drag with overlay darkening |
|
|
171
|
+
| `SharedIGImage({ sharedBoundTag })` | Instagram-style shared image transition |
|
|
172
|
+
| `SharedAppleMusic({ sharedBoundTag })` | Apple Music-style shared element |
|
|
173
|
+
| `SharedXImage({ sharedBoundTag })` | X (Twitter)-style image transition |
|
|
117
174
|
|
|
118
175
|
---
|
|
119
176
|
|
|
@@ -154,19 +211,63 @@ import { interpolate } from "react-native-reanimated";
|
|
|
154
211
|
|
|
155
212
|
### Interpolator Props
|
|
156
213
|
|
|
157
|
-
| Prop
|
|
158
|
-
|
|
159
|
-
| `progress`
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
214
|
+
| Prop | Description |
|
|
215
|
+
| ----------------------- | -------------------------------------------------------- |
|
|
216
|
+
| `progress` | Combined progress (0-2). 0=entering, 1=active, 2=exiting |
|
|
217
|
+
| `stackProgress` | Accumulated progress across entire stack (0, 1, 2, 3...) |
|
|
218
|
+
| `current` | Current screen state (progress, closing, gesture, meta) |
|
|
219
|
+
| `previous` | Previous screen state (may be undefined) |
|
|
220
|
+
| `next` | Next screen state (may be undefined) |
|
|
221
|
+
| `layouts.screen` | Screen dimensions `{ width, height }` |
|
|
222
|
+
| `insets` | Safe area insets `{ top, right, bottom, left }` |
|
|
223
|
+
| `focused` | Whether current screen is the topmost |
|
|
224
|
+
| `active` | The screen driving the transition |
|
|
225
|
+
| `isActiveTransitioning` | Whether active screen is animating |
|
|
226
|
+
| `isDismissing` | Whether active screen is being dismissed |
|
|
227
|
+
| `bounds` | Function to access shared element positions |
|
|
228
|
+
|
|
229
|
+
### Screen State (`current`, `previous`, `next`)
|
|
230
|
+
|
|
231
|
+
Each screen state contains:
|
|
232
|
+
|
|
233
|
+
| Property | Description |
|
|
234
|
+
| ---------- | -------------------------------------------------- |
|
|
235
|
+
| `progress` | Animation progress for this screen (0 or 1) |
|
|
236
|
+
| `closing` | Whether screen is closing (0 or 1) |
|
|
237
|
+
| `animating`| Whether screen is currently animating (0 or 1) |
|
|
238
|
+
| `gesture` | Gesture values (x, y, normalizedX, normalizedY, etc.) |
|
|
239
|
+
| `meta` | Custom metadata from screen options |
|
|
240
|
+
|
|
241
|
+
### Using `meta` for Conditional Logic
|
|
242
|
+
|
|
243
|
+
Use `meta` to pass custom data for conditional animation logic. This is more robust than checking route names:
|
|
244
|
+
|
|
245
|
+
```tsx
|
|
246
|
+
// In screen options
|
|
247
|
+
<Stack.Screen
|
|
248
|
+
name="Detail"
|
|
249
|
+
options={{
|
|
250
|
+
meta: { scalesOthers: true },
|
|
251
|
+
screenStyleInterpolator: ({ progress }) => {
|
|
252
|
+
"worklet";
|
|
253
|
+
return { contentStyle: { opacity: progress } };
|
|
254
|
+
},
|
|
255
|
+
}}
|
|
256
|
+
/>
|
|
257
|
+
|
|
258
|
+
// In a component on a previous screen
|
|
259
|
+
const animation = useScreenAnimation();
|
|
260
|
+
|
|
261
|
+
useAnimatedReaction(
|
|
262
|
+
() => animation.value,
|
|
263
|
+
(props) => {
|
|
264
|
+
// React to next screen's meta
|
|
265
|
+
if (props.next?.meta?.scalesOthers) {
|
|
266
|
+
scale.value = withTiming(0);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
```
|
|
170
271
|
|
|
171
272
|
### Return Value
|
|
172
273
|
|
|
@@ -231,10 +332,10 @@ screenStyleInterpolator: ({ bounds }) => {
|
|
|
231
332
|
|
|
232
333
|
const avatarStyles = bounds({
|
|
233
334
|
id: "avatar",
|
|
234
|
-
method: "transform",
|
|
235
|
-
space: "relative",
|
|
236
|
-
scaleMode: "match",
|
|
237
|
-
anchor: "center",
|
|
335
|
+
method: "transform", // "transform" | "size" | "content"
|
|
336
|
+
space: "relative", // "relative" | "absolute"
|
|
337
|
+
scaleMode: "match", // "match" | "none" | "uniform"
|
|
338
|
+
anchor: "center", // positioning anchor
|
|
238
339
|
});
|
|
239
340
|
|
|
240
341
|
return {
|
|
@@ -245,15 +346,15 @@ screenStyleInterpolator: ({ bounds }) => {
|
|
|
245
346
|
|
|
246
347
|
### Bounds Options
|
|
247
348
|
|
|
248
|
-
| Option
|
|
249
|
-
|
|
250
|
-
| `id`
|
|
251
|
-
| `method`
|
|
252
|
-
| `space`
|
|
253
|
-
| `scaleMode` | `"match"` `"none"` `"uniform"`
|
|
254
|
-
| `anchor`
|
|
255
|
-
| `target`
|
|
256
|
-
| `raw`
|
|
349
|
+
| Option | Values | Description |
|
|
350
|
+
| ----------- | -------------------------------------- | -------------------------------------- |
|
|
351
|
+
| `id` | string | The `sharedBoundTag` to match |
|
|
352
|
+
| `method` | `"transform"` `"size"` `"content"` | How to animate (scale vs width/height) |
|
|
353
|
+
| `space` | `"relative"` `"absolute"` | Coordinate space |
|
|
354
|
+
| `scaleMode` | `"match"` `"none"` `"uniform"` | How to handle aspect ratio |
|
|
355
|
+
| `anchor` | `"center"` `"top"` `"topLeading"` etc. | Transform origin |
|
|
356
|
+
| `target` | `"bound"` `"fullscreen"` or custom | Destination target |
|
|
357
|
+
| `raw` | boolean | Return raw values instead of styles |
|
|
257
358
|
|
|
258
359
|
### Raw Values
|
|
259
360
|
|
|
@@ -262,6 +363,39 @@ const raw = bounds({ id: "avatar", method: "transform", raw: true });
|
|
|
262
363
|
// { translateX, translateY, scaleX, scaleY }
|
|
263
364
|
```
|
|
264
365
|
|
|
366
|
+
### Bounds Utilities
|
|
367
|
+
|
|
368
|
+
Access additional bounds data for custom animations:
|
|
369
|
+
|
|
370
|
+
```tsx
|
|
371
|
+
screenStyleInterpolator: ({ bounds, progress }) => {
|
|
372
|
+
"worklet";
|
|
373
|
+
|
|
374
|
+
// Get the active link between source and destination
|
|
375
|
+
const link = bounds.getLink("avatar");
|
|
376
|
+
// { source: { bounds, styles }, destination: { bounds, styles } }
|
|
377
|
+
|
|
378
|
+
// Interpolate a style property (e.g., borderRadius) between source and destination
|
|
379
|
+
const borderRadius = bounds.interpolateStyle("avatar", "borderRadius");
|
|
380
|
+
|
|
381
|
+
// Or access raw values for custom logic
|
|
382
|
+
const sourceBorderRadius = link?.source?.styles?.borderRadius ?? 0;
|
|
383
|
+
|
|
384
|
+
return {
|
|
385
|
+
avatar: {
|
|
386
|
+
...bounds({ id: "avatar" }),
|
|
387
|
+
borderRadius,
|
|
388
|
+
},
|
|
389
|
+
};
|
|
390
|
+
};
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
| Method | Description |
|
|
394
|
+
| ------------------------------------------ | ----------------------------------------------------- |
|
|
395
|
+
| `bounds.getLink(id)` | Get source/destination bounds and styles for a tag |
|
|
396
|
+
| `bounds.interpolateStyle(id, prop, fallback?)` | Interpolate a numeric style between source and dest |
|
|
397
|
+
| `bounds.getSnapshot(id, key)` | Manual lookup by specific screen key (edge cases) |
|
|
398
|
+
|
|
265
399
|
---
|
|
266
400
|
|
|
267
401
|
## Gestures
|
|
@@ -273,8 +407,8 @@ Enable swipe-to-dismiss on screens:
|
|
|
273
407
|
name="Detail"
|
|
274
408
|
options={{
|
|
275
409
|
gestureEnabled: true,
|
|
276
|
-
gestureDirection: "vertical",
|
|
277
|
-
gestureActivationArea: "edge",
|
|
410
|
+
gestureDirection: "vertical", // or "horizontal", ["vertical", "horizontal"]
|
|
411
|
+
gestureActivationArea: "edge", // or "screen", or { left: "edge", top: "screen" }
|
|
278
412
|
gestureResponseDistance: 50,
|
|
279
413
|
gestureVelocityImpact: 0.3,
|
|
280
414
|
}}
|
|
@@ -283,14 +417,14 @@ Enable swipe-to-dismiss on screens:
|
|
|
283
417
|
|
|
284
418
|
### Gesture Options
|
|
285
419
|
|
|
286
|
-
| Option
|
|
287
|
-
|
|
288
|
-
| `gestureEnabled`
|
|
289
|
-
| `gestureDirection`
|
|
290
|
-
| `gestureActivationArea`
|
|
291
|
-
| `gestureResponseDistance` | Distance threshold for gesture recognition
|
|
292
|
-
| `gestureVelocityImpact`
|
|
293
|
-
| `gestureDrivesProgress`
|
|
420
|
+
| Option | Description |
|
|
421
|
+
| ------------------------- | ---------------------------------------------------------------------------------- |
|
|
422
|
+
| `gestureEnabled` | Enable/disable gesture |
|
|
423
|
+
| `gestureDirection` | `"horizontal"` `"vertical"` `"horizontal-inverted"` `"vertical-inverted"` or array |
|
|
424
|
+
| `gestureActivationArea` | `"edge"` `"screen"` or per-side config |
|
|
425
|
+
| `gestureResponseDistance` | Distance threshold for gesture recognition |
|
|
426
|
+
| `gestureVelocityImpact` | How much velocity affects dismissal decision |
|
|
427
|
+
| `gestureDrivesProgress` | Whether gesture directly drives animation (default: true) |
|
|
294
428
|
|
|
295
429
|
### Gestures with ScrollViews
|
|
296
430
|
|
|
@@ -317,6 +451,7 @@ const TransitionFlashList = Transition.createTransitionAwareComponent(
|
|
|
317
451
|
```
|
|
318
452
|
|
|
319
453
|
Gesture rules with scrollables:
|
|
454
|
+
|
|
320
455
|
- **vertical** – only starts when scrolled to top
|
|
321
456
|
- **vertical-inverted** – only starts when scrolled to bottom
|
|
322
457
|
- **horizontal** – only starts at left/right edge
|
|
@@ -339,7 +474,9 @@ const FloatingHeader = ({ focusedIndex, routes, overlayAnimation }) => {
|
|
|
339
474
|
|
|
340
475
|
return (
|
|
341
476
|
<Animated.View style={[styles.header, style]}>
|
|
342
|
-
<Text>
|
|
477
|
+
<Text>
|
|
478
|
+
Screen {focusedIndex + 1} of {routes.length}
|
|
479
|
+
</Text>
|
|
343
480
|
</Animated.View>
|
|
344
481
|
);
|
|
345
482
|
};
|
|
@@ -351,7 +488,7 @@ const FloatingHeader = ({ focusedIndex, routes, overlayAnimation }) => {
|
|
|
351
488
|
overlayMode: "float",
|
|
352
489
|
overlayShown: true,
|
|
353
490
|
}}
|
|
354
|
-
|
|
491
|
+
/>;
|
|
355
492
|
```
|
|
356
493
|
|
|
357
494
|
### Screen Overlay
|
|
@@ -371,15 +508,15 @@ An overlay that moves with screen content:
|
|
|
371
508
|
|
|
372
509
|
### Overlay Props
|
|
373
510
|
|
|
374
|
-
| Prop
|
|
375
|
-
|
|
376
|
-
| `focusedRoute`
|
|
377
|
-
| `focusedIndex`
|
|
378
|
-
| `routes`
|
|
379
|
-
| `
|
|
380
|
-
| `navigation`
|
|
381
|
-
| `overlayAnimation` | Animation values
|
|
382
|
-
| `screenAnimation`
|
|
511
|
+
| Prop | Description |
|
|
512
|
+
| ------------------ | ------------------------------------------------------------ |
|
|
513
|
+
| `focusedRoute` | Currently focused route |
|
|
514
|
+
| `focusedIndex` | Index of focused screen |
|
|
515
|
+
| `routes` | All routes in the stack |
|
|
516
|
+
| `meta` | Custom metadata passed from screen options |
|
|
517
|
+
| `navigation` | Navigation prop |
|
|
518
|
+
| `overlayAnimation` | Animation values with `progress` accumulated across stack |
|
|
519
|
+
| `screenAnimation` | Animation values for the current focused screen |
|
|
383
520
|
|
|
384
521
|
### Passing Custom Data
|
|
385
522
|
|
|
@@ -387,16 +524,16 @@ An overlay that moves with screen content:
|
|
|
387
524
|
<Stack.Screen
|
|
388
525
|
options={{
|
|
389
526
|
overlay: MyOverlay,
|
|
390
|
-
|
|
527
|
+
meta: {
|
|
391
528
|
title: "Step 1",
|
|
392
529
|
showProgress: true,
|
|
393
530
|
},
|
|
394
531
|
}}
|
|
395
|
-
|
|
532
|
+
/>;
|
|
396
533
|
|
|
397
534
|
// In overlay
|
|
398
|
-
const MyOverlay = ({
|
|
399
|
-
return <Text>{
|
|
535
|
+
const MyOverlay = ({ meta }) => {
|
|
536
|
+
return <Text>{meta?.title}</Text>;
|
|
400
537
|
};
|
|
401
538
|
```
|
|
402
539
|
|
|
@@ -404,13 +541,13 @@ const MyOverlay = ({ overlayOptions }) => {
|
|
|
404
541
|
|
|
405
542
|
## Transition Components
|
|
406
543
|
|
|
407
|
-
| Component
|
|
408
|
-
|
|
409
|
-
| `Transition.View`
|
|
410
|
-
| `Transition.Pressable`
|
|
411
|
-
| `Transition.ScrollView` | ScrollView with gesture coordination
|
|
412
|
-
| `Transition.FlatList`
|
|
413
|
-
| `Transition.MaskedView` | For clipping during shared element transitions
|
|
544
|
+
| Component | Description |
|
|
545
|
+
| ----------------------- | ------------------------------------------------------ |
|
|
546
|
+
| `Transition.View` | Animated view, supports `styleId` and `sharedBoundTag` |
|
|
547
|
+
| `Transition.Pressable` | Pressable with bounds measurement on press |
|
|
548
|
+
| `Transition.ScrollView` | ScrollView with gesture coordination |
|
|
549
|
+
| `Transition.FlatList` | FlatList with gesture coordination |
|
|
550
|
+
| `Transition.MaskedView` | For clipping during shared element transitions |
|
|
414
551
|
|
|
415
552
|
### Creating Custom Components
|
|
416
553
|
|
|
@@ -522,10 +659,10 @@ const Stack = createNativeStackNavigator();
|
|
|
522
659
|
<Stack.Screen
|
|
523
660
|
name="Detail"
|
|
524
661
|
options={{
|
|
525
|
-
enableTransitions: true,
|
|
662
|
+
enableTransitions: true, // Required to enable custom transitions
|
|
526
663
|
...Transition.Presets.SlideFromBottom(),
|
|
527
664
|
}}
|
|
528
|
-
|
|
665
|
+
/>;
|
|
529
666
|
```
|
|
530
667
|
|
|
531
668
|
### Expo Router Setup
|
|
@@ -556,26 +693,27 @@ export const Stack = withLayoutContext<
|
|
|
556
693
|
|
|
557
694
|
All standard `@react-navigation/native-stack` options are available, plus:
|
|
558
695
|
|
|
559
|
-
| Option
|
|
560
|
-
|
|
561
|
-
| `enableTransitions`
|
|
562
|
-
| `screenStyleInterpolator` | `ScreenStyleInterpolator`
|
|
563
|
-
| `transitionSpec`
|
|
564
|
-
| `gestureEnabled`
|
|
565
|
-
| `gestureDirection`
|
|
566
|
-
| `gestureVelocityImpact`
|
|
567
|
-
| `gestureResponseDistance` | `number`
|
|
568
|
-
| `gestureDrivesProgress`
|
|
569
|
-
| `gestureActivationArea`
|
|
696
|
+
| Option | Type | Description |
|
|
697
|
+
| ------------------------- | ---------------------------------------- | ------------------------------------------------------------------ |
|
|
698
|
+
| `enableTransitions` | `boolean` | Enable custom transitions (sets presentation to transparent modal) |
|
|
699
|
+
| `screenStyleInterpolator` | `ScreenStyleInterpolator` | Function that returns animated styles |
|
|
700
|
+
| `transitionSpec` | `TransitionSpec` | Animation config for open/close |
|
|
701
|
+
| `gestureEnabled` | `boolean` | Whether swipe-to-dismiss is allowed |
|
|
702
|
+
| `gestureDirection` | `GestureDirection \| GestureDirection[]` | Allowed swipe directions |
|
|
703
|
+
| `gestureVelocityImpact` | `number` | How much velocity affects dismissal |
|
|
704
|
+
| `gestureResponseDistance` | `number` | Distance threshold for gesture |
|
|
705
|
+
| `gestureDrivesProgress` | `boolean` | Whether gesture drives animation |
|
|
706
|
+
| `gestureActivationArea` | `GestureActivationArea` | Where gesture can start |
|
|
707
|
+
| `meta` | `Record<string, unknown>` | Custom metadata for conditional animation logic |
|
|
570
708
|
|
|
571
709
|
### Renamed Native Options
|
|
572
710
|
|
|
573
711
|
To avoid collisions with custom gesture options, some native options are renamed:
|
|
574
712
|
|
|
575
|
-
| React Navigation
|
|
576
|
-
|
|
577
|
-
| `gestureDirection`
|
|
578
|
-
| `gestureEnabled`
|
|
713
|
+
| React Navigation | Renamed to |
|
|
714
|
+
| ------------------------- | ------------------------------- |
|
|
715
|
+
| `gestureDirection` | `nativeGestureDirection` |
|
|
716
|
+
| `gestureEnabled` | `nativeGestureEnabled` |
|
|
579
717
|
| `gestureResponseDistance` | `nativeGestureResponseDistance` |
|
|
580
718
|
|
|
581
719
|
### Limitations
|
|
@@ -587,12 +725,6 @@ To avoid collisions with custom gesture options, some native options are renamed
|
|
|
587
725
|
|
|
588
726
|
---
|
|
589
727
|
|
|
590
|
-
## Known Issues
|
|
591
|
-
|
|
592
|
-
- **Delayed Touch Events** – There may be a noticeable delay in touch events when transitions finish. If this affects your app, consider using the Blank Stack.
|
|
593
|
-
|
|
594
|
-
---
|
|
595
|
-
|
|
596
728
|
## Support
|
|
597
729
|
|
|
598
730
|
This package is developed in my spare time. Updates and bug fixes may take time.
|
|
@@ -69,7 +69,7 @@ const OverlayHost = ({
|
|
|
69
69
|
screenAnimation,
|
|
70
70
|
focusedRoute: focusedScene.route,
|
|
71
71
|
focusedIndex: optimisticActiveIndex,
|
|
72
|
-
|
|
72
|
+
meta: focusedScene.descriptor.options.meta,
|
|
73
73
|
navigation: scene.descriptor.navigation
|
|
74
74
|
};
|
|
75
75
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_native","require","_react","_reactNative","_useScreenAnimation","_keys","_transitionStyles","_useOverlayAnimation","_withStackNavigation","_jsxRuntime","getActiveFloatOverlay","scenes","index","length","startIndex","Math","max","i","scene","options","descriptor","overlayMode","overlayShown","overlayIndex","OverlayHost","isFloating","OverlayComponent","overlay","overlayAnimation","optimisticActiveIndex","useOverlayAnimation","routes","useStackNavigationContext","overlaySceneIndex","useMemo","findIndex","stackScene","route","key","focusedScene","maxOffset","normalizedIndex","min","screenAnimation","useScreenAnimation","overlayProps","focusedRoute","focusedIndex","
|
|
1
|
+
{"version":3,"names":["_native","require","_react","_reactNative","_useScreenAnimation","_keys","_transitionStyles","_useOverlayAnimation","_withStackNavigation","_jsxRuntime","getActiveFloatOverlay","scenes","index","length","startIndex","Math","max","i","scene","options","descriptor","overlayMode","overlayShown","overlayIndex","OverlayHost","isFloating","OverlayComponent","overlay","overlayAnimation","optimisticActiveIndex","useOverlayAnimation","routes","useStackNavigationContext","overlaySceneIndex","useMemo","findIndex","stackScene","route","key","focusedScene","maxOffset","normalizedIndex","min","screenAnimation","useScreenAnimation","overlayProps","focusedRoute","focusedIndex","meta","navigation","jsx","Animated","View","pointerEvents","style","styles","container","floating","zIndex","absolute","children","NavigationContext","Provider","value","NavigationRouteContext","FloatOverlay","activeOverlay","previous","current","next","KeysProvider","TransitionStylesProvider","ScreenOverlay","useKeys","Overlay","exports","Float","Screen","StyleSheet","create","absoluteFillObject","flex"],"sourceRoot":"../../../../src","sources":["blank-stack/components/overlay.tsx"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAMA,IAAAO,oBAAA,GAAAP,OAAA;AAA2E,IAAAQ,WAAA,GAAAR,OAAA;AAO3E,MAAMS,qBAAqB,GAAGA,CAACC,MAAyB,EAAEC,KAAa,KAAK;EAC3E,IAAID,MAAM,CAACE,MAAM,KAAK,CAAC,EAAE;IACxB,OAAO,IAAI;EACZ;;EAEA;EACA;EACA;EACA;EACA,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACJ,KAAK,EAAED,MAAM,CAACE,MAAM,GAAG,CAAC,CAAC;EAErD,KAAK,IAAII,CAAC,GAAGH,UAAU,EAAEG,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;IACrC,MAAMC,KAAK,GAAGP,MAAM,CAACM,CAAC,CAAC;IACvB,MAAME,OAAO,GAAGD,KAAK,EAAEE,UAAU,EAAED,OAAO;IAE1C,IAAIA,OAAO,EAAEE,WAAW,KAAK,OAAO,IAAIF,OAAO,EAAEG,YAAY,EAAE;MAC9D,OAAO;QAAEJ,KAAK;QAAEK,YAAY,EAAEN;MAAE,CAAC;IAClC;EACD;EAEA,OAAO,IAAI;AACZ,CAAC;AAED,MAAMO,WAAW,GAAGA,CAAC;EAAEN,KAAK;EAAEO;AAA6B,CAAC,KAAK;EAChE,MAAMC,gBAAgB,GAAGR,KAAK,CAACE,UAAU,CAACD,OAAO,CAACQ,OAAO;EAEzD,MAAM;IAAEC,gBAAgB;IAAEC;EAAsB,CAAC,GAAG,IAAAC,wCAAmB,EAAC,CAAC;EACzE,MAAM;IAAEnB,MAAM;IAAEoB;EAAO,CAAC,GAAG,IAAAC,8CAAyB,EAAC,CAAC;EAEtD,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAAC,MAAM;IACvC,OAAOvB,MAAM,CAACwB,SAAS,CACrBC,UAAU,IAAKA,UAAU,CAACC,KAAK,CAACC,GAAG,KAAKpB,KAAK,CAACmB,KAAK,CAACC,GACtD,CAAC;EACF,CAAC,EAAE,CAAC3B,MAAM,EAAEO,KAAK,CAACmB,KAAK,CAACC,GAAG,CAAC,CAAC;EAE7B,MAAMC,YAAY,GAAG,IAAAL,cAAO,EAAC,MAAM;IAClC,IAAID,iBAAiB,KAAK,CAAC,CAAC,EAAE;MAC7B,OAAOf,KAAK;IACb;IAEA,MAAMsB,SAAS,GAAGzB,IAAI,CAACC,GAAG,CAACL,MAAM,CAACE,MAAM,GAAGoB,iBAAiB,GAAG,CAAC,EAAE,CAAC,CAAC;IACpE,MAAMQ,eAAe,GAAG1B,IAAI,CAAC2B,GAAG,CAC/B3B,IAAI,CAACC,GAAG,CAACa,qBAAqB,EAAE,CAAC,CAAC,EAClCW,SACD,CAAC;IAED,OAAO7B,MAAM,CAACsB,iBAAiB,GAAGQ,eAAe,CAAC,IAAIvB,KAAK;EAC5D,CAAC,EAAE,CAACe,iBAAiB,EAAEJ,qBAAqB,EAAElB,MAAM,EAAEO,KAAK,CAAC,CAAC;EAE7D,MAAMyB,eAAe,GAAG,IAAAC,sCAAkB,EAAC,CAAC;EAE5C,IAAI,CAAClB,gBAAgB,EAAE;IACtB,OAAO,IAAI;EACZ;EAEA,MAAMmB,YAAoC,GAAG;IAC5Cd,MAAM;IACNH,gBAAgB;IAChBe,eAAe;IACfG,YAAY,EAAEP,YAAY,CAACF,KAAK;IAChCU,YAAY,EAAElB,qBAAqB;IACnCmB,IAAI,EAAET,YAAY,CAACnB,UAAU,CAACD,OAAO,CAAC6B,IAAI;IAC1CC,UAAU,EAAE/B,KAAK,CAACE,UAAU,CAAC6B;EAC9B,CAAC;EAED,oBACC,IAAAxC,WAAA,CAAAyC,GAAA,EAAC/C,YAAA,CAAAgD,QAAQ,CAACC,IAAI;IACbC,aAAa,EAAC,UAAU;IACxBC,KAAK,EAAE,CACNC,MAAM,CAACC,SAAS,EAChB/B,UAAU,GAAG8B,MAAM,CAACE,QAAQ,GAAG;MAAEC,MAAM,EAAE;IAAE,CAAC,EAC5CH,MAAM,CAACI,QAAQ,CACd;IAAAC,QAAA,eAEF,IAAAnD,WAAA,CAAAyC,GAAA,EAAClD,OAAA,CAAA6D,iBAAiB,CAACC,QAAQ;MAACC,KAAK,EAAE7C,KAAK,CAACE,UAAU,CAAC6B,UAAW;MAAAW,QAAA,eAC9D,IAAAnD,WAAA,CAAAyC,GAAA,EAAClD,OAAA,CAAAgE,sBAAsB,CAACF,QAAQ;QAACC,KAAK,EAAE7C,KAAK,CAACmB,KAAM;QAAAuB,QAAA,eACnD,IAAAnD,WAAA,CAAAyC,GAAA,EAAC/C,YAAA,CAAAiD,IAAI;UAACC,aAAa,EAAC,UAAU;UAACC,KAAK,EAAEC,MAAM,CAAC5B,OAAQ;UAAAiC,QAAA,eACpD,IAAAnD,WAAA,CAAAyC,GAAA,EAACxB,gBAAgB;YAAA,GAAKmB;UAAY,CAAG;QAAC,CACjC;MAAC,CACyB;IAAC,CACP;EAAC,CACf,CAAC;AAElB,CAAC;AAED,MAAMoB,YAAY,GAAGA,CAAA,KAAM;EAC1B,MAAM;IAAEtD,MAAM;IAAEoC;EAAa,CAAC,GAAG,IAAAf,8CAAyB,EAAC,CAAC;EAE5D,MAAMkC,aAAa,GAAG,IAAAhC,cAAO,EAC5B,MAAMxB,qBAAqB,CAACC,MAAM,EAAEoC,YAAY,CAAC,EACjD,CAACpC,MAAM,EAAEoC,YAAY,CACtB,CAAC;EAED,IAAI,CAACmB,aAAa,EAAE;IACnB,OAAO,IAAI;EACZ;EAEA,MAAM;IAAEhD,KAAK;IAAEK;EAAa,CAAC,GAAG2C,aAAa;EAE7C,MAAMC,QAAQ,GAAGxD,MAAM,CAACY,YAAY,GAAG,CAAC,CAAC,EAAEH,UAAU;EACrD,MAAMgD,OAAO,GAAGlD,KAAK,CAACE,UAAU;EAChC,MAAMiD,IAAI,GAAG1D,MAAM,CAACY,YAAY,GAAG,CAAC,CAAC,EAAEH,UAAU;EAEjD,oBACC,IAAAX,WAAA,CAAAyC,GAAA,EAAC7C,KAAA,CAAAiE,YAAY;IAACF,OAAO,EAAEA,OAAQ;IAACD,QAAQ,EAAEA,QAAS;IAACE,IAAI,EAAEA,IAAK;IAAAT,QAAA,eAC9D,IAAAnD,WAAA,CAAAyC,GAAA,EAAC5C,iBAAA,CAAAiE,wBAAwB;MAAAX,QAAA,eACxB,IAAAnD,WAAA,CAAAyC,GAAA,EAAC1B,WAAW;QAACN,KAAK,EAAEA,KAAM;QAACO,UAAU;MAAA,CAAE;IAAC,CACf;EAAC,CACd,CAAC;AAEjB,CAAC;AAED,MAAM+C,aAAa,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEJ;EAAQ,CAAC,GAAG,IAAAK,aAAO,EAAuB,CAAC;EAEnD,MAAMtD,OAAO,GAAGiD,OAAO,CAACjD,OAAO;EAE/B,IAAI,CAACA,OAAO,CAACG,YAAY,IAAIH,OAAO,CAACE,WAAW,KAAK,QAAQ,EAAE;IAC9D,OAAO,IAAI;EACZ;EAEA,MAAMH,KAAsB,GAAG;IAC9BE,UAAU,EAAEgD,OAAO;IACnB/B,KAAK,EAAE+B,OAAO,CAAC/B;EAChB,CAAC;EAED,oBAAO,IAAA5B,WAAA,CAAAyC,GAAA,EAAC1B,WAAW;IAACN,KAAK,EAAEA;EAAM,CAAE,CAAC;AACrC,CAAC;AAEM,MAAMwD,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG;EACtBE,KAAK,EAAEX,YAAY;EACnBY,MAAM,EAAEL;AACT,CAAC;AAED,MAAMjB,MAAM,GAAGuB,uBAAU,CAACC,MAAM,CAAC;EAChCpD,OAAO,EAAE;IACR,GAAGmD,uBAAU,CAACE,kBAAkB;IAChCtB,MAAM,EAAE;EACT,CAAC;EACDF,SAAS,EAAE;IACVyB,IAAI,EAAE;EACP,CAAC;EACDtB,QAAQ,EAAEmB,uBAAU,CAACE,kBAAkB;EACvCvB,QAAQ,EAAE;IACTC,MAAM,EAAE;EACT;AACD,CAAC,CAAC","ignoreList":[]}
|
|
@@ -8,6 +8,7 @@ var _reactNative = require("react-native");
|
|
|
8
8
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
9
|
var _reactNativeScreens = require("react-native-screens");
|
|
10
10
|
var _animation = require("../../shared/stores/animation.store");
|
|
11
|
+
var _withStackNavigation = require("../utils/with-stack-navigation");
|
|
11
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
14
|
var ScreenActivity = /*#__PURE__*/function (ScreenActivity) {
|
|
@@ -21,13 +22,16 @@ const AnimatedScreen = _reactNativeReanimated.default.createAnimatedComponent(_r
|
|
|
21
22
|
const Screen = ({
|
|
22
23
|
routeKey,
|
|
23
24
|
index,
|
|
24
|
-
routesLength,
|
|
25
25
|
isPreloaded,
|
|
26
|
-
activeScreensLimit,
|
|
27
26
|
children,
|
|
28
27
|
freezeOnBlur,
|
|
29
28
|
shouldFreeze
|
|
30
29
|
}) => {
|
|
30
|
+
const {
|
|
31
|
+
activeScreensLimit,
|
|
32
|
+
routes
|
|
33
|
+
} = (0, _withStackNavigation.useStackNavigationContext)();
|
|
34
|
+
const routesLength = routes.length;
|
|
31
35
|
const sceneProgress = _animation.AnimationStore.getAnimation(routeKey, "progress");
|
|
32
36
|
const sceneClosing = _animation.AnimationStore.getAnimation(routeKey, "closing");
|
|
33
37
|
const screenActivity = (0, _reactNativeReanimated.useSharedValue)(ScreenActivity.TRANSITIONING_OR_BELOW_TOP);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireWildcard","_reactNativeScreens","_animation","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ScreenActivity","EPSILON","AnimatedScreen","Animated","createAnimatedComponent","RNSScreen","Screen","routeKey","index","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireWildcard","_reactNativeScreens","_animation","_withStackNavigation","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ScreenActivity","EPSILON","AnimatedScreen","Animated","createAnimatedComponent","RNSScreen","Screen","routeKey","index","isPreloaded","children","freezeOnBlur","shouldFreeze","activeScreensLimit","routes","useStackNavigationContext","routesLength","length","sceneProgress","AnimationStore","getAnimation","sceneClosing","screenActivity","useSharedValue","TRANSITIONING_OR_BELOW_TOP","useDerivedValue","INACTIVE","outputValue","ON_TOP","v","interpolate","next","Math","trunc","animatedProps","useAnimatedProps","activity","activityState","pointerEvents","jsx","enabled","style","StyleSheet","absoluteFill","exports"],"sourceRoot":"../../../../src","sources":["blank-stack/components/screens.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,9 +22,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
22
22
|
function isFabric() {
|
|
23
23
|
return "nativeFabricUIManager" in global;
|
|
24
24
|
}
|
|
25
|
-
const SceneView = /*#__PURE__*/React.memo(({
|
|
25
|
+
const SceneView = /*#__PURE__*/React.memo(function SceneView({
|
|
26
26
|
descriptor
|
|
27
|
-
})
|
|
27
|
+
}) {
|
|
28
28
|
const {
|
|
29
29
|
route,
|
|
30
30
|
navigation,
|
|
@@ -39,7 +39,6 @@ const SceneView = /*#__PURE__*/React.memo(({
|
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
41
|
const StackView = exports.StackView = (0, _withStackNavigation.withStackNavigationProvider)(({
|
|
42
|
-
activeScreensLimit,
|
|
43
42
|
descriptors,
|
|
44
43
|
focusedIndex,
|
|
45
44
|
routes,
|
|
@@ -71,9 +70,7 @@ const StackView = exports.StackView = (0, _withStackNavigation.withStackNavigati
|
|
|
71
70
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_screens.Screen, {
|
|
72
71
|
isPreloaded: isPreloaded,
|
|
73
72
|
index: sceneIndex,
|
|
74
|
-
activeScreensLimit: activeScreensLimit,
|
|
75
73
|
routeKey: route.key,
|
|
76
|
-
routesLength: routes.length,
|
|
77
74
|
shouldFreeze: shouldFreeze,
|
|
78
75
|
freezeOnBlur: descriptor.options.freezeOnBlur,
|
|
79
76
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTransition.ScreenTransitionProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_elements","require","_native","React","_interopRequireWildcard","_reactNative","_reactNativeGestureHandler","_reactNativeScreens","_blankStackLifecycle","_flags","_routes","_screenTransition","_withStackNavigation","_overlay","_screens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","isFabric","global","SceneView","memo","descriptor","route","navigation","render","jsx","NavigationContext","Provider","value","children","jsxs","NavigationRouteContext","options","overlayMode","Overlay","Screen","StackView","exports","withStackNavigationProvider","
|
|
1
|
+
{"version":3,"names":["_elements","require","_native","React","_interopRequireWildcard","_reactNative","_reactNativeGestureHandler","_reactNativeScreens","_blankStackLifecycle","_flags","_routes","_screenTransition","_withStackNavigation","_overlay","_screens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","isFabric","global","SceneView","memo","descriptor","route","navigation","render","jsx","NavigationContext","Provider","value","children","jsxs","NavigationRouteContext","options","overlayMode","Overlay","Screen","StackView","exports","withStackNavigationProvider","descriptors","focusedIndex","routes","scenes","shouldShowFloatOverlay","routeKeys","useMemo","map","key","FlagsProvider","TRANSITIONS_ALWAYS_ON","RoutesProvider","GestureHandlerRootView","SafeAreaProviderCompat","Float","ScreenContainer","style","styles","container","scene","sceneIndex","isFocused","isBelowFocused","previousDescriptor","undefined","nextDescriptor","isPreloaded","shouldFreeze","index","routeKey","freezeOnBlur","ScreenTransitionProvider","previous","current","next","LifecycleController","BlankStackScreenLifecycleController","StyleSheet","create","flex"],"sourceRoot":"../../../../src","sources":["blank-stack/components/stack-view.tsx"],"mappings":"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","ignoreList":[]}
|