### Verify Setup with Basic Navigator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/installation.mdx

A basic React Native component demonstrating the setup. This example uses `createBlankStackNavigator` and `Transition.Presets.SlideFromBottom` to verify the installation.

```tsx
import Transition from "react-native-screen-transitions";
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator();

export function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name="Detail"
        component={DetailScreen}
        options={{
          ...Transition.Presets.SlideFromBottom(),
        }}
      />
    </Stack.Navigator>
  );
}
```

--------------------------------

### Install react-native-screen-transitions

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/README.md

Install the main package using npm.

```bash
npm install react-native-screen-transitions
```

--------------------------------

### Source Setup with Transition.Boundary.Trigger

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/reveal.mdx

Mark the source element with Transition.Boundary.Trigger and pass the reveal id through navigation params. This sets up the starting point for the reveal transition.

```tsx
import Transition from "react-native-screen-transitions";

<Transition.Boundary.Trigger
  id={item.id}
  onPress={() => {
    navigation.navigate("Detail", { revealId: item.id });
  }}>
  <Image source={item.image} style={styles.thumbnail} />
</Transition.Boundary.Trigger>
```

--------------------------------

### Install Dependencies with Bun

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

Install project dependencies from the repository root using Bun.

```sh
bun install
```

--------------------------------

### Install react-native-screen-transitions

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/installation.mdx

Use your preferred package manager to install the main package. Available for npm, yarn, pnpm, and bun.

```npm
npm install react-native-screen-transitions
```

```yarn
yarn add react-native-screen-transitions
```

```pnpm
pnpm add react-native-screen-transitions
```

```bun
bun add react-native-screen-transitions
```

--------------------------------

### Transition.FlatList Example

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Shows how to integrate `Transition.FlatList` to provide gesture-aware behavior to list content, similar to `Transition.ScrollView`.

```tsx
<Transition.FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
/>
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/README.md

Install the necessary peer dependencies for react-native-screen-transitions.

```bash
npm install react-native-reanimated react-native-gesture-handler \
  @react-navigation/native @react-navigation/native-stack \
  @react-navigation/elements react-native-screens \
  react-native-safe-area-context
```

--------------------------------

### Install Peer Dependencies with Expo

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/installation.mdx

If you are using Expo, prefer `expo install` for managing peer dependencies.

```bash
npx expo install react-native-reanimated react-native-gesture-handler \
  @react-navigation/native @react-navigation/native-stack \
  @react-navigation/elements react-native-screens \
  react-native-safe-area-context
```

--------------------------------

### Transition.Boundary.View Example

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Example of using `Transition.Boundary.View` as a passive wrapper for geometry registration, typically used on the destination side or lower-level source side.

```tsx
<Transition.Boundary.View id="hero">
  <Image source={heroImage} style={styles.hero} />
</Transition.Boundary.View>
```

--------------------------------

### Destination Setup with Transition.Boundary.View

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/reveal.mdx

The destination screen must render a matching Transition.Boundary.View for the same id. This boundary acts as the target container for the reveal animation.

```tsx
function DetailScreen() {
  return (
    <Transition.Boundary.View id={item.id}>
      <Image source={item.image} style={styles.hero} />
    </Transition.Boundary.View>
  );
}
```

--------------------------------

### Install iOS Pods for Bare Projects

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/installation.mdx

For bare React Native projects, after changing dependencies, navigate to the `ios` directory and run `pod install` to link native dependencies.

```bash
cd ios && pod install
```

--------------------------------

### Applying Transition Presets and Specs

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Configure screen transitions using Transition.Presets and Transition.Specs within stack navigator options. This example applies a 'SlideFromBottom' preset and customizes open and close transition specs.

```tsx
<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    ...Transition.Presets.SlideFromBottom(),
    transitionSpec: {
      open: Transition.Specs.DefaultSpec,
      close: Transition.Specs.FlingSpec,
    },
  }}
/>
```

--------------------------------

### Transition.ScrollView Example

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Demonstrates how to use `Transition.ScrollView` to make scrollable content participate in the scroll registry and gesture handoff, useful within gesture-driven screens.

```tsx
<Transition.ScrollView showsVerticalScrollIndicator={false}>
  <Content />
