react-native-screen-transitions 3.0.0-rc.5 → 3.1.0

package/README.md

@@ -12,8 +12,8 @@ Customizable screen transitions for React Native. Build gesture-driven, shared e
 - **Shared Elements** – Measure-driven transitions between screens using the Bounds API
 - **Gesture Support** – Swipe-to-dismiss with edge or full-screen activation, works with ScrollViews
 - **Two Stack Options** – Pure JS stack (recommended) or native stack integration
+- **Stack Progress** – Track animation progress across the entire stack, not just adjacent screens
 - **Ready-Made Presets** – Instagram, Apple Music, X (Twitter) style transitions included
-- **TypeScript First** – Fully typed for better development experience
 
 ## Installation
 
@@ -36,10 +36,67 @@ npm install react-native-reanimated react-native-gesture-handler \
 
 This package provides two stack navigators:
 
-| Stack | Description |
-|-------|-------------|
-| **Blank Stack** (recommended) | Pure JavaScript stack with full control over transitions, overlays, and gestures. No native limitations. |
-| **Native Stack** | Extends `@react-navigation/native-stack`. More limited due to native constraints. |
+| Stack                         | Description                                                                       |
+| ----------------------------- | --------------------------------------------------------------------------------- |
+| **Blank Stack** (recommended) | Pure JavaScript stack with full control over transitions, overlays, and gestures. |
+| **Native Stack**              | Extends `@react-navigation/native-stack`. Fewer features but potentially faster.  |
+
+### Choosing a Stack
+
+**Blank Stack** is feature-rich and recommended for most use cases:
+
+- Full overlay system (float and screen modes)
+- Stack progress tracking across the entire stack
+- No delayed touch events on exiting screens
+
+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.
+
+**Native Stack** has limitations but uses native navigation primitives:
+
+- No overlay system
+- Relies on `beforeRemove` listeners to intercept navigation
+- Uses transparent modal presentation which can cause delayed touch events
+- Some edge cases with rapid navigation
+
+Choose Native Stack if you need maximum performance and can live without overlays.
+
+### Blank Stack Philosophy
+
+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.
+
+**Why no defaults?**
+
+- **Full creative control** – You define exactly how screens appear, not the OS
+- **Consistency across platforms** – Same animation on iOS and Android
+- **No fighting the framework** – No need to override or disable built-in behaviors
+
+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.
+
+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.
+
+```tsx
+// A screen with no options = invisible, no animation
+<Stack.Screen name="Detail" component={DetailScreen} />
+
+// Add your own transition
+<Stack.Screen
+  name="Detail"
+  component={DetailScreen}
+  options={{
+    screenStyleInterpolator: ({ progress, layouts }) => {
+      "worklet";
+      return {
+        contentStyle: {
+          opacity: progress,
+          transform: [
+            { translateY: interpolate(progress, [0, 1], [layouts.screen.height, 0]) }
+          ],
+        },
+      };
+    },
+  }}
+/>
+```
 
 ### Blank Stack Setup
 
