Skip to main content
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

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 ?? "",
    }),
  })}
/>