</Transition.ScrollView>
```

--------------------------------

### Transition.View Example

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Shows how to use `Transition.View` for non-pressable elements that require transition-aware styling, targeting elements with a specific `styleId`.

```tsx
<Transition.View styleId="hero-title">
  <Text>Title</Text>
</Transition.View>
```

--------------------------------

### Basic Blank Stack Navigator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/stack-types.mdx

Demonstrates the basic setup of a Blank Stack Navigator with a Home and Detail screen, including custom transition options for the Detail screen.

```tsx
const Stack = createBlankStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    options={{
      ...Transition.Presets.SlideFromBottom(),
      gestureEnabled: true,
    }}
  />
</Stack.Navigator>
```

--------------------------------

### Configure Screen Transition Options

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/overview.mdx

Use screen options to define how a specific screen behaves during navigation transitions. This example shows how to apply a 'SlideFromBottom' preset to the 'Detail' screen.

```tsx
import Transition from "react-native-screen-transitions";
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name="Detail"
        component={DetailScreen}
        options={{
          ...Transition.Presets.SlideFromBottom(),
        }}
      />
    </Stack.Navigator>
  );
}
```

--------------------------------

### Navigation Setup with navigation.reveal()

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/reveal.mdx

Enable navigationMaskEnabled on the destination screen and call navigation.reveal() from its screenStyleInterpolator. The id is read from active route params.

```tsx
<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    navigationMaskEnabled: true,
    gestureEnabled: true,
    gestureDirection: ["vertical", "horizontal"],
    gestureProgressMode: "freeform",
    screenStyleInterpolator: ({ active, bounds }) => {
      "worklet";

      const id = active.route.params?.revealId;
      if (!id) return null;

      return bounds({ id }).navigation.reveal({
        borderRadius: 58,
        borderContinuous: true,
        maxSensitivity: 0.8,
        velocityDepth: 0.5,
      });
    },
  }}
/>
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/installation.mdx

Install the necessary peer dependencies for the package to function correctly. This includes libraries like react-native-reanimated and react-navigation components. Available for npm, yarn, pnpm, and bun.

```npm
npm install react-native-reanimated react-native-gesture-handler \
  @react-navigation/native @react-navigation/native-stack \
  @react-navigation/elements react-native-screens \
  react-native-safe-area-context
```

```yarn
yarn add react-native-reanimated react-native-gesture-handler \
  @react-navigation/native @react-navigation/native-stack \
  @react-navigation/elements react-native-screens \
  react-native-safe-area-context
```

```pnpm
pnpm add react-native-reanimated react-native-gesture-handler \
  @react-navigation/native @react-navigation/native-stack \
  @react-navigation/elements react-native-screens \
  react-native-safe-area-context
```

```bun
bun add react-native-reanimated react-native-gesture-handler \
  @react-navigation/native @react-navigation/native-stack \
  @react-navigation/elements react-native-screens \
  react-native-safe-area-context
```

--------------------------------

### Transition.Boundary.Trigger Example

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Demonstrates `Transition.Boundary.Trigger`, a pressable boundary wrapper that captures source geometry before an `onPress` event, recommended for navigation-driven source boundaries.

```tsx
<Transition.Boundary.Trigger
  id="hero"
  onPress={() => navigation.navigate("Detail")}
>
  <Image source={heroImage} style={styles.hero} />
</Transition.Boundary.Trigger>
```

--------------------------------

### Install Optional Masking Dependency

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/installation.mdx

Install the masking dependency if you are using features like `navigationMaskEnabled`, library-managed navigation zoom masking, or the legacy `Transition.MaskedView`. Available for npm, yarn, pnpm, and bun.

```npm
npm install @react-native-masked-view/masked-view
```

```yarn
yarn add @react-native-masked-view/masked-view
```

```pnpm
pnpm add @react-native-masked-view/masked-view
```

```bun
bun add @react-native-masked-view/masked-view
```

--------------------------------

### Configure Gesture Options for a Stack Screen

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/gestures.mdx

Use the `options` prop on `Stack.Screen` to enable and configure gestures for a screen. This example enables vertical swipe-to-dismiss.

```tsx
<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    screenStyleInterpolator,
  }}
/>
```

--------------------------------

### Create an Independent Blank Stack Navigator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/expo-router.mdx

This example demonstrates creating an independent blank stack navigator instance. The `independent` prop should be used for isolated navigation trees and not for typical route layouts.