@@ -104,16 +161,16 @@ Built-in animation presets you can spread into screen options:
 />
 ```
 
-| Preset | Description |
-|--------|-------------|
-| `SlideFromTop()` | Slides in from top, vertical gesture dismiss |
-| `SlideFromBottom()` | Slides in from bottom, vertical gesture dismiss |
-| `ZoomIn()` | Scales in with fade, no gesture |
-| `DraggableCard()` | Multi-directional drag with card scaling |
-| `ElasticCard()` | Elastic drag with overlay darkening |
-| `SharedIGImage({ sharedBoundTag })` | Instagram-style shared image transition |
-| `SharedAppleMusic({ sharedBoundTag })` | Apple Music-style shared element |
-| `SharedXImage({ sharedBoundTag })` | X (Twitter)-style image transition |
+| Preset                                 | Description                                     |
+| -------------------------------------- | ----------------------------------------------- |
+| `SlideFromTop()`                       | Slides in from top, vertical gesture dismiss    |
+| `SlideFromBottom()`                    | Slides in from bottom, vertical gesture dismiss |
+| `ZoomIn()`                             | Scales in with fade, no gesture                 |
+| `DraggableCard()`                      | Multi-directional drag with card scaling        |
+| `ElasticCard()`                        | Elastic drag with overlay darkening             |
+| `SharedIGImage({ sharedBoundTag })`    | Instagram-style shared image transition         |
+| `SharedAppleMusic({ sharedBoundTag })` | Apple Music-style shared element                |
+| `SharedXImage({ sharedBoundTag })`     | X (Twitter)-style image transition              |
 
 ---
 
@@ -154,19 +211,97 @@ import { interpolate } from "react-native-reanimated";
 
 ### Interpolator Props
 
-| Prop | Description |
-|------|-------------|
-| `progress` | Combined progress (0-2). 0=entering, 1=active, 2=exiting |
-| `current` | Current screen state (progress, closing, gesture, route) |
-| `previous` | Previous screen state (may be undefined) |
-| `next` | Next screen state (may be undefined) |
-| `layouts.screen` | Screen dimensions `{ width, height }` |
-| `insets` | Safe area insets `{ top, right, bottom, left }` |
-| `focused` | Whether current screen is the topmost |
-| `active` | The screen driving the transition |
-| `isActiveTransitioning` | Whether active screen is animating |
-| `isDismissing` | Whether active screen is being dismissed |
-| `bounds` | Function to access shared element positions |
+| Prop             | Description                                              |
+| ---------------- | -------------------------------------------------------- |
+| `progress`       | Combined progress (0-2). 0=entering, 1=active, 2=exiting |
+| `stackProgress`  | Accumulated progress across entire stack (0, 1, 2, 3...) |
+| `current`        | Current screen state (progress, closing, gesture, meta)  |
+| `previous`       | Previous screen state (may be undefined)                 |
+| `next`           | Next screen state (may be undefined)                     |
+| `layouts.screen` | Screen dimensions `{ width, height }`                    |
+| `insets`         | Safe area insets `{ top, right, bottom, left }`          |
+| `focused`        | Whether current screen is the topmost                    |
+| `active`         | The screen driving the transition                        |
+| `inactive`       | The screen NOT driving the transition                    |
+| `bounds`         | Function to access shared element positions              |
+
+### Screen State (`current`, `previous`, `next`, `active`, `inactive`)
+
+Each screen state contains:
+
+| Property    | Description                                           |
+| ----------- | ----------------------------------------------------- |
+| `progress`  | Animation progress for this screen (0 or 1)           |
+| `closing`   | Whether screen is closing (0 or 1)                    |
+| `animating` | Whether screen is currently animating (0 or 1)        |
+| `gesture`   | Gesture values (x, y, normalizedX, normalizedY, etc.) |
+| `meta`      | Custom metadata from screen options                   |
+
+### Understanding `active` and `inactive`
+
+The `active` and `inactive` props help you write cleaner conditional logic:
+
+- **`active`** – The screen driving the transition. When focused, this is `current`. When not focused, this is `next`.
+- **`inactive`** – The screen NOT driving the transition. When focused, this is `previous`. When not focused, this is `current`.
+
+```tsx
+// Check if the inactive screen wants to disable an animation
+const disableTranslateY = props.inactive?.meta?.disableTranslateYAnimation;
+
+// Check if the active screen is animating or closing
+const isAnimating = props.active.animating;
+const isClosing = props.active.closing;
+```
+
+### Using `meta` for Conditional Logic
+
+Use `meta` to pass custom data for conditional animation logic. This is more robust than checking route names:
+
+```tsx
+// Screen A sets meta to affect how Screen B animates
+<Stack.Screen
+  name="ScreenA"
+  options={{
+    meta: { disableTranslateYAnimation: true },
+  }}
+/>
+
+// Screen B checks inactive screen's meta
+<Stack.Screen
+  name="ScreenB"
+  options={{
+    screenStyleInterpolator: (props) => {
+      "worklet";
+
+      // When entering from ScreenA, inactive = ScreenA (previous)
+      // When going back to ScreenA, inactive = ScreenB (current)
+      const disableY = props.inactive?.meta?.disableTranslateYAnimation;
+
+      return {
+        contentStyle: {
+          transform: [{ translateY: disableY ? 0 : translateY }],
+        },
+      };
+    },
+  }}
+/>
+```
+
+You can also react to screen state changes within components:
+
+```tsx
+const animation = useScreenAnimation();
+
+useAnimatedReaction(
+  () => animation.value,
+  (props) => {
+    // React to next screen's meta
+    if (props.next?.meta?.scalesOthers) {
+      scale.value = withTiming(0);
+    }
+  }
+);
+```
 
 ### Return Value
 
@@ -231,10 +366,10 @@ screenStyleInterpolator: ({ bounds }) => {
 
   const avatarStyles = bounds({
     id: "avatar",
-    method: "transform",  // "transform" | "size" | "content"
-    space: "relative",    // "relative" | "absolute"
-    scaleMode: "match",   // "match" | "none" | "uniform"
-    anchor: "center",     // positioning anchor
+    method: "transform", // "transform" | "size" | "content"
+    space: "relative", // "relative" | "absolute"
+    scaleMode: "match", // "match" | "none" | "uniform"
+    anchor: "center", // positioning anchor
   });
 
   return {
@@ -245,15 +380,15 @@ screenStyleInterpolator: ({ bounds }) => {
 
 ### Bounds Options
 
-| Option | Values | Description |
-|--------|--------|-------------|
-| `id` | string | The `sharedBoundTag` to match |
-| `method` | `"transform"` `"size"` `"content"` | How to animate (scale vs width/height) |
-| `space` | `"relative"` `"absolute"` | Coordinate space |
-| `scaleMode` | `"match"` `"none"` `"uniform"` | How to handle aspect ratio |
-| `anchor` | `"center"` `"top"` `"topLeading"` etc. | Transform origin |
-| `target` | `"bound"` `"fullscreen"` or custom | Destination target |
-| `raw` | boolean | Return raw values instead of styles |
+| Option      | Values                                 | Description                            |
+| ----------- | -------------------------------------- | -------------------------------------- |
+| `id`        | string                                 | The `sharedBoundTag` to match          |
+| `method`    | `"transform"` `"size"` `"content"`     | How to animate (scale vs width/height) |
+| `space`     | `"relative"` `"absolute"`              | Coordinate space                       |
+| `scaleMode` | `"match"` `"none"` `"uniform"`         | How to handle aspect ratio             |
+| `anchor`    | `"center"` `"top"` `"topLeading"` etc. | Transform origin                       |
+| `target`    | `"bound"` `"fullscreen"` or custom     | Destination target                     |
+| `raw`       | boolean                                | Return raw values instead of styles    |
 
 ### Raw Values
 
@@ -262,6 +397,39 @@ const raw = bounds({ id: "avatar", method: "transform", raw: true });
 // { translateX, translateY, scaleX, scaleY }
 ```
 
