0
# Card Animations
1

2
Comprehensive collection of card transition interpolators providing platform-specific animations for screen transitions in stack navigation.
3

4
## Capabilities
5

6
### forHorizontalIOS
7

8
Standard iOS-style horizontal slide animation from the right edge of the screen.
9

10
```typescript { .api }
11
/**
12
 * Standard iOS-style slide in from the right
13
 * @param props - Card interpolation properties
14
 * @returns Interpolated styles for card, overlay, and shadow
15
 */
16
function forHorizontalIOS(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
17
```
18

19
**Usage Examples:**
20

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

24
// Apply to specific screen
25
<Stack.Screen
26
  name="Details"
27
  component={DetailsScreen}
28
  options={{
29
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
30
  }}
31
/>
32

33
// Apply to all screens in navigator
34
<Stack.Navigator
35
  screenOptions={{
36
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
37
  }}
38
>
39
```
40

41
### forVerticalIOS
42

43
Standard iOS-style vertical slide animation from the bottom, typically used for modal presentations.
44

45
```typescript { .api }
46
/**
47
 * Standard iOS-style slide in from the bottom (used for modals)
48
 * @param props - Card interpolation properties
49
 * @returns Interpolated styles for card animation
50
 */
51
function forVerticalIOS(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
52
```
53

54
### forModalPresentationIOS
55

56
Standard iOS-style modal animation in iOS 13.
57

58
```typescript { .api }
59
/**
60
 * Standard iOS modal presentation style (introduced in iOS 13)
61
 * @param props - Card interpolation properties including insets and index
62
 * @returns Interpolated styles with scaling and dimming effects
63
 */
64
function forModalPresentationIOS(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
65
```
66

67
### forFadeFromBottomAndroid
68

69
Standard Android-style fade in from the bottom for Android Oreo.
70

71
```typescript { .api }
72
/**
73
 * Standard Android-style fade in from the bottom for Android Oreo
74
 * @param props - Card interpolation properties
75
 * @returns Interpolated styles with fade and translate effects
76
 */
77
function forFadeFromBottomAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
78
```
79

80
### forRevealFromBottomAndroid
81

82
Android Pie (API 28) reveal animation that slides up from the bottom with scaling.
83

84
```typescript { .api }
85
/**
86
 * Standard Android navigation transition for Android 9 (Pie)
87
 * @param props - Card interpolation properties
88
 * @returns Interpolated styles with reveal animation
89
 */
90
function forRevealFromBottomAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
91
```
92

93
### forScaleFromCenterAndroid
94

95
Android 10+ scale animation that grows from the center of the screen.
96

97
```typescript { .api }
98
/**
99
 * Standard Android navigation transition for Android 10+ (Q)
100
 * @param props - Card interpolation properties
101
 * @returns Interpolated styles with center scaling animation
102
 */
103
function forScaleFromCenterAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
104
```
105

106
### forBottomSheetAndroid
107

108
Material Design bottom sheet animation sliding up from the bottom edge.
109

110
```typescript { .api }
111
/**
112
 * Material Design bottom sheet animation
113
 * @param props - Card interpolation properties
114
 * @returns Interpolated styles for bottom sheet presentation
115
 */
116
function forBottomSheetAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
117
```
118

119
### forFadeFromCenter
120

121
Simple fade animation without translation, useful for overlay-style transitions.
122

123
```typescript { .api }
124
/**
125
 * Simple fade animation from center without translation
126
 * @param props - Card interpolation properties
127
 * @returns Interpolated styles with opacity animation only
128
 */
129
function forFadeFromCenter(props: StackCardInterpolationProps): StackCardInterpolatedStyle;
130
```
131

132
### forNoAnimation
133

134
No animation - instant transition between screens.
135

136
```typescript { .api }
137
/**
138
 * No animation - instant transition
139
 * @returns Empty style object for no animation
140
 */
141
function forNoAnimation(): StackCardInterpolatedStyle;
142
```
143

144
## Animation Properties
145

146
### StackCardInterpolationProps
147

148
Input properties provided to card style interpolators containing animation progress and layout information.
149

150
```typescript { .api }
151
interface StackCardInterpolationProps {
152
  current: {
153
    progress: Animated.AnimatedInterpolation<number>;
154
  };
155
  next?: {
156
    progress: Animated.AnimatedInterpolation<number>;
157
  };
158
  index: number;
159
  closing: Animated.AnimatedInterpolation<0 | 1>;
160
  swiping: Animated.AnimatedInterpolation<0 | 1>;
161
  inverted: Animated.AnimatedInterpolation<-1 | 1>;
162
  layouts: {
163
    screen: Layout;
164
  };
165
  insets: {
166
    top: number;
167
    right: number;
168
    bottom: number;
169
    left: number;
170
  };
171
}
172
```
173

174
### StackCardInterpolatedStyle
175

176
Output styles returned by card style interpolators for animating different parts of the card.
177

178
```typescript { .api }
179
interface StackCardInterpolatedStyle {
180
  containerStyle?: any;
181
  cardStyle?: any;
182
  overlayStyle?: any;
183
  shadowStyle?: any;
184
}
185
```
186

187
**Usage Examples:**
188

189
```typescript
190
import { CardStyleInterpolators } from '@react-navigation/stack';
191

192
// Platform-specific animations
193
const platformCardStyle = Platform.select({
194
  ios: CardStyleInterpolators.forHorizontalIOS,
195
  android: CardStyleInterpolators.forFadeFromBottomAndroid,
196
});
197

198
// Modal presentations
199
<Stack.Screen
200
  name="Modal"
201
  component={ModalScreen}
202
  options={{
203
    presentation: 'modal',
204
    cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
205
  }}
206
/>
207

208
// Custom animation combining interpolators
209
const customInterpolator = ({ current, layouts }) => {
210
  const translateX = current.progress.interpolate({
211
    inputRange: [0, 1],
212
    outputRange: [layouts.screen.width, 0],
213
  });
214

215
  const opacity = current.progress.interpolate({
216
    inputRange: [0, 0.5, 1],
217
    outputRange: [0, 0.5, 1],
218
  });
219

220
  return {
221
    cardStyle: {
222
      transform: [{ translateX }],
223
      opacity,
224
    },
225
  };
226
};
227

228
<Stack.Screen
229
  name="Custom"
230
  component={CustomScreen}
231
  options={{
232
    cardStyleInterpolator: customInterpolator,
233
  }}
234
/>
235
```
236

237
## Animation Timing
238

239
Card animations are coordinated with timing specifications from TransitionSpecs:
240

241
```typescript
242
import { TransitionSpecs, CardStyleInterpolators } from '@react-navigation/stack';
243

244
// Custom transition with specific timing
245
<Stack.Screen
246
  name="CustomTiming"
247
  component={MyScreen}
248
  options={{
249
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
250
    transitionSpec: {
251
      open: TransitionSpecs.TransitionIOSSpec,
252
      close: TransitionSpecs.TransitionIOSSpec,
253
    },
254
  }}
255
/>
256
```