react-navigation-stack

const Assets: any[];

const CardAnimationContext: React.Context<StackCardInterpolationProps>;

const GestureHandlerRefContext: React.Context<React.Ref<any>>;

const Header: React.NamedExoticComponent<StackHeaderProps>;

const HeaderHeightContext: React.Context<number>;

createStackNavigator: (
    routeConfigMap: NavigationRouteConfigMap<StackNavigationOptions, any>,
    stackConfig?: CreateNavigatorConfig<
        StackNavigationConfig,
        NavigationStackRouterConfig,
        StackNavigationOptions,
        any
    >
) => any;

HeaderBackButton: ({
    disabled,
    allowFontScaling,
    backImage,
    label,
    labelStyle,
    labelVisible,
    onLabelLayout,
    onPress,
    pressColorAndroid: customPressColorAndroid,
    screenLayout,
    tintColor: customTintColor,
    titleLayout,
    truncatedLabel,
    accessibilityLabel,
    style,
}: Props) => JSX.Element;

HeaderBackground: ({ style, ...rest }: Props) => JSX.Element;

HeaderTitle: ({ tintColor, style, ...rest }: Props) => JSX.Element;

useCardAnimation: () => import('..').StackCardInterpolationProps;

useGestureHandlerRef: () => React.Ref<any>;

useHeaderHeight: () => number;

type StackNavigationConfig = {
    mode?: StackCardMode;
    headerMode?: StackHeaderMode;
    /**
     * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen.
     * Defaults to `true`.
     */
    keyboardHandlingEnabled?: boolean;
    /**
     * Whether inactive screens should be detached from the view hierarchy to save memory.
     * Make sure to call `enableScreens` from `react-native-screens` to make it work.
     * Defaults to `true` on Android, depends on the version of `react-native-screens` on iOS.
     */
    detachInactiveScreens?: boolean;
};

type StackNavigationOptions = StackHeaderOptions &
    Partial<TransitionPreset> & {
        /**
         * String that can be displayed in the header as a fallback for `headerTitle`.
         */
        title?: string;
        /**
         * Function that given `HeaderProps` returns a React Element to display as a header.
         */
        header?: (props: StackHeaderProps) => React.ReactNode;
        /**
         * Whether to show the header. The header is shown by default unless `headerMode` was set to `none`.
         * Setting this to `false` hides the header.
         */
        headerShown?: boolean;
        /**
         * Whether a shadow is visible for the card during transitions. Defaults to `true`.
         */
        cardShadowEnabled?: boolean;
        /**
         * Whether to have a semi-transparent dark overlay visible under the card during transitions.
         * Defaults to `true` on Android and `false` on iOS.
         */
        cardOverlayEnabled?: boolean;
        /**
         * Function that returns a React Element to display as a overlay for the card.
         */
        cardOverlay?: (props: {
            style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
        }) => React.ReactNode;
        /**
         * Style object for the card in stack.
         * You can provide a custom background color to use instead of the default background here.
         *
         * You can also specify `{ backgroundColor: 'transparent' }` to make the previous screen visible underneath.
         * This is useful to implement things like modal dialogs.
         * If you use [`react-native-screens`](https://github.com/kmagiera/react-native-screens), you should also specify `mode: 'modal'`
         * in the stack view config when using a transparent background so previous screens aren't detached.
         */
        cardStyle?: StyleProp<ViewStyle>;
        /**
         * Whether transition animation should be enabled the screen.
         * If you set it to `false`, the screen won't animate when pushing or popping.
         * Defaults to `true` on Android and iOS, `false` on Web.
         */
        animationEnabled?: boolean;
        /**
         * The type of animation to use when this screen replaces another screen. Defaults to `push`.
         * When `pop` is used, the `pop` animation is applied to the screen being replaced.
         */
        animationTypeForReplace?: 'push' | 'pop';
        /**
         * Whether you can use gestures to dismiss this screen. Defaults to `true` on iOS, `false` on Android.
         * Not supported on Web.
         */
        gestureEnabled?: boolean;
        /**
         * Object to override the distance of touch start from the edge of the screen to recognize gestures.
         * Not supported on Web.
         */
        gestureResponseDistance?: {
            /**
             * Distance for vertical direction. Defaults to 135.
             */
            vertical?: number;
            /**
             * Distance for horizontal direction. Defaults to 25.
             */
            horizontal?: number;
        };
        /**
         * Number which determines the relevance of velocity for the gesture. Defaults to 0.3.
         * Not supported on Web.
         */
        gestureVelocityImpact?: number;
        /**
         * Safe area insets for the screen. This is used to avoid elements like notch and status bar.
         * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
         * For example, to remove the extra spacing for status bar, pass `safeAreaInsets: { top: 0 }`.
         */
        safeAreaInsets?: {
            top?: number;
            right?: number;
            bottom?: number;
            left?: number;
        };
        /**
         * Whether to detach the previous screen from the view hierarchy to save memory.
         * Set it to `false` if you need the previous screen to be seen through the active screen.
         * Only applicable if `detachInactiveScreens` isn't set to `false`.
         * Defaults to `false` for the last screen when mode='modal', otherwise `true`.
         */
        detachPreviousScreen?: boolean;
        onTransitionStart?: (props: TransitionCallbackProps) => void;
        onTransitionEnd?: (props: TransitionCallbackProps) => void;
    };

