Skip to main content
React Native Screen Transitions provides three navigator types for different use cases. Each has different capabilities and trade-offs. The default, recommended option. You define all animations via screenStyleInterpolator. 
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    options={{
      screenStyleInterpolator: ({ progress }) => {
        "worklet";
        return {
          contentStyle: {
            opacity: interpolate(progress, [0, 1, 2], [0, 1, 0]),
          },
        };
      },
    }}
  />
</Stack.Navigator>
Advantages:
  • Full animation control
  • Smooth gesture handling
  • Works in Expo Go
  • No native code required
  • Best performance for custom animations
Disadvantages:
  • You write all animations (no built-in defaults)
  • No native back button behavior on Android
Best for:
  • Custom animations
  • Prototyping
  • Fully controlled navigation

​
Native Stack

Wraps native iOS/Android navigation but allows customization via Reanimated. 
import { createNativeStackNavigator } from "react-native-screen-transitions/native-stack";

const Stack = createNativeStackNavigator();

<Stack.Navigator screenOptions={{ enableTransitions: true }}>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    options={{
      // Native back button works
      // Plus custom animations
      screenStyleInterpolator: ({ progress }) => {
        "worklet";
        return { contentStyle: { /* ... */ } };
      },
    }}
  />
</Stack.Navigator>
Important: Set enableTransitions: true to enable custom animations. Advantages:
  • Native back button behavior (Android)
  • Familiar iOS/Android feel
  • Can mix native + custom animations
  • Hardware-accelerated transitions
Disadvantages:
  • Delayed touch events on Android (native behavior)
  • beforeRemove listeners can cause edge cases
  • Rapid navigation may glitch
  • Requires native modules
  • More complex setup
Caveats:
  • Touch events are delayed while animating (native behavior)
  • navigation.beforeRemove() may fire at unexpected times
  • Navigating too quickly can cause state inconsistencies
  • Back button behavior varies by platform
Best for:
  • Apps that need native back button
  • Porting iOS/Android native code
  • Enterprise production apps

​
Component Stack (Experimental)

A standalone navigator without React Navigation context. Useful for embedded navigation or testing. 
import { createComponentStackNavigator } from "react-native-screen-transitions/component-stack";

const Stack = createComponentStackNavigator();

function EmbeddedNav() {
  return (
    <Stack.Navigator
      initialRoute="Home"
      screens={{
        Home: HomeScreen,
        Detail: DetailScreen,
      }}
    />
  );
}
Advantages:
  • No React Navigation required
  • Works standalone (testing, embedded views)
  • Lightweight
  • Full gesture control
Disadvantages:
  • No deep linking
  • State isolated from React Navigation
  • Touch events don’t pass through to underlying screens
  • Limited to internal navigation only
  • Not production-ready
Caveats:
  • No state synchronization with navigation state
  • Can’t navigate from outside (no ref access)
  • Limited debugging tools
  • Not suitable for app-level navigation
Best for:
  • Testing custom animations
  • Embedded navigation UI
  • Development and prototyping
  • Internal sub-navigation

​
Comparison Table

FeatureBlank StackNative StackComponent Stack
Custom animations✅ Full control✅ Full control✅ Full control
Presets✅ Available✅ Available✅ Available
Native back button❌ No✅ Yes❌ No
Gesture support✅ Full⚠️ Limited✅ Full
Expo Go compatible✅ Yes❌ No✅ Yes
React Navigation✅ Required✅ Required❌ Optional
Deep linking✅ Yes✅ Yes❌ No
Performance⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Native feel⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Setup complexitySimpleComplexVery Simple

​
Switching Between Stacks

​
From Blank to Native

If you need native back button behavior: 
// Before (Blank Stack)
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
const Stack = createBlankStackNavigator();

// After (Native Stack)
import { createNativeStackNavigator } from "react-native-screen-transitions/native-stack";
const Stack = createNativeStackNavigator();

// Your screen options remain the same
Screen options are compatible across stack types.

​
From Native to Blank

If you don’t need the native back button: 
// Before (Native Stack)
import { createNativeStackNavigator } from "react-native-screen-transitions/native-stack";

// After (Blank Stack)
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

​
Platform-Specific Setup

​
Blank Stack (All Platforms)

Works everywhere without additional setup. Use in Expo, managed, or bare React Native projects.

​
Native Stack

Requires native modules. Use in:
  • Bare React Native with autolinking
  • Expo with expo prebuild
  • EAS Build for managed Expo projects

​
Component Stack

Works anywhere. No platform-specific code needed.

​
Recommendation

Start with Blank Stack. It’s the most predictable and gives you full control. Migrate to Native Stack only if you specifically need platform-native behavior. 
// 1. Start here
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

// 2. If you need native back button, switch to:
import { createNativeStackNavigator } from "react-native-screen-transitions/native-stack";

// 3. For testing/embedded, use:
import { createComponentStackNavigator } from "react-native-screen-transitions/component-stack";

​
Next Steps