Card Animations

/**
 * Standard iOS-style slide in from the right
 * @param props - Card interpolation properties
 * @returns Interpolated styles for card, overlay, and shadow
 */
function forHorizontalIOS(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

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

// Apply to specific screen
<Stack.Screen
  name="Details"
  component={DetailsScreen}
  options={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}
/>

// Apply to all screens in navigator
<Stack.Navigator
  screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}
>

/**
 * Standard iOS-style slide in from the bottom (used for modals)
 * @param props - Card interpolation properties
 * @returns Interpolated styles for card animation
 */
function forVerticalIOS(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * Standard iOS modal presentation style (introduced in iOS 13)
 * @param props - Card interpolation properties including insets and index
 * @returns Interpolated styles with scaling and dimming effects
 */
function forModalPresentationIOS(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * Standard Android-style fade in from the bottom for Android Oreo
 * @param props - Card interpolation properties
 * @returns Interpolated styles with fade and translate effects
 */
function forFadeFromBottomAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * Standard Android navigation transition for Android 9 (Pie)
 * @param props - Card interpolation properties
 * @returns Interpolated styles with reveal animation
 */
function forRevealFromBottomAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * Standard Android navigation transition for Android 10+ (Q)
 * @param props - Card interpolation properties
 * @returns Interpolated styles with center scaling animation
 */
function forScaleFromCenterAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * Material Design bottom sheet animation
 * @param props - Card interpolation properties
 * @returns Interpolated styles for bottom sheet presentation
 */
function forBottomSheetAndroid(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * Simple fade animation from center without translation
 * @param props - Card interpolation properties
 * @returns Interpolated styles with opacity animation only
 */
function forFadeFromCenter(props: StackCardInterpolationProps): StackCardInterpolatedStyle;

/**
 * No animation - instant transition
 * @returns Empty style object for no animation
 */
function forNoAnimation(): StackCardInterpolatedStyle;

interface StackCardInterpolationProps {
  current: {
    progress: Animated.AnimatedInterpolation<number>;
  };
  next?: {
    progress: Animated.AnimatedInterpolation<number>;
  };
  index: number;
  closing: Animated.AnimatedInterpolation<0 | 1>;
  swiping: Animated.AnimatedInterpolation<0 | 1>;
  inverted: Animated.AnimatedInterpolation<-1 | 1>;
  layouts: {
    screen: Layout;
  };
  insets: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
}

interface StackCardInterpolatedStyle {
  containerStyle?: any;
  cardStyle?: any;
  overlayStyle?: any;
  shadowStyle?: any;
}

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

// Platform-specific animations
const platformCardStyle = Platform.select({
  ios: CardStyleInterpolators.forHorizontalIOS,
  android: CardStyleInterpolators.forFadeFromBottomAndroid,
});

// Modal presentations
<Stack.Screen
  name="Modal"
  component={ModalScreen}
  options={{
    presentation: 'modal',
    cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
  }}
/>

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

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

  return {
    cardStyle: {
      transform: [{ translateX }],
      opacity,
    },
  };
};

<Stack.Screen
  name="Custom"
  component={CustomScreen}
  options={{
    cardStyleInterpolator: customInterpolator,
  }}
/>

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

// Custom transition with specific timing
<Stack.Screen
  name="CustomTiming"
  component={MyScreen}
  options={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
    transitionSpec: {
      open: TransitionSpecs.TransitionIOSSpec,
      close: TransitionSpecs.TransitionIOSSpec,
    },
  }}
/>