+### Bounds Utilities
+
+Access additional bounds data for custom animations:
+
+```tsx
+screenStyleInterpolator: ({ bounds, progress }) => {
+  "worklet";
+
+  // Get the active link between source and destination
+  const link = bounds.getLink("avatar");
+  // { source: { bounds, styles }, destination: { bounds, styles } }
+
+  // Interpolate a style property (e.g., borderRadius) between source and destination
+  const borderRadius = bounds.interpolateStyle("avatar", "borderRadius");
+
+  // Or access raw values for custom logic
+  const sourceBorderRadius = link?.source?.styles?.borderRadius ?? 0;
+
+  return {
+    avatar: {
+      ...bounds({ id: "avatar" }),
+      borderRadius,
+    },
+  };
+};
+```
+
+| Method                                         | Description                                         |
+| ---------------------------------------------- | --------------------------------------------------- |
+| `bounds.getLink(id)`                           | Get source/destination bounds and styles for a tag  |
+| `bounds.interpolateStyle(id, prop, fallback?)` | Interpolate a numeric style between source and dest |
+| `bounds.getSnapshot(id, key)`                  | Manual lookup by specific screen key (edge cases)   |
+
 ---
 
 ## Gestures
@@ -273,8 +441,8 @@ Enable swipe-to-dismiss on screens:
   name="Detail"
   options={{
     gestureEnabled: true,
-    gestureDirection: "vertical",        // or "horizontal", ["vertical", "horizontal"]
-    gestureActivationArea: "edge",       // or "screen", or { left: "edge", top: "screen" }
+    gestureDirection: "vertical", // or "horizontal", ["vertical", "horizontal"]
+    gestureActivationArea: "edge", // or "screen", or { left: "edge", top: "screen" }
     gestureResponseDistance: 50,
     gestureVelocityImpact: 0.3,
   }}