```tsx
<BlankStack independent enableNativeScreens={false}>
  <BlankStack.Screen name="index" />
</BlankStack>
```

--------------------------------

### Transition.Pressable Example

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Illustrates the usage of `Transition.Pressable` for interactive elements that need transition-aware styling and event handling, using `styleId` for targeting.

```tsx
<Transition.Pressable styleId="cta" onPress={open}>
  <Text>Open</Text>
</Transition.Pressable>
```

--------------------------------

### Returning Styles for Screen Transition Layers

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/custom-animations.mdx

This example demonstrates how to return style objects for built-in layers like 'content', 'backdrop', and 'surface', as well as custom elements identified by 'styleId'. It shows how to apply styles and props to these layers.

```tsx
return {
  content: {
    style: { opacity: 1 },
  },
  backdrop: {
    style: { opacity: 0.4 },
  },
  surface: {
    style: { borderRadius: 24 },
    props: { pointerEvents: "none" },
  },
  "hero-title": {
    style: { transform: [{ translateY: -8 }] },
  },
};
```

--------------------------------

### Set Initial Snap Point

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/snap-points.mdx

Specify the `initialSnapIndex` to control which detent the screen opens at. This example opens at the second detent (index 1), which corresponds to 0.5.

```tsx
<Stack.Screen
  name="sheet"
  component={SheetScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    snapPoints: [0.25, 0.5, 0.75, 1],
    initialSnapIndex: 1,
  }}
/>
```

--------------------------------

### Embedded Flow with Regular Views Setup

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/independent-stacks.mdx

For embedded flows requiring regular view layering, use both `independent` and `enableNativeScreens={false}`. This setup provides predictable view behavior for nested flows and custom surfaces.

```tsx
<Stack.Navigator independent enableNativeScreens={false}>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
```

--------------------------------

### Static API for Blank Stack Navigator Configuration

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/independent-stacks.mdx

Configure the blank stack navigator using its static factory form, specifying options like `independent`, `enableNativeScreens`, and `screens` directly during creation. This allows for a declarative setup of the navigator and its screens.

```tsx
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator({
  independent: true,
  enableNativeScreens: false,
  screens: {
    Home: HomeScreen,
    Detail: DetailScreen,
  },
});
```

--------------------------------

### Independent Embedded Flow Setup

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/independent-stacks.mdx

Configure an independent embedded flow by enabling the `independent` option. This ensures the flow manages its own navigation state separately from the parent navigation tree.

```tsx
<Stack.Navigator independent>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
```

--------------------------------

### Creating a Stack Navigator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Demonstrates how to create a stack navigator using `createBlankStackNavigator` and configure screen transitions using `Transition.Presets.SlideFromBottom()` in screen options.

```tsx
const Stack = createBlankStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    options={{
      ...Transition.Presets.SlideFromBottom(),
    }}
  />
</Stack.Navigator>
```

--------------------------------

### Basic Stack Navigator with Overlays

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/overlays.mdx

Set up a stack navigator where multiple screens are configured to display an overlay. The overlay will persist through the stack as long as `overlayShown` is true.

```tsx
<Stack.Navigator>
  <Stack.Screen
    name="index"
    component={IndexScreen}
    options={{
      overlay: TabBarOverlay,
      overlayShown: true,
    }}
  />

  <Stack.Screen
    name="second"
    component={SecondScreen}
    options={{
      overlay: TabBarOverlay,
      overlayShown: true,
    }}
  />

  <Stack.Screen
    name="third"
    component={ThirdScreen}
    options={{
      overlay: TabBarOverlay,
      overlayShown: true,
    }}
  />
</Stack.Navigator>
```

--------------------------------

### Build the Library with Bun

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

Compile the library using the 'build' script before running the e2e application.

```sh
bun run build
```

--------------------------------

### Enable Navigation Mask with Zoom

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/navigation-zoom.mdx

Enable navigationMaskEnabled for masked reveal behavior during navigation handoff. Ensure @react-native-masked-view/masked-view is installed.

```tsx
<Stack.Screen
  name="[id]"
  options={{
    navigationMaskEnabled: Platform.OS === "ios",
    screenStyleInterpolator: ({ bounds }) => {
      "worklet";
      return bounds({ id: "hero" }).navigation.zoom();
    },
  }}
/>
```

