0
# Transition Presets
1

2
Complete transition configurations combining card animations, header animations, and timing specifications for common platform-specific navigation patterns.
3

4
## Capabilities
5

6
### SlideFromRightIOS
7

8
Standard iOS navigation transition with horizontal slide from the right and fade header animation.
9

10
```typescript { .api }
11
/**
12
 * Standard iOS navigation transition
13
 * Combines horizontal slide card animation with fade header animation
14
 */
15
const SlideFromRightIOS: TransitionPreset;
16
```
17

18
**Usage Examples:**
19

20
```typescript
21
import { TransitionPresets } from '@react-navigation/stack';
22

23
// Apply to specific screen
24
<Stack.Screen
25
  name="Details"
26
  component={DetailsScreen}
27
  options={{
28
    ...TransitionPresets.SlideFromRightIOS,
29
  }}
30
/>
31

32
// Apply to all screens
33
<Stack.Navigator
34
  screenOptions={{
35
    ...TransitionPresets.SlideFromRightIOS,
36
  }}
37
>
38
```
39

40
### ModalSlideFromBottomIOS
41

42
Standard iOS modal transition with vertical slide from the bottom.
43

44
```typescript { .api }
45
/**
46
 * Standard iOS navigation transition for modals
47
 * Vertical slide from bottom with fade header animation
48
 */
49
const ModalSlideFromBottomIOS: TransitionPreset;
50
```
51

52
### ModalPresentationIOS
53

54
iOS 13+ modal presentation style with card scaling and background effects.
55

56
```typescript { .api }
57
/**
58
 * Standard iOS modal presentation style (introduced in iOS 13)
59
 * Card scaling with dimmed background and fade header
60
 */
61
const ModalPresentationIOS: TransitionPreset;
62
```
63

64
### FadeFromBottomAndroid
65

66
Android navigation transition for devices running Android versions before Pie (API < 28).
67

68
```typescript { .api }
69
/**
70
 * Standard Android navigation transition for Android < 9 (Oreo)
71
 * Fade from bottom animation with vertical gesture direction
72
 */
73
const FadeFromBottomAndroid: TransitionPreset;
74
```
75

76
### RevealFromBottomAndroid
77

78
Android Pie (API 28) navigation transition with reveal animation from the bottom.
79

80
```typescript { .api }
81
/**
82
 * Standard Android navigation transition for Android 9 (Pie)
83
 * Reveal from bottom with smooth bezier curve timing
84
 */
85
const RevealFromBottomAndroid: TransitionPreset;
86
```
87

88
### ScaleFromCenterAndroid
89

90
Android 10+ (API 29+) navigation transition with center scaling animation.
91

92
```typescript { .api }
93
/**
94
 * Standard Android navigation transition for Android 10+ (Q)
95
 * Scale from center with horizontal gesture support
96
 */
97
const ScaleFromCenterAndroid: TransitionPreset;
98
```
99

100
### BottomSheetAndroid
101

102
Material Design bottom sheet transition sliding up from the bottom edge.
103

104
```typescript { .api }
105
/**
106
 * Material Design bottom sheet transition
107
 * Slide up from bottom with bottom sheet timing specs
108
 */
109
const BottomSheetAndroid: TransitionPreset;
110
```
111

112
### ModalFadeTransition
113

114
Cross-platform modal transition with simple fade animation.
115

116
```typescript { .api }
117
/**
118
 * Cross-platform modal fade transition
119
 * Simple fade animation suitable for overlay-style modals
120
 */
121
const ModalFadeTransition: TransitionPreset;
122
```
123

124
### DefaultTransition
125

126
Platform-specific default transition that automatically selects appropriate animation for iOS or Android.
127

128
```typescript { .api }
129
/**
130
 * Platform-specific default transition
131
 * Automatically selects SlideFromRightIOS on iOS, FadeFromBottomAndroid on Android
132
 */
133
const DefaultTransition: TransitionPreset;
134
```
135

136
### ModalTransition
137

138
Platform-specific modal transition that automatically selects appropriate modal animation.
139

140
```typescript { .api }
141
/**
142
 * Platform-specific modal transition
143
 * Automatically selects ModalPresentationIOS on iOS, BottomSheetAndroid on Android
144
 */
145
const ModalTransition: TransitionPreset;
146
```
147

148
## Transition Preset Structure
149

150
Each transition preset combines multiple animation aspects:
151