@@ -283,14 +451,14 @@ Enable swipe-to-dismiss on screens:
 
 ### Gesture Options
 
-| Option | Description |
-|--------|-------------|
-| `gestureEnabled` | Enable/disable gesture |
-| `gestureDirection` | `"horizontal"` `"vertical"` `"horizontal-inverted"` `"vertical-inverted"` or array |
-| `gestureActivationArea` | `"edge"` `"screen"` or per-side config |
-| `gestureResponseDistance` | Distance threshold for gesture recognition |
-| `gestureVelocityImpact` | How much velocity affects dismissal decision |
-| `gestureDrivesProgress` | Whether gesture directly drives animation (default: true) |
+| Option                    | Description                                                                        |
+| ------------------------- | ---------------------------------------------------------------------------------- |
+| `gestureEnabled`          | Enable/disable gesture                                                             |
+| `gestureDirection`        | `"horizontal"` `"vertical"` `"horizontal-inverted"` `"vertical-inverted"` or array |
+| `gestureActivationArea`   | `"edge"` `"screen"` or per-side config                                             |
+| `gestureResponseDistance` | Distance threshold for gesture recognition                                         |
+| `gestureVelocityImpact`   | How much velocity affects dismissal decision                                       |
+| `gestureDrivesProgress`   | Whether gesture directly drives animation (default: true)                          |
 
 ### Gestures with ScrollViews
 