--------------------------------

### Using Transition.Boundary.Target

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Use Transition.Boundary.Target when the measured element is nested inside the owner. It inherits the surrounding boundary owner and changes which descendant gets measured.

```tsx
<Transition.Boundary.Trigger id={item.id} onPress={openItem} style={styles.row}>
  <Transition.Boundary.Target style={styles.artTarget}>
    <Image source={item.image} style={styles.artwork} />
  </Transition.Boundary.Target>

  <View style={styles.copy}>
    <Text>{item.title}</Text>
  </View>
</Transition.Boundary.Trigger>
```

--------------------------------

### Run Quality Checks

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

Execute linting, type checking, and unit tests from the repository root.

```sh
# From repo root
bun run lint       # biome check
bun run typecheck  # tsc --noEmit
bun test           # unit tests
```

--------------------------------

### Default Blank Stack Navigator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/independent-stacks.mdx

Use the default blank stack navigator when the stack is a part of your main app navigation. No specific options are required for this setup.

```tsx
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
```

--------------------------------

### Configure Overlay on Screen Options

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/overlays.mdx

Configure an overlay for a screen using the `overlay` and `overlayShown` options within `Stack.Screen`. This sets up the screen to display a persistent UI layer.

```tsx
<Stack.Screen
  name="index"
  component={HomeScreen}
  options={{
    overlay: TabBarOverlay,
    overlayShown: true,
  }}
/>
```

--------------------------------

### Implement Navigation Mask Layers

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/surface-slots.mdx

Use reserved IDs to control the masked content container and the mask element for custom screen transitions. Ensure `@react-native-masked-view/masked-view` is installed.

```tsx
import {
  NAVIGATION_MASK_CONTAINER_STYLE_ID,
  NAVIGATION_MASK_ELEMENT_STYLE_ID,
} from "react-native-screen-transitions";

<Stack.Screen
  name="Sheet"
  component={SheetScreen}
  options={{
    navigationMaskEnabled: true,
    screenStyleInterpolator: ({ current, progress }) => {
      "worklet";

      const { height } = current.layouts.screen;
      const sheetHeight = interpolate(progress, [0, 1], [height * 0.6, height]);

      return {
        [NAVIGATION_MASK_CONTAINER_STYLE_ID]: {
          style: {
            transform: [{ translateY: height - sheetHeight }],
          },
        },
        [NAVIGATION_MASK_ELEMENT_STYLE_ID]: {
          style: {
            width: "100%",
            height: sheetHeight,
            borderRadius: interpolate(progress, [0, 1], [32, 0]),
            backgroundColor: "white",
          },
        },
      };
    },
  }}
/>
```

--------------------------------

### Enabling Initial Mount Animation

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/caveats.mdx

This experimental option allows the first screen in a stack to animate from its closed state on initial mount, which is not the default behavior. Use with caution as it may change in future versions.

```tsx
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    experimental_animateOnInitialMount: true,
  }}
/>
```

--------------------------------

### Define Basic Snap Points

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/snap-points.mdx

Use `snapPoints` to define discrete positions for a sheet. Each number represents a fraction of the screen height. `initialSnapIndex` sets the starting detent.

```tsx
<Stack.Screen
  name="sheet"
  component={SheetScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    snapPoints: [0.4, 0.7, 1],
    initialSnapIndex: 0,
  }}
/>
```

--------------------------------

### Bounds-Driven Detail Transition Trigger

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/quick-start.mdx

This snippet demonstrates how to set up a trigger for a bounds-driven transition on the home screen. It uses `Transition.Boundary.Trigger` to link a source element (an Image) to its destination on the detail screen.

```tsx
// Home screen
<Transition.Boundary.Trigger
  id="hero"
  onPress={() => navigation.navigate("Detail")}
>
  <Image source={heroImage} style={{ width: 120, height: 160 }} />
</Transition.Boundary.Trigger>

// Detail screen
<Transition.Boundary.View id="hero">
  <Image source={heroImage} style={{ width: "100%", height: 360 }} />
</Transition.Boundary.View>
```

--------------------------------

### Build Library with bob

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

Compile the library to generate CommonJS, ESM, and type definitions using 'bob build'.

```sh
bob build
```

--------------------------------

