Skip to main content

​
Overview

React-native-screen-transitions provides several specialized stack types for different navigation patterns. Each type optimizes for specific use cases.

​
Transition.Stack

The primary stack navigator for sequential screen navigation: 
<Transition.Stack
  screenStyleInterpolator={slideInterpolator}
  gestureEnabled
  gestureDirection="vertical"
>
  <Transition.Screen name="Home" component={HomeScreen} />
  <Transition.Screen name="Details" component={DetailsScreen} />
  <Transition.Screen name="Settings" component={SettingsScreen} />
</Transition.Stack>
Use for:
  • Push/pop navigation flow
  • Deep linking
  • Back button navigation
  • Standard mobile navigation patterns

​
Standalone Usage (NEW in 3.4)

Transition.Stack can now be used independently with options: 
<Transition.Stack
  independent={true}  // Don't inherit from parent navigator
  enableNativeScreens={false}  // Use regular Views instead of native screens
  screenStyleInterpolator={myInterpolator}
>
  {/* screens */}
</Transition.Stack>
Options:
  • independent?: boolean - Standalone operation without parent navigator context
  • enableNativeScreens?: boolean - Toggle between native screens and regular views

​
Transition.Modal

Modal navigator for overlay presentations: 
<Transition.Modal
  name="Modal"
  component={ModalScreen}
  options={{
    snapPoints: [0.5, 1],
    gestureEnabled: true,
    screenStyleInterpolator: modalInterpolator,
  }}
/>
Use for:
  • Bottom sheets
  • Fullscreen modals
  • Overlays with snap points
  • Dismissible screens

​
Snap Point Variations

// Two-point sheet
snapPoints={[0.5, 1]}

// Three-point paged sheet
snapPoints={[0.3, 0.7, 1]}

// Auto-sizing with fullscreen fallback
snapPoints={["auto", 1]}

// Minimum and maximum heights
snapPoints={[300, 800]}  // In pixels

​
Transition.NativeStack

Native-backed stack with enhanced platform features: 
<Transition.NativeStack
  screenOptions={{
    headerShown: true,
    headerBackVisible: true,
  }}
>
  <Transition.Screen name="Home" component={HomeScreen} />
  <Transition.Screen name="Details" component={DetailsScreen} />
</Transition.NativeStack>
Use for:
  • Native platform headers
  • Back button customization
  • Large title styling (iOS)
  • Status bar integration

​
Transition.BottomTabs

Tab navigator with animated transitions: 
<Transition.BottomTabs
  screenOptions={({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      const icons = {
        Home: 'home',
        Settings: 'cog',
      };
      return <Icon name={icons[route.name]} color={color} size={size} />;
    },
  })}
>
  <Transition.Screen
    name="Home"
    component={HomeStack}
    options={{ tabBarLabel: 'Home' }}
  />
  <Transition.Screen
    name="Settings"
    component={SettingsStack}
    options={{ tabBarLabel: 'Settings' }}
  />
</Transition.BottomTabs>
Use for:
  • Bottom tab navigation
  • Top tab navigation
  • Horizontal tab switching
  • Multi-tab apps

​
Transition.Drawer

Drawer navigator with slide animations: 
<Transition.Drawer
  screenOptions={{
    headerShown: true,
  }}
>
  <Transition.Screen name="Home" component={HomeScreen} />
  <Transition.Screen name="Settings" component={SettingsScreen} />
  <Transition.Screen name="Help" component={HelpScreen} />
</Transition.Drawer>
Use for:
  • Side menu navigation
  • App drawer
  • Navigation list
  • Multi-section apps
Combine stack types for complex hierarchies: 
<Transition.BottomTabs>
  {/* Tab 1: Stack inside */}
  <Transition.Screen name="HomeTab">
    <Transition.Stack>
      <Transition.Screen name="Home" component={Home} />
      <Transition.Screen name="Details" component={Details} />
    </Transition.Stack>
  </Transition.Screen>

  {/* Tab 2: Modal inside */}
  <Transition.Screen name="SettingsTab">
    <Transition.Stack>
      <Transition.Screen name="Settings" component={Settings} />
      <Transition.Modal
        name="SettingsModal"
        component={SettingsModal}
        options={{ snapPoints: [0.5, 1] }}
      />
    </Transition.Stack>
  </Transition.Screen>
</Transition.BottomTabs>

​
Header Configuration

Control header appearance per stack type: 
<Transition.Stack
  screenOptions={{
    headerShown: true,
    headerStyle: {
      backgroundColor: '#f1f1f1',
    },
    headerTintColor: '#000',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
>
  <Transition.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'Home' }}
  />
</Transition.Stack>

​
Safe Area Handling

Automatically handles safe areas for notches, rounded corners, etc.: 
<Transition.Stack
  screenOptions={{
    contentStyle: {
      backgroundColor: '#fff',
    },
    headerShown: false,
  }}
>
  {/* Content automatically respects safe area */}
</Transition.Stack>
For custom safe area handling: 
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function MyScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      {/* content */}
    </View>
  );
}

​
Gesture Handling by Stack Type

Different stack types have different default gesture behaviors:
Stack TypeDefault GestureDirection
StackSlideHorizontal (iOS), Vertical (Android)
ModalSwipeVertical
NativeStackPlatform defaultPlatform-dependent
BottomTabsTab switchHorizontal
DrawerSlideHorizontal
Override with gestureEnabled and gestureDirection options.

​
Animation Presets by Stack Type

Each stack type has optimized animation presets: 
<Transition.Stack
  screenOptions={{
    transitionSpec: 'default',  // 'default', 'slide', 'fade', 'zoom'
  }}
>
  {/* screens */}
</Transition.Stack>

<Transition.Modal
  screenOptions={{
    transitionSpec: 'slide',  // Optimized for sheets
  }}
/>

​
Standalone Stack Usage (NEW in 3.4)

Use Transition.Stack outside of navigation hierarchy: 
import { Transition } from 'react-native-screen-transitions';

export function DemoStack() {
  return (
    <Transition.Stack
      independent={true}  // Standalone mode
      enableNativeScreens={false}  // Use regular Views
      screenStyleInterpolator={myInterpolator}
    >
      <Transition.Screen name="Screen1" component={Screen1} />
      <Transition.Screen name="Screen2" component={Screen2} />
    </Transition.Stack>
  );
}

// Use anywhere without NavigationContainer
<View style={{ flex: 1 }}>
  <DemoStack />
</View>
Perfect for:
  • Demo screens
  • Tutorial flows
  • Custom navigation UIs
  • Embedded transitions

​
Comparison Table

Stack TypeUse CaseOrientationHeader
StackSequential push/popBothCustom or native
ModalOverlay sheetsVerticalMinimal/none
NativeStackNative-backed navBothNative
BottomTabsTab switchingHorizontalOptional
DrawerSide menuHorizontalOptional

​
Best Practices

  1. Use appropriate stack type: Each type optimizes for its use case
  2. Limit nesting depth: 3-4 levels max for best performance
  3. Consistent gestures: Use same gesture direction across related stacks
  4. Test on both platforms: Gesture behavior varies between iOS and Android
  5. Consider safe areas: Use safe area insets for notch/rounded corner handling

​
Next Steps