react-native-screen-transitions

react-native-screen-transitions provides a customizable API for building advanced screen animations in React Native. Key capabilities include:

• Animation Control: Full control over screen enter, exit, and gesture-driven states.
• Shared Elements: Shared element and fullscreen navigation zoom transitions using the Bounds API.
• Sheets: Snap-point sheets with coordination for gesture-aware ScrollView and FlatList.
• Transition Slots: Dedicated slots for content, backdrop, surface, and custom tagged elements.
• Presets: Built-in patterns for common modal, card, and shared-transition animations.
• Navigation Integration: Supports Blank stack, native stack, and Expo Router.

react-native-screen-transitions is a React Navigation transition toolkit designed for high-fidelity motion in React Native. It allows developers to move beyond platform defaults to build:

• Custom push and dismiss animations
• Gesture-driven cards and sheets
• Snap-point flows
• Floating overlays
• Bounds-driven navigation zoom and shared-transition style motion

The library leverages React Navigation's JS stack, react-native-reanimated, and react-native-gesture-handler to achieve smooth, 60 fps transitions on both Android and iOS.

A Blank Stack is a highly customizable navigator designed for complex animation and gesture systems. It provides the transition runtime but does not impose a visual language, headers, or chrome, allowing you to define your own design system and motion.

Use Blank Stack when you need:

• Custom screen interpolators
• Gestures
• Snap sheets
• Bounds transitions
• Navigation zoom
• Overlays

It is the preferred path for new embedded and independent flows.

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>

Choosing between reveal and zoom depends on how you want the destination content to behave:

• Use zoom when the matched element should float above the transition and the background content should scale behind it.
• Use reveal when the destination content itself should grow out of the source and remain clipped by a navigation mask during the handoff.

The v4 experimental architecture uses a 'Standard Navigator' approach called Blank Stack. This allows a single transition navigator to integrate with both React Navigation and Expo Router via host-specific entry points.

There are two primary ways to use Screen Transitions:

1. Blank Stack: The default choice when you want Screen Transitions to drive the entire stack. It replaces the standard stack navigator.
2. withScreenTransitions adapter: Used when you want to wrap an existing native stack. This allows you to opt individual screens into Screen Transitions animations while retaining native-stack behavior for the rest of the stack.

Shadowing occurs when a child screen and an ancestor both claim the same direction. The child screen wins the claim for that direction, preventing the ancestor from reacting to the same drag.

Key behaviors:

• Only the topmost route in a child navigator registers a shadowing claim.
• Once a child screen starts dismissing, the ancestor is allowed to react to the gesture again.

Overlays are stack-relative. If a screen defines an overlay, it floats through the rest of that stack until a higher owner takes over or the stack unwinds.

• Blank Stack: Supports overlays directly and is the default starting point for overlay implementation.
• Native Stack: Supports overlays on transitioned screens.

The Transition.Boundary component is the primary way to define boundaries for transitions. It replaces the deprecated Transition.Boundary.View and Transition.Boundary.Trigger aliases.

• Passive Boundary: Omit the onPress prop. Use this for elements that only need to measure and participate in the transition (e.g., a placeholder or a destination target).
• Pressable Boundary: Include the onPress prop. Use this for elements that should trigger a navigation event (e.g., a button or a card).

// Passive boundary
<Transition.Boundary id="avatar">
  <Image source={avatar} style={styles.avatar} />
</Transition.Boundary>

// Pressable boundary
<Transition.Boundary
  id="avatar"
  onPress={() => navigation.push("Profile")}
>
  <Image source={avatar} style={styles.avatar} />
</Transition.Boundary>

Boundary measurement no longer relies on the screen origin provider, which prevents issues where transformed parent layouts (e.g., using translateY) would cause destination measurements to be offset.

Destinations now initially render without transition styles so Bounds can measure their actual layout. Once source and destination measurements are ready, the library applies transition styles and starts the animation. This requires no configuration changes.