0
# Transition Specs
1

2
Animation timing and easing configuration specifications used to control the duration and feel of screen transitions in stack navigation.
3

4
## Capabilities
5

6
### TransitionIOSSpec
7

8
Spring animation configuration that replicates UINavigationController's exact animation behavior on iOS.
9

10
```typescript { .api }
11
/**
12
 * Exact values from UINavigationController's animation configuration
13
 * Uses spring animation with precise iOS timing parameters
14
 */
15
const TransitionIOSSpec: TransitionSpec;
16
```
17

18
**Configuration Details:**
19

20
```typescript
21
{
22
  animation: 'spring',
23
  config: {
24
    stiffness: 1000,
25
    damping: 500,
26
    mass: 3,
27
    overshootClamping: true,
28
    restDisplacementThreshold: 10,
29
    restSpeedThreshold: 10,
30
  },
31
}
32
```
33

34
### FadeInFromBottomAndroidSpec
35

36
Timing animation configuration for Android activity open transitions on Android Nougat and earlier.
37

38
```typescript { .api }
39
/**
40
 * Configuration for activity open animation from Android Nougat
41
 * Uses timing animation with polynomial easing curve
42
 */
43
const FadeInFromBottomAndroidSpec: TransitionSpec;
44
```
45

46
**Configuration Details:**
47

48
```typescript
49
{
50
  animation: 'timing',
51
  config: {
52
    duration: 350,
53
    easing: Easing.out(Easing.poly(5)),
54
  },
55
}
56
```
57

58
### FadeOutToBottomAndroidSpec
59

60
Timing animation configuration for Android activity close transitions on Android Nougat and earlier.
61

62
```typescript { .api }
63
/**
64
 * Configuration for activity close animation from Android Nougat
65
 * Uses timing animation with linear easing for quick exit
66
 */
67
const FadeOutToBottomAndroidSpec: TransitionSpec;
68
```
69

70
**Configuration Details:**
71

72
```typescript
73
{
74
  animation: 'timing',
75
  config: {
76
    duration: 150,
77
    easing: Easing.in(Easing.linear),
78
  },
79
}
80
```
81

82
### RevealFromBottomAndroidSpec
83

84
Timing animation configuration for Android Pie (API 28) reveal transitions with smooth bezier curve.
85

86
```typescript { .api }
87
/**
88
 * Approximate configuration for activity open animation from Android Pie
89
 * Uses timing animation with custom bezier curve for smooth reveal
90
 */
91
const RevealFromBottomAndroidSpec: TransitionSpec;
92
```
93

94
**Configuration Details:**
95

96
```typescript
97
{
98
  animation: 'timing',
99
  config: {
100
    duration: 425,
101
    easing: Easing.bezier(0.35, 0.45, 0, 1), // fast_out_extra_slow_in equivalent
102
  },
103
}
104
```
105

106
### ScaleFromCenterAndroidSpec
107

108
Timing animation configuration for Android Q (API 29+) scale transitions with smooth bezier curve.
109

110
```typescript { .api }
111
/**
112
 * Approximate configuration for activity open animation from Android Q
113
 * Uses timing animation with custom bezier curve for scaling effect
114
 */
115
const ScaleFromCenterAndroidSpec: TransitionSpec;
116
```
117

118
**Configuration Details:**
119

120
```typescript
121
{
122
  animation: 'timing',
123
  config: {
124
    duration: 400,
125
    easing: Easing.bezier(0.35, 0.45, 0, 1), // fast_out_extra_slow_in equivalent
126
  },
127
}
128
```
129

130
### BottomSheetSlideInSpec
131

132
Material Design bottom sheet slide-in animation with accelerate-decelerate interpolator.
133

134
```typescript { .api }
135
/**
136
 * Configuration for bottom sheet slide in animation from Material Design
137
 * Uses timing animation with accelerate-decelerate curve
138
 */
139
const BottomSheetSlideInSpec: TransitionSpec;
140
```
141

142
**Configuration Details:**
143

144
```typescript
145
{
146
  animation: 'timing',
147
  config: {
148
    duration: 250,
149
    easing: (t) => Math.cos((t + 1) * Math.PI) / 2.0 + 0.5, // AccelerateDecelerateInterpolator
150
  },
151
}
152
```
153

154
### BottomSheetSlideOutSpec
155

156
Material Design bottom sheet slide-out animation with accelerate interpolator for quick exit.
157

158
```typescript { .api }
159
/**
160
 * Configuration for bottom sheet slide out animation from Material Design
161
 * Uses timing animation with accelerate curve for quick dismissal
162
 */
163
const BottomSheetSlideOutSpec: TransitionSpec;
164
```
165

166
**Configuration Details:**
167

168
```typescript
169
{
170
  animation: 'timing',
171
  config: {
172
    duration: 200,
173
    easing: (t) => (t === 1.0 ? 1 : Math.pow(t, 2)), // AccelerateInterpolator
174
  },
175
}
176
```
177