152
```typescript { .api }
153
interface TransitionPreset {
154
  gestureDirection: GestureDirection;
155
  transitionSpec: {
156
    open: TransitionSpec;
157
    close: TransitionSpec;
158
  };
159
  cardStyleInterpolator: StackCardStyleInterpolator;
160
  headerStyleInterpolator: StackHeaderStyleInterpolator;
161
}
162

163
type GestureDirection = 'horizontal' | 'horizontal-inverted' | 'vertical' | 'vertical-inverted';
164
```
165

166
**Usage Examples:**
167

168
```typescript
169
import { TransitionPresets } from '@react-navigation/stack';
170

171
// Platform-specific navigation
172
<Stack.Navigator
173
  screenOptions={{
174
    ...TransitionPresets.DefaultTransition,
175
  }}
176
>
177
  <Stack.Screen name="Home" component={HomeScreen} />
178
  <Stack.Screen name="Details" component={DetailsScreen} />
179
</Stack.Navigator>
180

181
// Modal stack with iOS-style presentation
182
<Stack.Navigator
183
  screenOptions={{
184
    presentation: 'modal',
185
    ...TransitionPresets.ModalPresentationIOS,
186
  }}
187
>
188
  <Stack.Screen name="Settings" component={SettingsScreen} />
189
  <Stack.Screen name="Profile" component={ProfileScreen} />
190
</Stack.Navigator>
191

192
// Mixed transitions for different screen types
193
<Stack.Navigator>
194
  <Stack.Group screenOptions={TransitionPresets.SlideFromRightIOS}>
195
    <Stack.Screen name="Home" component={HomeScreen} />
196
    <Stack.Screen name="Details" component={DetailsScreen} />
197
  </Stack.Group>
198
  <Stack.Group 
199
    screenOptions={{
200
      presentation: 'modal',
201
      ...TransitionPresets.ModalSlideFromBottomIOS,
202
    }}
203
  >
204
    <Stack.Screen name="Modal" component={ModalScreen} />
205
    <Stack.Screen name="FullScreenModal" component={FullScreenModalScreen} />
206
  </Stack.Group>
207
</Stack.Navigator>
208
```
209

210
## Custom Transition Presets
211

212
Create custom presets by combining different animation components:
213

214
```typescript
215
import { 
216
  CardStyleInterpolators, 
217
  HeaderStyleInterpolators, 
218
  TransitionSpecs 
219
} from '@react-navigation/stack';
220

221
// Custom fade-slide transition
222
const CustomFadeSlide: TransitionPreset = {
223
  gestureDirection: 'horizontal',
224
  transitionSpec: {
225
    open: TransitionSpecs.TransitionIOSSpec,
226
    close: TransitionSpecs.TransitionIOSSpec,
227
  },
228
  cardStyleInterpolator: CardStyleInterpolators.forFadeFromCenter,
229
  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
230
};
231

232
// Fast Android-style transition
233
const FastAndroidTransition: TransitionPreset = {
234
  gestureDirection: 'vertical',
235
  transitionSpec: {
236
    open: {
237
      animation: 'timing',
238
      config: {
239
        duration: 200,
240
        easing: Easing.out(Easing.poly(4)),
241
      },
242
    },
243
    close: {
244
      animation: 'timing',
245
      config: {
246
        duration: 150,
247
        easing: Easing.in(Easing.poly(4)),
248
      },
249
    },
250
  },
251
  cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
252
  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
253
};
254

255
// Usage
256
<Stack.Navigator
257
  screenOptions={{
258
    ...CustomFadeSlide,
259
  }}
260
>
261
```
262

263
## Gesture Configuration
264

265
Transition presets define gesture directions that determine swipe-to-go-back behavior:
266

267
```typescript
268
// Horizontal gestures (left-right swipe)
269
gestureDirection: 'horizontal'          // Swipe from left edge to go back
270
gestureDirection: 'horizontal-inverted' // Swipe from right edge to go back
271

272
// Vertical gestures (up-down swipe)  
273
gestureDirection: 'vertical'            // Swipe from top edge to go back
274
gestureDirection: 'vertical-inverted'   // Swipe from bottom edge to go back
275
```
276

277
**Usage Examples:**
278

279
```typescript
280
// Custom gesture configuration
281
<Stack.Screen
282
  name="CustomGesture"
283
  component={MyScreen}
284
  options={{
285
    ...TransitionPresets.SlideFromRightIOS,
286
    gestureDirection: 'horizontal-inverted', // Override gesture direction
287
    gestureResponseDistance: 50,             // Custom gesture sensitivity
288
    gestureVelocityImpact: 0.3,             // Custom velocity threshold
289
  }}
290
/>
291
```