import type { HeaderBackButton, HeaderBackButtonProps, HeaderButtonProps, HeaderOptions, HeaderTitleProps } from '@react-navigation/elements'; import type { Descriptor, NavigationHelpers, NavigationProp, ParamListBase, Route, RouteProp, StackActionHelpers, StackNavigationState } from '@react-navigation/native'; import type * as React from 'react'; import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native'; export declare type StackNavigationEventMap = { /** * Event which fires when a transition animation starts. */ transitionStart: { data: { closing: boolean; }; }; /** * Event which fires when a transition animation ends. */ transitionEnd: { data: { closing: boolean; }; }; /** * Event which fires when navigation gesture starts. */ gestureStart: { data: undefined; }; /** * Event which fires when navigation gesture is completed. */ gestureEnd: { data: undefined; }; /** * Event which fires when navigation gesture is canceled. */ gestureCancel: { data: undefined; }; }; export declare type StackNavigationHelpers = NavigationHelpers & StackActionHelpers; export declare type StackNavigationProp = NavigationProp, StackNavigationOptions, StackNavigationEventMap> & StackActionHelpers; export declare type StackScreenProps = { navigation: StackNavigationProp; route: RouteProp; }; export declare type Layout = { width: number; height: number; }; export declare type GestureDirection = 'horizontal' | 'horizontal-inverted' | 'vertical' | 'vertical-inverted'; declare type SceneOptionsDefaults = TransitionPreset & { animationEnabled: boolean; gestureEnabled: boolean; cardOverlayEnabled: boolean; headerMode: StackHeaderMode; }; export declare type Scene = { /** * Route object for the current screen. */ route: Route; /** * Descriptor object for the screen. */ descriptor: Omit & { options: Omit & SceneOptionsDefaults; }; /** * Animated nodes representing the progress of the animation. */ progress: SceneProgress; }; export declare type SceneProgress = { /** * Progress value of the current screen. */ current: Animated.AnimatedInterpolation; /** * Progress value for the screen after this one in the stack. * This can be `undefined` in case the screen animating is the last one. */ next?: Animated.AnimatedInterpolation; /** * Progress value for the screen before this one in the stack. * This can be `undefined` in case the screen animating is the first one. */ previous?: Animated.AnimatedInterpolation; }; export declare type StackHeaderMode = 'float' | 'screen'; export declare type StackPresentationMode = 'card' | 'modal'; export declare type StackHeaderOptions = Omit & { /** * String or a function that returns a React Element to be used by the header. * Defaults to screen `title` or route name. * * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument. * The title string is passed in `children`. */ headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode); /** * Function which returns a React Element to display on the left side of the header. */ headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode; /** * Function which returns a React Element to display on the right side of the header. */ headerRight?: (props: HeaderButtonProps) => React.ReactNode; /** * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`. */ headerBackAllowFontScaling?: boolean; /** * Accessibility label for the header back button. */ headerBackAccessibilityLabel?: string; /** * ID to locate this back button in tests. */ headerBackTestID?: string; /** * Title string used by the back button on iOS. * Defaults to the previous screen's title, or "Back" if there's not enough space. * Use `headerBackTitleVisible: false` to hide it. */ headerBackTitle?: string; /** * Whether the back button title should be visible or not. * * Defaults to `true` on iOS, `false` on Android. */ headerBackTitleVisible?: boolean; /** * Style object for the back title. */ headerBackTitleStyle?: StyleProp; /** * Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default. */ headerTruncatedBackTitle?: string; /** * Function which returns a React Element to display custom image in header's back button. * It receives the `tintColor` in in the options object as an argument. object. * Defaults to Image component with a the default back icon image for the platform (a chevron on iOS and an arrow on Android). */ headerBackImage?: React.ComponentProps['backImage']; }; export declare type StackHeaderProps = { /** * Layout of the screen. */ layout: Layout; /** * Options for the back button. */ back?: { /** * Title of the previous screen. */ title: string; }; /** * Animated nodes representing the progress of the animation. */ progress: SceneProgress; /** * Options for the current screen. */ options: StackNavigationOptions; /** * Route object for the current screen. */ route: Route; /** * Navigation prop for the header. */ navigation: StackNavigationProp; /** * Interpolated styles for various elements in the header. */ styleInterpolator: StackHeaderStyleInterpolator; }; export declare type StackDescriptor = Descriptor, RouteProp>; export declare type StackDescriptorMap = Record; export declare type StackNavigationOptions = StackHeaderOptions & Partial & { /** * 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 the header floats above the screen or part of the screen. * Defaults to `float` on iOS for non-modals, and `screen` for the rest. */ headerMode?: StackHeaderMode; /** * Whether to show the header. The header is shown by default. * 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>; }) => 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. * * You should also specify `detachPreviousScreen: false` in options when using a transparent background * so that the previous screen isn't detached and stays below the current screen. * * You might also need to change the animation of the screen using `cardStyleInterpolator` * so that the previous screen isn't transformed or invisible. */ cardStyle?: StyleProp; /** * Whether this screen should be presented as a modal or a regular card. * * Specifying this will configure several options: * - `card`: Use the default OS animations for iOS and Android screen transitions. * - `modal`: Use Modal animations. This changes a few things: * - Sets `headerMode` to `screen` for the screen unless specified otherwise. * - Changes the screen animation to match the platform behavior for modals. * - `transparentModal`: Similar to `modal`. This changes following things: * - Sets `headerMode` to `screen` for the screen unless specified otherwise. * - Sets background color of the screen to transparent, so previous screen is visible * - Adjusts the `detachPreviousScreen` option so that the previous screen stays rendered. * - Prevents the previous screen from animating from its last position. * - Changes the screen animation to a vertical slide animation. * * Defaults to 'card'. */ presentation?: 'card' | 'modal' | 'transparentModal'; /** * 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; /** * Distance of touch start from the edge of the screen to recognize gestures. * Not supported on Web. */ gestureResponseDistance?: number; /** * Number which determines the relevance of velocity for the gesture. Defaults to 0.3. * Not supported on Web. */ gestureVelocityImpact?: 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 for modals, otherwise `true`. */ detachPreviousScreen?: boolean; /** * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen from this screen. * Defaults to `true`. */ keyboardHandlingEnabled?: boolean; /** * Whether inactive screens should be suspended from re-rendering. Defaults to `false`. * Defaults to `true` when `enableFreeze()` is run at the top of the application. * Requires `react-native-screens` version >=3.16.0. * * Only supported on iOS and Android. */ freezeOnBlur?: boolean; }; export declare type StackNavigationConfig = { /** * Whether inactive screens should be detached from the view hierarchy to save memory. * This will have no effect if you disable `react-native-screens`. * * Defaults to `true`. */ detachInactiveScreens?: boolean; }; export declare type TransitionSpec = { animation: 'spring'; config: Omit; } | { animation: 'timing'; config: Omit; }; export declare type StackCardInterpolationProps = { /** * Values for the current screen. */ current: { /** * Animated node representing the progress value of the current screen. */ progress: Animated.AnimatedInterpolation; }; /** * Values for 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 with this interpolation 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; }; }; export declare 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; }; export declare type StackCardStyleInterpolator = (props: StackCardInterpolationProps) => StackCardInterpolatedStyle; export declare 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 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; }; }; export declare 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; }; export declare type StackHeaderStyleInterpolator = (props: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle; export declare 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; }; export {}; //# sourceMappingURL=types.d.ts.map