178
## Transition Spec Structure
179

180
All transition specs conform to the TransitionSpec type:
181

182
```typescript { .api }
183
type TransitionSpec = {
184
  animation: 'spring';
185
  config: Omit<Animated.SpringAnimationConfig, 'toValue' | keyof Animated.AnimationConfig>;
186
} | {
187
  animation: 'timing';
188
  config: Omit<Animated.TimingAnimationConfig, 'toValue' | keyof Animated.AnimationConfig>;
189
};
190
```
191

192
## Usage Examples
193

194
### Basic Usage
195

196
```typescript
197
import { TransitionSpecs } from '@react-navigation/stack';
198

199
// Apply specific timing to screen
200
<Stack.Screen
201
  name="FastScreen"
202
  component={MyScreen}
203
  options={{
204
    transitionSpec: {
205
      open: TransitionSpecs.FadeInFromBottomAndroidSpec,
206
      close: TransitionSpecs.FadeOutToBottomAndroidSpec,
207
    },
208
  }}
209
/>
210

211
// Apply to all screens in navigator
212
<Stack.Navigator
213
  screenOptions={{
214
    transitionSpec: {
215
      open: TransitionSpecs.TransitionIOSSpec,
216
      close: TransitionSpecs.TransitionIOSSpec,
217
    },
218
  }}
219
>
220
```
221

222
### Custom Transition Specs
223

224
```typescript
225
import { Easing } from 'react-native';
226
import type { TransitionSpec } from '@react-navigation/stack';
227

228
// Custom spring animation
229
const CustomSpringSpec: TransitionSpec = {
230
  animation: 'spring',
231
  config: {
232
    stiffness: 800,
233
    damping: 300,
234
    mass: 1,
235
    overshootClamping: false,
236
    restDisplacementThreshold: 0.01,
237
    restSpeedThreshold: 0.01,
238
  },
239
};
240

241
// Custom timing animation
242
const CustomTimingSpec: TransitionSpec = {
243
  animation: 'timing',
244
  config: {
245
    duration: 300,
246
    easing: Easing.bezier(0.25, 0.1, 0.25, 1), // Material Design curve
247
  },
248
};
249

250
// Apply custom specs
251
<Stack.Screen
252
  name="CustomAnimation"
253
  component={MyScreen}
254
  options={{
255
    transitionSpec: {
256
      open: CustomSpringSpec,
257
      close: CustomTimingSpec,
258
    },
259
  }}
260
/>
261
```
262

263
### Platform-Specific Timing
264

265
```typescript
266
import { Platform } from 'react-native';
267
import { TransitionSpecs } from '@react-navigation/stack';
268

269
const platformTransitionSpec = Platform.select({
270
  ios: {
271
    open: TransitionSpecs.TransitionIOSSpec,
272
    close: TransitionSpecs.TransitionIOSSpec,
273
  },
274
  android: {
275
    open: TransitionSpecs.RevealFromBottomAndroidSpec,
276
    close: TransitionSpecs.FadeOutToBottomAndroidSpec,
277
  },
278
});
279

280
<Stack.Navigator
281
  screenOptions={{
282
    transitionSpec: platformTransitionSpec,
283
  }}
284
>
285
```
286

287
### Asymmetric Open/Close Timing
288

289
```typescript
290
import { TransitionSpecs } from '@react-navigation/stack';
291

292
// Different timing for opening vs closing
293
<Stack.Screen
294
  name="AsymmetricTiming"
295
  component={MyScreen}
296
  options={{
297
    transitionSpec: {
298
      open: TransitionSpecs.TransitionIOSSpec,        // Smooth spring open
299
      close: TransitionSpecs.FadeOutToBottomAndroidSpec, // Quick timing close
300
    },
301
  }}
302
/>
303
```
304

305
## Performance Considerations
306

307
- **Spring animations** (TransitionIOSSpec) provide natural feel but may be heavier on performance
308
- **Timing animations** with shorter durations are more performant for frequent transitions
309
- **Custom easing functions** should be optimized for 60fps performance
310
- Consider device capabilities when choosing animation duration and complexity
311

312
## Integration with Animation System
313

314
Transition specs work together with card and header interpolators:
315

316
```typescript
317
import { 
318
  TransitionSpecs, 
319
  CardStyleInterpolators, 
320
  HeaderStyleInterpolators 
321
} from '@react-navigation/stack';
322

323
// Complete coordinated animation
324
<Stack.Screen
325
  name="CoordinatedAnimation"
326
  component={MyScreen}
327
  options={{
328
    transitionSpec: {
329
      open: TransitionSpecs.TransitionIOSSpec,
330
      close: TransitionSpecs.TransitionIOSSpec,
331
    },
332
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
333
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
334
  }}
335
/>
336
```