### Accessing Measured Bounds Data

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/updating-to-3-6.mdx

Use scoped bounds helper methods to get measured data and link information for transitions. This is useful for accessing raw computed values.

```tsx
const hero = bounds({ id: "hero" });
const measured = hero.getMeasured(current.route.key);
const link = hero.getLink();
const initialSource = link?.initialSource;
const initialDestination = link?.initialDestination;
const raw = link?.compute({ method: "size", raw: true });
```

--------------------------------

### Run the E2E App on iOS

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

Navigate to the e2e application directory and run the iOS simulator.

```sh
cd apps/e2e
npx expo run:ios
```

--------------------------------

### Read Current Snap Index

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/snap-points.mdx

Access `current.snapIndex` within `screenStyleInterpolator` to get the currently selected detent. This can be used to dynamically style elements based on the sheet's position.

```tsx
screenStyleInterpolator: ({ current }) => {
  "worklet";

  return {
    content: {
      style: {
        borderTopLeftRadius: interpolate(
          current.snapIndex,
          [0, 1, 2],
          [28, 20, 0],
          "clamp"
        ),
        borderTopRightRadius: interpolate(
          current.snapIndex,
          [0, 1, 2],
          [28, 20, 0],
          "clamp"
        ),
      },
    },
  };
};
```

--------------------------------

### Custom Screen Style Interpolator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/custom-animations.mdx

Define custom animations by returning animated styles from `screenStyleInterpolator`. This example shows how to animate the horizontal translation of the screen content based on the transition progress.

```tsx
import { interpolate } from "react-native-reanimated";
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator();

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "horizontal",
    screenStyleInterpolator: ({ progress, current }) => {
      "worklet";
      const width = current.layouts.screen.width;

      return {
        content: {
          style: {
            transform: [
              {
                translateX: interpolate(progress, [0, 1, 2], [width, 0, -width * 0.3]),
              },
            ],
          },
        },
      };
    },
  }}
/>
```

--------------------------------

### Use Blank Stack for Embedded Flows

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/migrating-to-3-4.mdx

For embedded or independent flows, move work to `createBlankStackNavigator` as `createComponentStackNavigator()` is now the legacy path. Blank stack covers this use case directly and is the preferred path.

```javascript
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator();

<Stack.Navigator independent enableNativeScreens={false}>
  {/* embedded flow */}
</Stack.Navigator>
```

--------------------------------

### Using the bounds() Accessor for Styling

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/shared-elements.mdx

Inside screenStyleInterpolator, the bounds() accessor returns style props for direct spreading into slots. This example shows how to apply transform and opacity based on progress and focus.

```tsx
screenStyleInterpolator: ({ bounds, progress, focused }) => {
  "worklet";

  return {
    hero: {
      ...bounds({
        id: "hero",
        method: "transform",
      }),
      opacity: focused
        ? interpolate(progress, [0, 1], [0, 1], "clamp")
        : interpolate(progress, [1, 2], [1, 0], "clamp"),
    },
  };
};
```

--------------------------------

### Trigger Screen Transition with Transition.Boundary

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/expo-router.mdx

This snippet shows how to use `Transition.Boundary.Trigger` to initiate a navigation action, such as `router.push('/detail')`, which can then be handled by a corresponding `Transition.Boundary.View` on the destination screen.

```tsx
import { router } from "expo-router";
import Transition from "react-native-screen-transitions";

<Transition.Boundary.Trigger
  id="hero"
  onPress={() => router.push("/detail")}
>
  <Card />
</Transition.Boundary.Trigger>
```

--------------------------------

### Use a Preset Transition in Stack Screen Options

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/presets.mdx

Apply a preset transition directly within the options of a Stack.Screen component. Ensure the preset is correctly imported.

```tsx
<Stack.Screen
  name="Detail"
  options={{
    ...Transition.Presets.SlideFromBottom(),
  }}
/>
```

--------------------------------

### Overlay Component with Animation

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/overlays.mdx

Example of a custom overlay component that uses `react-native-reanimated` to animate its opacity based on the screen transition progress. It displays the focused route name and its index within the stack.

