Presets Overview

Ready-made transition presets for common animation patterns

Presets provide ready-made screen transitions that cover common animation patterns. All presets return a ScreenTransitionConfig object that can be spread into screen options.

Usage

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

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

Available Presets

Basic Transitions

These presets provide simple, gesture-enabled transitions without shared elements.

SlideFromTop

Slides in from top with vertical swipe-to-dismiss

SlideFromBottom

Slides in from bottom (modal-style) with vertical swipe-to-dismiss

ZoomIn

Scales in with fade effect

DraggableCard

Multi-directional drag with scaling effect

ElasticCard

Elastic drag with backdrop overlay

Shared Element Transitions

These presets use the Bounds API for seamless shared element animations between screens.

Shared element presets require @react-native-masked-view/masked-view. See Masked View Setup for installation instructions.

SharedIGImage

Instagram-style shared image transition with backdrop

SharedAppleMusic

Apple Music-style shared element with platform shadows

SharedXImage

X (Twitter)-style image transition with dynamic direction

Customizing Presets

All presets accept a config object to override default behaviors:

Transition.Presets.SlideFromBottom({
  gestureEnabled: false,  // Disable swipe-to-dismiss
  transitionSpec: {
    open: { stiffness: 500, damping: 50, mass: 2 },
    close: { stiffness: 500, damping: 50, mass: 2 },
  },
})

Return Type

All preset functions return a ScreenTransitionConfig object with these properties:

enableTransitions · boolean · default: "true"

Enables custom transitions (required for Native Stack)

gestureEnabled · boolean

Enables swipe-to-dismiss gesture

gestureDirection · GestureDirection

Direction(s) for dismiss gesture

screenStyleInterpolator · function

Function that interpolates animation values to styles

transitionSpec · TransitionSpec

Spring configuration for open and close animations

Common Patterns

Modal-Style Screens

For modal presentations that slide up from the bottom:

<Stack.Screen
  name="Modal"
  options={{
    ...Transition.Presets.SlideFromBottom(),
    presentation: "modal",
  }}
/>

Full-Screen Overlays

For full-screen takeovers with zoom effect:

<Stack.Screen
  name="Fullscreen"
  options={{
    ...Transition.Presets.ZoomIn(),
  }}
/>

Shared Element Flows

For image galleries or detail views:

<Stack.Screen
  name="ImageDetail"
  options={({ route }) => ({
    ...Transition.Presets.SharedIGImage({
      sharedBoundTag: route.params?.imageId ?? "",
    }),
  })}
/>