Home
Categories
Animation
Gesture-Based Screen Transitions in React Native

Gesture-Based Screen Transitions in React Native

eds2002 First listed on July 29, 2025
Live Demo Download Source Code

Description:

react-native-screen-transitions is a library that provides customizable screen transition animations for React Native applications.

The library is built to integrate with popular navigation solutions like expo-router and react-navigation. You can use it to implement a variety of animated transitions between screens.

It supports swipe gestures for dismissing screens, a collection of predefined animation presets for quick implementation, and the ability to define completely custom animations.

Features

  • Animation Presets. Apply built-in transitions like SlideFromTop or SlideFromBottom with a single line of code.
  • Custom Animations. Define your own screen transitions using a screenStyleInterpolator for full control over the animation behavior.
  • Gesture Support. Enable swipe-to-dismiss gestures on screens, with automatic handling for scrollable content.
  • Navigation Integration. Works directly with expo-router and react-navigation through a transition-aware stack navigator.
  • Nested Stacks. Apply transitions to entire nested navigation stacks, treating them as a single animatable view.
  • Scroll-Aware Gestures. Use transition-aware ScrollView and FlatList components that correctly handle swipe gestures without conflicting with scrolling.

See It In Action

Use Cases

  • Implement a modal screen that slides up from the bottom and can be dismissed by swiping down.
  • Create a photo gallery where tapping an image transitions it to a full-screen view, which can then be swiped away.
  • Build a settings panel that slides in from the side over the current screen.
  • Design a card-based interface where each card animates into its own detail screen upon selection.

How To Use It

1. Add the package to your project using your preferred package manager.

npm install react-native-screen-transitions

2. Install the required peer dependencies.

npm install react-native-reanimated react-native-gesture-handler @react-navigation/native-stack

3. Wrap your application’s root in GestureHandlerRootView for gesture handling to work. The library provides a transition-aware stack navigator that you use in place of a standard one.

4. For a standard React Navigation setup, you import createTransitionableStackNavigator and build your navigator.

import { NavigationContainer } from '@react-navigation/native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Transition from 'react-native-screen-transitions';
const Stack = Transition.createTransitionableStackNavigator();
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen
            name="Details"
            component={ScreenDetails}
            options={{
              ...Transition.presets.SlideFromTop(),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

5. To use a preset, spread it into the options prop of the target screen. For the animation to apply correctly, the screen component’s root view must be wrapped with Transition.View.

// DetailsScreen.tsx
import Transition from 'react-native-screen-transitions';
import { View, Text } from 'react-native';
export default function DetailsScreen() {
  return (
    <Transition.View style={{ flex: 1 }}>
      <Text>Details Screen</Text>
    </Transition.View>
  );
}

6. To enable swipe gestures on a screen containing a list, use a transition-aware scrollable component. You also need to enable the gesture in the screen’s options.

// In your navigator
<Stack.Screen
  name="Gallery"
  component={GalleryScreen}
  options={{
    gestureEnabled: true,
    gestureDirection: 'vertical',
    ...Transition.presets.SlideFromBottom(),
  }}
/>
// GalleryScreen.tsx
import Transition from 'react-native-screen-transitions';
export default function GalleryScreen() {
  return (
    <Transition.ScrollView style={{ flex: 1 }}>
      {/* Your list content here */}
    </Transition.ScrollView>
  );
}

FAQs

Q: Why is my screen transition not working?
A: You must wrap the root component of any screen participating in a transition with <Transition.View>. Without this wrapper, the library cannot apply the animated styles to the screen.

Q: Can I use this library for web projects?
A: No, this package is designed specifically for iOS and Android. It has not been tested for web and is not intended for web use.

Q: How do I make a screen with a FlatList dismissible with a swipe?
A: You must use a transition-aware scrollable component. You can use the built-in Transition.FlatList or wrap your custom list component with Transition.createTransitionAwareScrollable. You also need to set gestureEnabled: true in the screen’s options.

Add Comment