```tsx
import Animated, {
  interpolate,
  useAnimatedStyle,
} from "react-native-reanimated";
import { 
  type OverlayProps,
  useScreenAnimation,
} from "react-native-screen-transitions";

function TabBarOverlay({
  focusedRoute,
  focusedIndex,
  routes,
  navigation,
}: OverlayProps) {
  const animation = useScreenAnimation();

  const style = useAnimatedStyle(() => {
    const { stackProgress } = animation.value;

    return {
      opacity: interpolate(stackProgress, [1, 2], [1, 0.3], "clamp"),
    };
  });

  return (
    <Animated.View style={style}>
      <Text>{focusedRoute.name}</Text>
      <Text>
        {focusedIndex + 1} / {routes.length}
      </Text>
    </Animated.View>
  );
}
```

--------------------------------

### Combine Independent and Disable Native Screens

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/independent-stacks.mdx

Combine `independent` and `enableNativeScreens={false}` for an embedded flow that requires an isolated navigation state and regular view rendering. This setup is common for nested flows and custom containers.

```tsx
const Stack = createBlankStackNavigator();

<Stack.Navigator independent enableNativeScreens={false}>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
```

--------------------------------

### Native Stack Adapter with Screen Transitions

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/stack-types.mdx

Demonstrates integrating react-navigation/native-stack with screen transitions. Custom transitions are enabled on screens where 'enableTransitions' is set to true.

```tsx
const NativeStack = createNativeStackNavigator();
const Stack = withScreenTransitions(NativeStack);

<Stack.Navigator>
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    options={{
      enableTransitions: true,
      ...Transition.Presets.SlideFromBottom(),
    }}
  />
</Stack.Navigator>
```

--------------------------------

### Getting Raw Bounds Geometry

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/shared-elements.mdx

Pass raw: true to the bounds() accessor to retrieve low-level geometry values instead of style props. The returned values depend on the specified method ('transform', 'size', or 'content').

```tsx
const raw = bounds({
  id: "hero",
  method: "transform",
  raw: true,
});
```

--------------------------------

### Import Core Transition Components

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/overview.mdx

Import necessary components from react-native-screen-transitions and @react-navigation/native-stack to enable custom screen transitions.

```tsx
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Transition, {
  withScreenTransitions,
} from "react-native-screen-transitions";
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
```

--------------------------------

### Custom Screen Style Interpolator

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/quick-start.mdx

Replace the default transition preset with a custom interpolator for full animation control. This example defines a custom interpolator using react-native-reanimated to control opacity and translateY for the content, and opacity for the backdrop.

```tsx
import { interpolate } from "react-native-reanimated";

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    transitionSpec: {
      open: Transition.Specs.DefaultSpec,
      close: Transition.Specs.DefaultSpec,
    },
    screenStyleInterpolator: ({
      progress,
      layouts: {
        screen: { height },
      },
    }) => {
      "worklet";
      return {
        content: {
          style: {
            opacity: interpolate(progress, [0, 1, 2], [0, 1, 0]),
            transform: [
              {
                translateY: interpolate(progress, [0, 1, 2], [height, 0, -height * 0.2]),
              },
            ],
          },
        },
        backdrop: {
          style: {
            opacity: interpolate(progress, [0, 1, 2], [0, 0.45, 0]),
          },
        },
      };
    },
  }}
/>
```

--------------------------------

### Recommended Boundary Pattern

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/shared-elements.mdx

Use Transition.Boundary.Trigger as the source and Transition.Boundary.View as the destination for navigation-driven flows. The Trigger captures bounds before the onPress callback.

```tsx
// Source screen
<Transition.Boundary.Trigger
  id="hero"
  onPress={() => navigation.navigate("Detail")}
>
  <Image source={heroImage} style={{ width: 120, height: 160 }} />
</Transition.Boundary.Trigger>

// Destination screen
<Transition.Boundary.View id="hero">
  <Image source={heroImage} style={{ width: "100%", height: 360 }} />
</Transition.Boundary.View>
```

--------------------------------

### Coexisting Gesture Directions

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/gesture-ownership.mdx

Demonstrates how a parent navigator can own one gesture direction (e.g., vertical) while a child navigator owns another (e.g., horizontal). This setup allows for distinct gesture behaviors at different levels of the navigation stack.