type StackNavigationProp<
    State = NavigationRoute,
    Params = NavigationParams
> = NavigationScreenProp<State, Params> & {
    push: (
        routeName: string,
        params?: NavigationParams,
        action?: NavigationNavigateAction
    ) => boolean;
    replace: (
        routeName: string,
        params?: NavigationParams,
        action?: NavigationNavigateAction
    ) => boolean;
    reset: (actions: NavigationAction[], index: number) => boolean;
    pop: (
        n?: number,
        params?: {
            immediate?: boolean;
        }
    ) => boolean;
    popToTop: (params?: { immediate?: boolean }) => boolean;
    addListener: (
        event: NavigationStackEventName,
        callback: NavigationEventCallback
    ) => NavigationEventSubscription;
};

type NavigationStackScreenComponent<
    Params = NavigationParams,
    ScreenProps = unknown
> = React.ComponentType<NavigationStackScreenProps<Params, ScreenProps>> & {
    navigationOptions?: NavigationScreenConfig<
        StackNavigationOptions,
        StackNavigationProp<NavigationRoute, Params>,
        ScreenProps
    >;
};

type NavigationStackScreenProps<Params = NavigationParams, ScreenProps = unknown> = {
    theme: SupportedThemes;
    navigation: StackNavigationProp<NavigationRoute, Params>;
    screenProps: ScreenProps;
};

type NavigationStackState = NavigationState;

type StackCardInterpolatedStyle = {
    /**
     * Interpolated style for the container view wrapping the card.
     */
    containerStyle?: any;
    /**
     * Interpolated style for the view representing the card.
     */
    cardStyle?: any;
    /**
     * Interpolated style for the view representing the semi-transparent overlay below the card.
     */
    overlayStyle?: any;
    /**
     * Interpolated style representing the card shadow.
     */
    shadowStyle?: any;
};

type StackCardInterpolationProps = {
    /**
     * Values for the current screen.
     */
    current: {
        /**
         * Animated node representing the progress value of the current screen.
         */
        progress: Animated.AnimatedInterpolation;
    };
    /**
     * Values for the current screen the screen after this one in the stack.
     * This can be `undefined` in case the screen animating is the last one.
     */
    next?: {
        /**
         * Animated node representing the progress value of the next screen.
         */
        progress: Animated.AnimatedInterpolation;
    };
    /**
     * The index of the card in the stack.
     */
    index: number;
    /**
     * Animated node representing whether the card is closing (1 - closing, 0 - not closing).
     */
    closing: Animated.AnimatedInterpolation;
    /**
     * Animated node representing whether the card is being swiped (1 - swiping, 0 - not swiping).
     */
    swiping: Animated.AnimatedInterpolation;
    /**
     * Animated node representing multiplier when direction is inverted (-1 - inverted, 1 - normal).
     */
    inverted: Animated.AnimatedInterpolation;
    /**
     * Layout measurements for various items we use for animation.
     */
    layouts: {
        /**
         * Layout of the whole screen.
         */
        screen: Layout;
    };
    /**
     * Safe area insets
     */
    insets: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
};

type StackCardStyleInterpolator = (
    props: StackCardInterpolationProps
) => StackCardInterpolatedStyle;

type StackHeaderInterpolatedStyle = {
    /**
     * Interpolated style for the label of the left button (back button label).
     */
    leftLabelStyle?: any;
    /**
     * Interpolated style for the left button (usually the back button).
     */
    leftButtonStyle?: any;
    /**
     * Interpolated style for the right button.
     */
    rightButtonStyle?: any;
    /**
     * Interpolated style for the header title text.
     */
    titleStyle?: any;
    /**
     * Interpolated style for the header background.
     */
    backgroundStyle?: any;
};