@@ -317,6 +485,7 @@ const TransitionFlashList = Transition.createTransitionAwareComponent(
 ```
 
 Gesture rules with scrollables:
+
 - **vertical** – only starts when scrolled to top
 - **vertical-inverted** – only starts when scrolled to bottom
 - **horizontal** – only starts at left/right edge
@@ -339,7 +508,9 @@ const FloatingHeader = ({ focusedIndex, routes, overlayAnimation }) => {
 
   return (
     <Animated.View style={[styles.header, style]}>
-      <Text>Screen {focusedIndex + 1} of {routes.length}</Text>
+      <Text>
+        Screen {focusedIndex + 1} of {routes.length}
+      </Text>
     </Animated.View>
   );
 };
@@ -351,7 +522,7 @@ const FloatingHeader = ({ focusedIndex, routes, overlayAnimation }) => {
     overlayMode: "float",
     overlayShown: true,
   }}
-/>
+/>;
 ```
 
 ### Screen Overlay
@@ -371,15 +542,15 @@ An overlay that moves with screen content:
 
 ### Overlay Props
 
-| Prop | Description |
-|------|-------------|
-| `focusedRoute` | Currently focused route |
-| `focusedIndex` | Index of focused screen |
-| `routes` | All routes in the stack |
-| `overlayOptions` | Custom options passed from screen |
-| `navigation` | Navigation prop |
-| `overlayAnimation` | Animation values for overlay |
-| `screenAnimation` | Animation values for screens |
+| Prop               | Description                                               |
+| ------------------ | --------------------------------------------------------- |
+| `focusedRoute`     | Currently focused route                                   |
+| `focusedIndex`     | Index of focused screen                                   |
+| `routes`           | All routes in the stack                                   |
+| `meta`             | Custom metadata passed from screen options                |
+| `navigation`       | Navigation prop                                           |
+| `overlayAnimation` | Animation values with `progress` accumulated across stack |
+| `screenAnimation`  | Animation values for the current focused screen           |
 
 ### Passing Custom Data
 
@@ -387,16 +558,16 @@ An overlay that moves with screen content:
 <Stack.Screen
   options={{
     overlay: MyOverlay,
-    overlayOptions: {
+    meta: {
       title: "Step 1",
       showProgress: true,
     },
   }}
-/>
+/>;
 
 // In overlay
-const MyOverlay = ({ overlayOptions }) => {
-  return <Text>{overlayOptions.title}</Text>;
+const MyOverlay = ({ meta }) => {
+  return <Text>{meta?.title}</Text>;
 };
 ```
 
@@ -404,13 +575,13 @@ const MyOverlay = ({ overlayOptions }) => {
 
 ## Transition Components
 
-| Component | Description |
-|-----------|-------------|
-| `Transition.View` | Animated view, supports `styleId` and `sharedBoundTag` |
-| `Transition.Pressable` | Pressable with bounds measurement on press |
-| `Transition.ScrollView` | ScrollView with gesture coordination |
-| `Transition.FlatList` | FlatList with gesture coordination |
-| `Transition.MaskedView` | For clipping during shared element transitions |
+| Component               | Description                                            |
+| ----------------------- | ------------------------------------------------------ |
+| `Transition.View`       | Animated view, supports `styleId` and `sharedBoundTag` |
+| `Transition.Pressable`  | Pressable with bounds measurement on press             |
+| `Transition.ScrollView` | ScrollView with gesture coordination                   |
+| `Transition.FlatList`   | FlatList with gesture coordination                     |
+| `Transition.MaskedView` | For clipping during shared element transitions         |
 
 ### Creating Custom Components
 
@@ -479,10 +650,12 @@ transitionSpec: {
 
 ## Masked View Setup
 
-Required for `SharedIGImage` and `SharedAppleMusic` presets.
+Required for `SharedIGImage` and `SharedAppleMusic` presets. The masked view creates the "reveal" effect where content appears to expand from the shared element.
 
 > **Note**: Requires native code. Will not work in Expo Go.
 
+### Installation
+
 ```bash
 # Expo
 npx expo install @react-native-masked-view/masked-view
@@ -492,18 +665,100 @@ npm install @react-native-masked-view/masked-view
 cd ios && pod install
 ```
 
-Wrap destination screen content:
+### Complete Example
+
+Here's a full example showing how to set up an Apple Music-style shared element transition:
+
+**1. Source Screen** – Tag pressable elements with `sharedBoundTag`:
 
 ```tsx
-export default function DetailScreen() {
+// app/index.tsx
+import { router } from "expo-router";
+import { View } from "react-native";
+import Transition from "react-native-screen-transitions";
+
+export default function HomeScreen() {
   return (
-    <Transition.MaskedView style={{ flex: 1 }}>
-      {/* screen content */}
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <Transition.Pressable
+        sharedBoundTag="album-art"
+        style={{
+          width: 200,
+          height: 200,
+          backgroundColor: "#1DB954",
+          borderRadius: 12,
+        }}
+        onPress={() => {
+          router.push({
+            pathname: "/details",
+            params: { sharedBoundTag: "album-art" },
+          });
+        }}
+      />
+    </View>
+  );
+}
+```
+
+**2. Destination Screen** – Wrap content with `MaskedView` and match the `sharedBoundTag`:
+
+```tsx
+// app/details.tsx
+import { useLocalSearchParams } from "expo-router";
+import Transition from "react-native-screen-transitions";
+
+export default function DetailsScreen() {
+  const { sharedBoundTag } = useLocalSearchParams<{ sharedBoundTag: string }>();
+
+  return (
+    <Transition.MaskedView style={{ flex: 1, backgroundColor: "#121212" }}>
+      <Transition.View
+        sharedBoundTag={sharedBoundTag}
+        style={{
+          backgroundColor: "#1DB954",
+          width: 400,
+          height: 400,
+          alignSelf: "center",
+          borderRadius: 12,
+        }}
+      />
+      {/* Additional screen content */}
     </Transition.MaskedView>
   );
 }
 ```
 
+**3. Layout** – Apply the shared element preset with dynamic `sharedBoundTag`:
+
+```tsx
+// app/_layout.tsx
+import Transition from "react-native-screen-transitions";
+import { Stack } from "./stack";
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" />
+      <Stack.Screen
+        name="details"
+        options={({ route }) => ({
+          ...Transition.Presets.SharedAppleMusic({
+            sharedBoundTag: route.params?.sharedBoundTag ?? "",
+          }),
+        })}
+      />
+    </Stack>
+  );
+}
+```
+
+### How It Works
+
+1. `Transition.Pressable` measures its bounds when pressed and stores them with the `sharedBoundTag`
+2. `Transition.View` on the destination screen registers as the target for that tag
+3. `Transition.MaskedView` clips the destination content to the animating shared element bounds
+4. The preset interpolates position, size, and the mask to create the seamless expand/collapse effect
+
 ---
 
 ## Native Stack
@@ -522,10 +777,10 @@ const Stack = createNativeStackNavigator();
 <Stack.Screen
   name="Detail"
   options={{
-    enableTransitions: true,  // Required to enable custom transitions
+    enableTransitions: true, // Required to enable custom transitions
     ...Transition.Presets.SlideFromBottom(),
   }}
-/>
+/>;
 ```
 
 ### Expo Router Setup
@@ -556,26 +811,27 @@ export const Stack = withLayoutContext<
 
 All standard `@react-navigation/native-stack` options are available, plus:
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `enableTransitions` | `boolean` | Enable custom transitions (sets presentation to transparent modal) |
-| `screenStyleInterpolator` | `ScreenStyleInterpolator` | Function that returns animated styles |
-| `transitionSpec` | `TransitionSpec` | Animation config for open/close |
-| `gestureEnabled` | `boolean` | Whether swipe-to-dismiss is allowed |
-| `gestureDirection` | `GestureDirection \| GestureDirection[]` | Allowed swipe directions |
-| `gestureVelocityImpact` | `number` | How much velocity affects dismissal |
-| `gestureResponseDistance` | `number` | Distance threshold for gesture |
-| `gestureDrivesProgress` | `boolean` | Whether gesture drives animation |
-| `gestureActivationArea` | `GestureActivationArea` | Where gesture can start |
+| Option                    | Type                                     | Description                                                        |
+| ------------------------- | ---------------------------------------- | ------------------------------------------------------------------ |
+| `enableTransitions`       | `boolean`                                | Enable custom transitions (sets presentation to transparent modal) |
+| `screenStyleInterpolator` | `ScreenStyleInterpolator`                | Function that returns animated styles                              |
+| `transitionSpec`          | `TransitionSpec`                         | Animation config for open/close                                    |
+| `gestureEnabled`          | `boolean`                                | Whether swipe-to-dismiss is allowed                                |
+| `gestureDirection`        | `GestureDirection \| GestureDirection[]` | Allowed swipe directions                                           |
+| `gestureVelocityImpact`   | `number`                                 | How much velocity affects dismissal                                |
+| `gestureResponseDistance` | `number`                                 | Distance threshold for gesture                                     |
+| `gestureDrivesProgress`   | `boolean`                                | Whether gesture drives animation                                   |
+| `gestureActivationArea`   | `GestureActivationArea`                  | Where gesture can start                                            |
+| `meta`                    | `Record<string, unknown>`                | Custom metadata for conditional animation logic                    |
 
 ### Renamed Native Options
 
 To avoid collisions with custom gesture options, some native options are renamed:
 
-| React Navigation | Renamed to |
-|------------------|------------|
-| `gestureDirection` | `nativeGestureDirection` |
-| `gestureEnabled` | `nativeGestureEnabled` |
+| React Navigation          | Renamed to                      |
+| ------------------------- | ------------------------------- |
+| `gestureDirection`        | `nativeGestureDirection`        |
+| `gestureEnabled`          | `nativeGestureEnabled`          |
 | `gestureResponseDistance` | `nativeGestureResponseDistance` |
 
 ### Limitations
@@ -587,9 +843,16 @@ To avoid collisions with custom gesture options, some native options are renamed
 
 ---
 
-## Known Issues
+## Migrating from Earlier Versions
+
+### Deprecated Props
+
+The following props are deprecated and will be removed in a future version:
 
-- **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.
+| Deprecated Prop         | Use Instead        |
+| ----------------------- | ------------------ |
+| `isActiveTransitioning` | `active.animating` |
+| `isDismissing`          | `active.closing`   |
 
 ---
 

package/lib/commonjs/blank-stack/components/overlay.js

@@ -69,7 +69,7 @@ const OverlayHost = ({
     screenAnimation,
     focusedRoute: focusedScene.route,
     focusedIndex: optimisticActiveIndex,
-    overlayOptions: focusedScene.descriptor.options.overlayOptions,
+    meta: focusedScene.descriptor.options.meta,
     navigation: scene.descriptor.navigation
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {

package/lib/commonjs/blank-stack/components/overlay.js.map

@@ -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","overlayOptions","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":"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","ignoreList":[]}
+{"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":"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","ignoreList":[]}