Transition Presets

/**
 * Standard iOS navigation transition
 * Combines horizontal slide card animation with fade header animation
 */
const SlideFromRightIOS: TransitionPreset;

import { TransitionPresets } from '@react-navigation/stack';

// Apply to specific screen
<Stack.Screen
  name="Details"
  component={DetailsScreen}
  options={{
    ...TransitionPresets.SlideFromRightIOS,
  }}
/>

// Apply to all screens
<Stack.Navigator
  screenOptions={{
    ...TransitionPresets.SlideFromRightIOS,
  }}
>

/**
 * Standard iOS navigation transition for modals
 * Vertical slide from bottom with fade header animation
 */
const ModalSlideFromBottomIOS: TransitionPreset;

/**
 * Standard iOS modal presentation style (introduced in iOS 13)
 * Card scaling with dimmed background and fade header
 */
const ModalPresentationIOS: TransitionPreset;

/**
 * Standard Android navigation transition for Android < 9 (Oreo)
 * Fade from bottom animation with vertical gesture direction
 */
const FadeFromBottomAndroid: TransitionPreset;

/**
 * Standard Android navigation transition for Android 9 (Pie)
 * Reveal from bottom with smooth bezier curve timing
 */
const RevealFromBottomAndroid: TransitionPreset;

/**
 * Standard Android navigation transition for Android 10+ (Q)
 * Scale from center with horizontal gesture support
 */
const ScaleFromCenterAndroid: TransitionPreset;

/**
 * Material Design bottom sheet transition
 * Slide up from bottom with bottom sheet timing specs
 */
const BottomSheetAndroid: TransitionPreset;

/**
 * Cross-platform modal fade transition
 * Simple fade animation suitable for overlay-style modals
 */
const ModalFadeTransition: TransitionPreset;

/**
 * Platform-specific default transition
 * Automatically selects SlideFromRightIOS on iOS, FadeFromBottomAndroid on Android
 */
const DefaultTransition: TransitionPreset;

/**
 * Platform-specific modal transition
 * Automatically selects ModalPresentationIOS on iOS, BottomSheetAndroid on Android
 */
const ModalTransition: TransitionPreset;

interface TransitionPreset {
  gestureDirection: GestureDirection;
  transitionSpec: {
    open: TransitionSpec;
    close: TransitionSpec;
  };
  cardStyleInterpolator: StackCardStyleInterpolator;
  headerStyleInterpolator: StackHeaderStyleInterpolator;
}

type GestureDirection = 'horizontal' | 'horizontal-inverted' | 'vertical' | 'vertical-inverted';

import { TransitionPresets } from '@react-navigation/stack';

// Platform-specific navigation
<Stack.Navigator
  screenOptions={{
    ...TransitionPresets.DefaultTransition,
  }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

// Modal stack with iOS-style presentation
<Stack.Navigator
  screenOptions={{
    presentation: 'modal',
    ...TransitionPresets.ModalPresentationIOS,
  }}
>
  <Stack.Screen name="Settings" component={SettingsScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

// Mixed transitions for different screen types
<Stack.Navigator>
  <Stack.Group screenOptions={TransitionPresets.SlideFromRightIOS}>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Group>
  <Stack.Group 
    screenOptions={{
      presentation: 'modal',
      ...TransitionPresets.ModalSlideFromBottomIOS,
    }}
  >
    <Stack.Screen name="Modal" component={ModalScreen} />
    <Stack.Screen name="FullScreenModal" component={FullScreenModalScreen} />
  </Stack.Group>
</Stack.Navigator>

import { 
  CardStyleInterpolators, 
  HeaderStyleInterpolators, 
  TransitionSpecs 
} from '@react-navigation/stack';

// Custom fade-slide transition
const CustomFadeSlide: TransitionPreset = {
  gestureDirection: 'horizontal',
  transitionSpec: {
    open: TransitionSpecs.TransitionIOSSpec,
    close: TransitionSpecs.TransitionIOSSpec,
  },
  cardStyleInterpolator: CardStyleInterpolators.forFadeFromCenter,
  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
};

// Fast Android-style transition
const FastAndroidTransition: TransitionPreset = {
  gestureDirection: 'vertical',
  transitionSpec: {
    open: {
      animation: 'timing',
      config: {
        duration: 200,
        easing: Easing.out(Easing.poly(4)),
      },
    },
    close: {
      animation: 'timing',
      config: {
        duration: 150,
        easing: Easing.in(Easing.poly(4)),
      },
    },
  },
  cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
};

// Usage
<Stack.Navigator
  screenOptions={{
    ...CustomFadeSlide,
  }}
>

// Horizontal gestures (left-right swipe)
gestureDirection: 'horizontal'          // Swipe from left edge to go back
gestureDirection: 'horizontal-inverted' // Swipe from right edge to go back

// Vertical gestures (up-down swipe)  
gestureDirection: 'vertical'            // Swipe from top edge to go back
gestureDirection: 'vertical-inverted'   // Swipe from bottom edge to go back

// Custom gesture configuration
<Stack.Screen
  name="CustomGesture"
  component={MyScreen}
  options={{
    ...TransitionPresets.SlideFromRightIOS,
    gestureDirection: 'horizontal-inverted', // Override gesture direction
    gestureResponseDistance: 50,             // Custom gesture sensitivity
    gestureVelocityImpact: 0.3,             // Custom velocity threshold
  }}
/>