type StackHeaderInterpolationProps = {
    /**
     * Values for the current screen (the screen which owns this header).
     */
    current: {
        /**
         * Animated node representing the progress value of the current screen.
         */
        progress: Animated.AnimatedInterpolation;
    };
    /**
     * Values for the current screen the screen after this one in the stack.
     * This can be `undefined` in case the screen animating is the last one.
     */
    next?: {
        /**
         * Animated node representing the progress value of the next screen.
         */
        progress: Animated.AnimatedInterpolation;
    };
    /**
     * Layout measurements for various items we use for animation.
     */
    layouts: {
        /**
         * Layout of the header
         */
        header: Layout;
        /**
         * Layout of the whole screen.
         */
        screen: Layout;
        /**
         * Layout of the title element.
         */
        title?: Layout;
        /**
         * Layout of the back button label.
         */
        leftLabel?: Layout;
    };
};

type StackHeaderLeftButtonProps = {
    /**
     * Whether the button is disabled.
     */
    disabled?: boolean;
    /**
     * Callback to call when the button is pressed.
     * By default, this triggers `goBack`.
     */
    onPress?: () => void;
    /**
     * Color for material ripple (Android >= 5.0 only).
     */
    pressColorAndroid?: string;
    /**
     * Function which returns a React Element to display custom image in header's back button.
     */
    backImage?: (props: { tintColor: string }) => React.ReactNode;
    /**
     * Tint color for the header.
     */
    tintColor?: string;
    /**
     * Label text for the button. Usually the title of the previous screen.
     * By default, this is only shown on iOS.
     */
    label?: string;
    /**
     * Label text to show when there isn't enough space for the full label.
     */
    truncatedLabel?: string;
    /**
     * Whether the label text is visible.
     * Defaults to `true` on iOS and `false` on Android.
     */
    labelVisible?: boolean;
    /**
     * Style object for the label.
     */
    labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
    /**
     * Whether label font should scale to respect Text Size accessibility settings.
     */
    allowFontScaling?: boolean;
    /**
     * Callback to trigger when the size of the label changes.
     */
    onLabelLayout?: (e: LayoutChangeEvent) => void;
    /**
     * Layout of the screen.
     */
    screenLayout?: Layout;
    /**
     * Layout of the title element in the header.
     */
    titleLayout?: Layout;
    /**
     * Whether it's possible to navigate back in stack.
     */
    canGoBack?: boolean;
    /**
     * Accessibility label for the button for screen readers.
     */
    accessibilityLabel?: string;
    /**
     * Style object for the button.
     */
    style?: StyleProp<ViewStyle>;
};

type StackHeaderProps = {
    /**
     * Mode of the header: `float` renders a single floating header across all screens,
     * `screen` renders separate headers for each screen.
     */
    mode: 'float' | 'screen';
    /**
     * Layout of the screen.
     */
    layout: Layout;
    /**
     * Safe area insets to use in the header, e.g. to apply extra spacing for statusbar and notch.
     */
    insets: EdgeInsets;
    /**
     * Object representing the current scene, such as the route object and animation progress.
     */
    scene: Scene<Route<string>>;
    /**
     * Object representing the previous scene.
     */
    previous?: Scene<Route<string>>;
    /**
     * Navigation prop for the header.
     */
    navigation: StackNavigationProp;
    /**
     * Interpolated styles for various elements in the header.
     */
    styleInterpolator: StackHeaderStyleInterpolator;
};

type StackHeaderStyleInterpolator = (
    props: StackHeaderInterpolationProps
) => StackHeaderInterpolatedStyle;

type StackHeaderTitleProps = {
    /**
     * Callback to trigger when the size of the title element changes.
     */
    onLayout: (e: LayoutChangeEvent) => void;
    /**
     * Whether title font should scale to respect Text Size accessibility settings.
     */
    allowFontScaling?: boolean;
    /**
     * Tint color for the header.
     */
    tintColor?: string;
    /**
     * Content of the title element. Usually the title string.
     */
    children?: string;
    /**
     * Style object for the title element.
     */
    style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
};

type TransitionPreset = {
    /**
     * The direction of swipe gestures, `horizontal` or `vertical`.
     */
    gestureDirection: GestureDirection;
    /**
     * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
     */
    transitionSpec: {
        /**
         * Transition configuration when adding a screen.
         */
        open: TransitionSpec;
        /**
         * Transition configuration when removing a screen.
         */
        close: TransitionSpec;
    };
    /**
     * Function which specifies interpolated styles for various parts of the card, e.g. the overlay, shadow etc.
     */
    cardStyleInterpolator: StackCardStyleInterpolator;
    /**
     * Function which specifies interpolated styles for various parts of the header, e.g. the title, left button etc.
     */
    headerStyleInterpolator: StackHeaderStyleInterpolator;
};