```tsx
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const RootStack = createBlankStackNavigator();
const DetailsStack = createBlankStackNavigator();

function DetailsNavigator() {
  return (
    <DetailsStack.Navigator>
      <DetailsStack.Screen name="List" component={ListScreen} />
      <DetailsStack.Screen
        name="Card"
        component={CardScreen}
        options={{
          gestureEnabled: true,
          gestureDirection: "horizontal",
        }}
      />
    </DetailsStack.Navigator>
  );
}

function AppNavigator() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="Home" component={HomeScreen} />
      <RootStack.Screen
        name="Details"
        component={DetailsNavigator}
        options={{
          gestureEnabled: true,
          gestureDirection: "vertical",
        }}
      />
    </RootStack.Navigator>
  );
}
```

--------------------------------

### Configure Screen for Custom Transitions

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/adapters.mdx

Set `enableTransitions` to `true` in the `options` for a screen to enable custom transitions. Configure `transitionSpec` for open and close animations, and optionally provide a `screenStyleInterpolator` for custom styling.

```tsx
<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    enableTransitions: true,
    gestureEnabled: true,
    transitionSpec: {
      open: Transition.Specs.DefaultSpec,
      close: Transition.Specs.DefaultSpec,
    },
    screenStyleInterpolator: () => {
      "worklet";

      return {
        content: {
          style: {
            // ...
          },
        },
      };
    },
  }}
/>;
```

--------------------------------

### Use Auto Snap Point for Content Sizing

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/snap-points.mdx

Use the string value `"auto"` in `snapPoints` to allow the sheet to size itself based on its content. This example sets the first detent to auto-size and the second to fill the screen.

```tsx
<Stack.Screen
  name="composer"
  component={ComposerScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    snapPoints: ["auto", 1],
    initialSnapIndex: 0,
  }}
/>
```

--------------------------------

### Importing Core APIs

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/transition-components.mdx

Imports all core APIs from the react-native-screen-transitions package, including Transition, helper functions, hooks, and constants. Also imports the createBlankStackNavigator from its subpath.

```tsx
import Transition,
  withScreenTransitions,
  snapTo,
  useHistory,
  useScreenAnimation,
  useScreenGesture,
  useScreenState,
  NAVIGATION_MASK_CONTAINER_STYLE_ID,
  NAVIGATION_MASK_ELEMENT_STYLE_ID,
  type ScreenStyleInterpolator,
  type ScreenTransitionConfig,
} from "react-native-screen-transitions";

import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
```

--------------------------------

### Configure Snap Sheet with Snap Points

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/gestures.mdx

Define a screen as a snap sheet by providing `snapPoints` and `initialSnapIndex`. This allows the screen to snap to specific positions. `gestureEnabled` controls dismissability at the minimum detent, and `gestureSnapLocked` can lock movement to the current detent.

```tsx
<Stack.Screen
  name="Sheet"
  component={SheetScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    snapPoints: [0.4, 0.7, 1],
    initialSnapIndex: 0,
  }}
/>
```

--------------------------------

### Conditionally Use Blank or Native Stack in Expo Router

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/expo-router.mdx

This example demonstrates how to conditionally render either a `BlankStack` or a `Stack` (native stack) navigator in an Expo Router layout based on a `stackType` variable. It also shows how to set navigator screen options.

```tsx
// app/[stackType]/_layout.tsx
import { BlankStack } from "@/layouts/blank-stack";
import { Stack } from "@/layouts/stack";

const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
const navigatorScreenOptions =
  stackType === "native-stack" ? { enableTransitions: true } : undefined;

<StackNavigator screenOptions={navigatorScreenOptions}>
  <StackNavigator.Screen name="index" />
  <StackNavigator.Screen name="detail" />
</StackNavigator>
```

--------------------------------

### Basic Zoom Transition

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/shared-elements.mdx

Use `navigation.zoom()` for navigation-style bounds transitions. This function builds an opinionated layer map for transitions.

```tsx
screenStyleInterpolator: ({ bounds }) => {
  "worklet";

  return bounds({ id: "hero" }).navigation.zoom();
};
```

--------------------------------

### Run navigation.zoom() in Destination Screen Options

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/navigation-zoom.mdx

Place the navigation.zoom() helper within the destination screen's screenStyleInterpolator. The boundary id can be sourced from various places like shared values or state management.

