0
# Header Animations
1

2
Header transition interpolators for coordinating header animations with screen transitions, including cross-fade effects, slide animations, and platform-specific behaviors.
3

4
## Capabilities
5

6
### forUIKit
7

8
Standard UIKit-style animation where the header title cross-fades with the back button label during transitions.
9

10
```typescript { .api }
11
/**
12
 * Standard UIKit style animation for the header where the title fades into the back button label
13
 * @param props - Header interpolation properties
14
 * @returns Interpolated styles for header elements
15
 */
16
function forUIKit(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;
17
```
18

19
**Usage Examples:**
20

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

24
// Apply UIKit-style header animation
25
<Stack.Screen
26
  name="Details"
27
  component={DetailsScreen}
28
  options={{
29
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
30
  }}
31
/>
32

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

41
### forFade
42

43
Simple fade animation for the entire header during transitions.
44

45
```typescript { .api }
46
/**
47
 * Simple fade animation for the header
48
 * @param props - Header interpolation properties
49
 * @returns Interpolated styles with opacity animation
50
 */
51
function forFade(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;
52
```
53

54
### forSlideLeft
55

56
Simple translate animation to translate the header to left.
57

58
```typescript { .api }
59
/**
60
 * Simple translate animation to translate the header to left
61
 * @param props - Header interpolation properties
62
 * @returns Interpolated styles with left slide animation
63
 */
64
function forSlideLeft(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;
65
```
66

67
### forSlideRight
68

69
Simple translate animation to translate the header to right.
70

71
```typescript { .api }
72
/**
73
 * Simple translate animation to translate the header to right
74
 * @param props - Header interpolation properties
75
 * @returns Interpolated styles with right slide animation
76
 */
77
function forSlideRight(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;
78
```
79

80
### forSlideUp
81

82
Simple translate animation to translate the header to slide up.
83

84
```typescript { .api }
85
/**
86
 * Simple translate animation to translate the header to slide up
87
 * @param props - Header interpolation properties
88
 * @returns Interpolated styles with upward slide animation
89
 */
90
function forSlideUp(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;
91
```
92

93
### forNoAnimation
94

95
No animation - header appears instantly without transition effects.
96

97
```typescript { .api }
98
/**
99
 * No animation - header appears instantly
100
 * @returns Empty style object for no animation
101
 */
102
function forNoAnimation(): StackHeaderInterpolatedStyle;
103
```
104

105
## Header Animation Properties
106

107
### StackHeaderInterpolationProps
108

109
Input properties provided to header style interpolators containing animation progress and layout measurements.
110

111
```typescript { .api }
112
interface StackHeaderInterpolationProps {
113
  current: {
114
    progress: Animated.AnimatedInterpolation<number>;
115
  };
116
  next?: {
117
    progress: Animated.AnimatedInterpolation<number>;
118
  };
119
  layouts: {
120
    header: Layout;
121
    screen: Layout;
122
    title?: Layout;
123
    leftLabel?: Layout;
124
  };
125
}
126
```
127

128
### StackHeaderInterpolatedStyle
129

130
Output styles returned by header style interpolators for animating different header elements.
131

132
```typescript { .api }
133
interface StackHeaderInterpolatedStyle {
134
  leftLabelStyle?: any;
135
  leftButtonStyle?: any;
136
  rightButtonStyle?: any;
137
  titleStyle?: any;
138
  backgroundStyle?: any;
139
}
140
```
141

142
**Usage Examples:**
143

