Header Animations

/**
 * Standard UIKit style animation for the header where the title fades into the back button label
 * @param props - Header interpolation properties
 * @returns Interpolated styles for header elements
 */
function forUIKit(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;

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

// Apply UIKit-style header animation
<Stack.Screen
  name="Details"
  component={DetailsScreen}
  options={{
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
  }}
/>

// Apply to all screens in navigator
<Stack.Navigator
  screenOptions={{
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
  }}
>

/**
 * Simple fade animation for the header
 * @param props - Header interpolation properties
 * @returns Interpolated styles with opacity animation
 */
function forFade(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;

/**
 * Simple translate animation to translate the header to left
 * @param props - Header interpolation properties
 * @returns Interpolated styles with left slide animation
 */
function forSlideLeft(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;

/**
 * Simple translate animation to translate the header to right
 * @param props - Header interpolation properties
 * @returns Interpolated styles with right slide animation
 */
function forSlideRight(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;

/**
 * Simple translate animation to translate the header to slide up
 * @param props - Header interpolation properties
 * @returns Interpolated styles with upward slide animation
 */
function forSlideUp(props: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle;

/**
 * No animation - header appears instantly
 * @returns Empty style object for no animation
 */
function forNoAnimation(): StackHeaderInterpolatedStyle;

interface StackHeaderInterpolationProps {
  current: {
    progress: Animated.AnimatedInterpolation<number>;
  };
  next?: {
    progress: Animated.AnimatedInterpolation<number>;
  };
  layouts: {
    header: Layout;
    screen: Layout;
    title?: Layout;
    leftLabel?: Layout;
  };
}

interface StackHeaderInterpolatedStyle {
  leftLabelStyle?: any;
  leftButtonStyle?: any;
  rightButtonStyle?: any;
  titleStyle?: any;
  backgroundStyle?: any;
}

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

// Different header animations for different screens
<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
      headerStyleInterpolator: HeaderStyleInterpolators.forFade,
    }}
  />
  <Stack.Screen
    name="Modal"
    component={ModalScreen}
    options={{
      presentation: 'modal',
      headerStyleInterpolator: HeaderStyleInterpolators.forSlideUp,
    }}
  />
</Stack.Navigator>

// Custom header interpolator
const customHeaderInterpolator = ({ current, layouts }) => {
  const opacity = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

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

  return {
    backgroundStyle: {
      opacity,
      transform: [{ translateY }],
    },
    titleStyle: {
      opacity,
    },
  };
};

<Stack.Screen
  name="CustomHeader"
  component={MyScreen}
  options={{
    headerStyleInterpolator: customHeaderInterpolator,
  }}
/>

interface StackHeaderOptions {
  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
  headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
  headerRight?: (props: HeaderButtonProps) => React.ReactNode;
  headerBackAllowFontScaling?: boolean;
  headerBackAccessibilityLabel?: string;
  headerBackTestID?: string;
  headerBackTitle?: string;
  headerBackTitleVisible?: boolean;
  headerBackTitleStyle?: StyleProp<TextStyle>;
  headerTruncatedBackTitle?: string;
  headerBackImage?: React.ComponentProps<typeof HeaderBackButton>['backImage'];
  headerStyle?: StyleProp<ViewStyle>;
  headerTitleStyle?: StyleProp<TextStyle>;
  headerTitleAlign?: 'left' | 'center';
  headerTintColor?: string;
  headerPressColor?: string;
  headerPressOpacity?: number;
  headerTransparent?: boolean;
  headerBackground?: () => React.ReactNode;
  headerStatusBarHeight?: number;
}

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

// Complete header customization
<Stack.Screen
  name="CustomizedHeader"
  component={MyScreen}
  options={{
    headerTitle: 'Custom Title',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerRight: () => (
      <Button
        onPress={() => alert('Button pressed!')}
        title="Info"
        color="#fff"
      />
    ),
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
  }}
/>

// Dynamic header based on route params
<Stack.Screen
  name="DynamicHeader"
  component={MyScreen}
  options={({ route, navigation }) => ({
    headerTitle: route.params?.title || 'Default Title',
    headerStyleInterpolator: route.params?.isModal 
      ? HeaderStyleInterpolators.forSlideUp 
      : HeaderStyleInterpolators.forUIKit,
  })}
/>

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

// Coordinated iOS-style animation
<Stack.Screen
  name="Coordinated"
  component={MyScreen}
  options={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
    transitionSpec: {
      open: TransitionSpecs.TransitionIOSSpec,
      close: TransitionSpecs.TransitionIOSSpec,
    },
  }}
/>