```tsx
import { makeMutable } from "react-native-reanimated";

const navigationZoomId = makeMutable<string | null>(null);

<Transition.Boundary.Trigger
  id={item.id}
  onPress={() => {
    navigationZoomId.value = item.id;
    navigation.navigate("Detail");
  }}
>
  <Image source={item.image} style={styles.artwork} />
</Transition.Boundary.Trigger>

<Stack.Screen
  name="[id]"
  options={{
    navigationMaskEnabled: Platform.OS === "ios",
    gestureEnabled: true,
    gestureDirection: ["vertical", "vertical-inverted", "horizontal"],
    gestureProgressMode: "freeform",
    screenStyleInterpolator: ({ bounds }) => {
      "worklet";
      const id = navigationZoomId.value;

      if (!id) {
        return null;
      }

      return bounds({ id }).navigation.zoom({
        borderRadius: 48,
      });
    },
  }}
/>
```

--------------------------------

### Run E2E App on Android

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

Navigate to the e2e application directory and run the Android emulator.

```sh
cd apps/e2e
npx expo run:android
```

--------------------------------

### Run E2E Tests with Maestro

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/CONTRIBUTING.md

After building the release version of the iOS app, run end-to-end tests using Maestro.

```sh
# E2e tests (requires Maestro CLI + iOS simulator)
cd apps/e2e
npx expo run:ios --configuration Release
maestro test .maestro/complete.yaml
```

--------------------------------

### Gesture Behavior Configuration

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/reveal.mdx

Configure gesture behavior for the reveal transition. `gestureProgressMode: "freeform"` allows the reveal container to respond to drag without directly owning the screen transition.

```tsx
options={{
  gestureEnabled: true,
  gestureDirection: ["vertical", "horizontal"],
  gestureProgressMode: "freeform",
}}
```

--------------------------------

### Use Blank Stack Navigator in Expo Router Layout

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/expo-router.mdx

Demonstrates how to use the `BlankStack` wrapper within an Expo Router layout file (`_layout.tsx`) to define screens and apply transition presets.

```tsx
// app/gestures/_layout.tsx
import Transition from "react-native-screen-transitions";
import { BlankStack } from "@/layouts/blank-stack";

export default function GesturesLayout() {
  return (
    <BlankStack>
      <BlankStack.Screen name="index" />
      <BlankStack.Screen
        name="sheet"
        options={{
          ...Transition.Presets.SlideFromBottom(),
        }}
      />
    </BlankStack>
  );
}
```

--------------------------------

### Wrap Native Stack Navigator with Screen Transitions

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/adapters.mdx

Import and use `withScreenTransitions` to adapt your native stack navigator for custom screen transitions. This allows specific screens to support custom transitions while retaining native-stack behavior.

```tsx
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Transition, {
  withScreenTransitions,
} from "react-native-screen-transitions";

const NativeStack = createNativeStackNavigator();
const Stack = withScreenTransitions(NativeStack);
```

--------------------------------

### Animate UI Based on Live Gesture Position

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/snap-points.mdx

Use `current.animatedSnapIndex` to create animations that follow the user's live gesture, including fractional values between detents. This is useful for interpolating styles like border radius.

```tsx
screenStyleInterpolator: ({ current }) => {
  "worklet";

  return {
    content: {
      style: {
        borderRadius: interpolate(
          current.animatedSnapIndex,
          [0, 1, 2],
          [28, 16, 0],
          "clamp"
        ),
      },
    },
  };
}
```

--------------------------------

### Configure Navigation Zoom Options

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/navigation-zoom.mdx

Use this snippet to configure options like borderRadius, target, and backgroundScale for navigation.zoom().

```tsx
return bounds({ id }).navigation.zoom({
  borderRadius: 48,
  target: "bound",
  backgroundScale: 0.96,
});
```

--------------------------------

### Configure Release Tuning for Gestures

Source: https://github.com/eds2002/react-native-screen-transitions/blob/main/packages/docs/src/content/docs/gestures.mdx

Adjust release velocity impact and scaling for gesture-driven transitions. Use gestureVelocityImpact to control dismissal, gestureSnapVelocityImpact for snap points, and gestureReleaseVelocityScale for spring feel.

```tsx
options={{
  gestureEnabled: true,
  gestureVelocityImpact: 0.3,
  gestureSnapVelocityImpact: 0.1,
  gestureReleaseVelocityScale: 1.5,
}}
```