144
```typescript
145
import { HeaderStyleInterpolators } from '@react-navigation/stack';
146

147
// Different header animations for different screens
148
<Stack.Navigator>
149
  <Stack.Screen
150
    name="Home"
151
    component={HomeScreen}
152
    options={{
153
      headerStyleInterpolator: HeaderStyleInterpolators.forFade,
154
    }}
155
  />
156
  <Stack.Screen
157
    name="Modal"
158
    component={ModalScreen}
159
    options={{
160
      presentation: 'modal',
161
      headerStyleInterpolator: HeaderStyleInterpolators.forSlideUp,
162
    }}
163
  />
164
</Stack.Navigator>
165

166
// Custom header interpolator
167
const customHeaderInterpolator = ({ current, layouts }) => {
168
  const opacity = current.progress.interpolate({
169
    inputRange: [0, 1],
170
    outputRange: [0, 1],
171
  });
172

173
  const translateY = current.progress.interpolate({
174
    inputRange: [0, 1],
175
    outputRange: [-layouts.header.height, 0],
176
  });
177

178
  return {
179
    backgroundStyle: {
180
      opacity,
181
      transform: [{ translateY }],
182
    },
183
    titleStyle: {
184
      opacity,
185
    },
186
  };
187
};
188

189
<Stack.Screen
190
  name="CustomHeader"
191
  component={MyScreen}
192
  options={{
193
    headerStyleInterpolator: customHeaderInterpolator,
194
  }}
195
/>
196
```
197

198
## Header Configuration
199

200
Headers can be extensively customized through screen options:
201

202
```typescript { .api }
203
interface StackHeaderOptions {
204
  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
205
  headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
206
  headerRight?: (props: HeaderButtonProps) => React.ReactNode;
207
  headerBackAllowFontScaling?: boolean;
208
  headerBackAccessibilityLabel?: string;
209
  headerBackTestID?: string;
210
  headerBackTitle?: string;
211
  headerBackTitleVisible?: boolean;
212
  headerBackTitleStyle?: StyleProp<TextStyle>;
213
  headerTruncatedBackTitle?: string;
214
  headerBackImage?: React.ComponentProps<typeof HeaderBackButton>['backImage'];
215
  headerStyle?: StyleProp<ViewStyle>;
216
  headerTitleStyle?: StyleProp<TextStyle>;
217
  headerTitleAlign?: 'left' | 'center';
218
  headerTintColor?: string;
219
  headerPressColor?: string;
220
  headerPressOpacity?: number;
221
  headerTransparent?: boolean;
222
  headerBackground?: () => React.ReactNode;
223
  headerStatusBarHeight?: number;
224
}
225
```
226

227
**Usage Examples:**
228

229
```typescript
230
import { HeaderStyleInterpolators } from '@react-navigation/stack';
231

232
// Complete header customization
233
<Stack.Screen
234
  name="CustomizedHeader"
235
  component={MyScreen}
236
  options={{
237
    headerTitle: 'Custom Title',
238
    headerStyle: {
239
      backgroundColor: '#f4511e',
240
    },
241
    headerTintColor: '#fff',
242
    headerTitleStyle: {
243
      fontWeight: 'bold',
244
    },
245
    headerRight: () => (
246
      <Button
247
        onPress={() => alert('Button pressed!')}
248
        title="Info"
249
        color="#fff"
250
      />
251
    ),
252
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
253
  }}
254
/>
255

256
// Dynamic header based on route params
257
<Stack.Screen
258
  name="DynamicHeader"
259
  component={MyScreen}
260
  options={({ route, navigation }) => ({
261
    headerTitle: route.params?.title || 'Default Title',
262
    headerStyleInterpolator: route.params?.isModal 
263
      ? HeaderStyleInterpolators.forSlideUp 
264
      : HeaderStyleInterpolators.forUIKit,
265
  })}
266
/>
267
```
268

269
## Coordinated Animations
270

271
Header animations work in coordination with card animations and transition specs:
272

273
```typescript
274
import { 
275
  CardStyleInterpolators, 
276
  HeaderStyleInterpolators, 
277
  TransitionSpecs 
278
} from '@react-navigation/stack';
279

280
// Coordinated iOS-style animation
281
<Stack.Screen
282
  name="Coordinated"
283
  component={MyScreen}
284
  options={{
285
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
286
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
287
    transitionSpec: {
288
      open: TransitionSpecs.TransitionIOSSpec,
289
      close: TransitionSpecs.TransitionIOSSpec,
290
    },
291
  }}
292
/>
293
```