@react-navigation/stack
- Version 6.3.17
- Published
- 665 kB
- 3 dependencies
- MIT license
Install
npm i @react-navigation/stack
yarn add @react-navigation/stack
pnpm add @react-navigation/stack
Overview
Stack navigator component for iOS and Android with animated transitions and gestures
Index
Variables
Functions
Classes
Type Aliases
Namespaces
Variables
variable CardAnimationContext
const CardAnimationContext: React.Context<StackCardInterpolationProps>;
variable GestureHandlerRefContext
const GestureHandlerRefContext: React.Context<React.Ref<React.ComponentType<any>>>;
variable Header
const Header: React.NamedExoticComponent<StackHeaderProps>;
Functions
function createStackNavigator
createStackNavigator: <ParamList extends ParamListBase>() => any;
function useCardAnimation
useCardAnimation: () => import('..').StackCardInterpolationProps;
function useGestureHandlerRef
useGestureHandlerRef: () => React.Ref<React.ComponentType<any>>;
Classes
class StackView
class StackView extends React.Component<Props, State> {}
property state
state: State;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( props: Readonly<Props>, state: Readonly<State>) => | { routes: Route<string, object | undefined>[]; previousRoutes: Route<string, object | undefined>[]; descriptors: StackDescriptorMap; previousDescriptors: StackDescriptorMap; openingRouteKeys?: undefined; closingRouteKeys?: undefined; replacingRouteKeys?: undefined; } | { routes: (Readonly<{ key: string; name: string; path?: string | undefined; }> & Readonly<{ params?: Readonly<object | undefined> }> & { state?: | Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: (Readonly<{ key: string; name: string; path?: string | undefined; }> & Readonly<{ params?: Readonly<object | undefined>; }> & any)[]; type: string; stale: false; }> | import('@react-navigation/native').PartialState< Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: (Readonly<{ key: string; name: string; path?: string | undefined; }> & Readonly<{ params?: Readonly<object | undefined>; }> & any)[]; type: string; stale: false; }> > | undefined; })[]; previousRoutes: (Readonly<{ key: string; name: string; path?: string | undefined; }> & Readonly<{ params?: Readonly<object | undefined> }> & { state?: | Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: (Readonly<{ key: string; name: string; path?: string | undefined; }> & Readonly<{ params?: Readonly<object | undefined>; }> & any)[]; type: string; stale: false; }> | import('@react-navigation/native').PartialState< Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: (Readonly<{ key: string; name: string; path?: string | undefined; }> & Readonly<{ params?: Readonly<object | undefined>; }> & any)[]; type: string; stale: false; }> > | undefined; })[]; previousDescriptors: StackDescriptorMap; openingRouteKeys: string[]; closingRouteKeys: string[]; replacingRouteKeys: string[]; descriptors: StackDescriptorMap; };
method render
render: () => JSX.Element;
Type Aliases
type StackCardInterpolatedStyle
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
type StackCardInterpolationProps = { /** * Values for the current screen. */ current: { /** * Animated node representing the progress value of the current screen. */ progress: Animated.AnimatedInterpolation<number>; }; /** * 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<number>; }; /** * 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<0 | 1>; /** * Animated node representing whether the card is being swiped (1 - swiping, 0 - not swiping). */ swiping: Animated.AnimatedInterpolation<0 | 1>; /** * Animated node representing multiplier when direction is inverted (-1 - inverted, 1 - normal). */ inverted: Animated.AnimatedInterpolation<-1 | 1>; /** * 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
type StackCardStyleInterpolator = ( props: StackCardInterpolationProps) => StackCardInterpolatedStyle;
type StackHeaderInterpolatedStyle
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
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<number>; }; /** * 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<number>; }; /** * 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 StackHeaderProps
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<string>; /** * Navigation prop for the header. */ navigation: StackNavigationProp<ParamListBase>; /** * Interpolated styles for various elements in the header. */ styleInterpolator: StackHeaderStyleInterpolator;};
type StackHeaderStyleInterpolator
type StackHeaderStyleInterpolator = ( props: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
type StackNavigationEventMap
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; };};
type StackNavigationOptions
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 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<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. * * 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<ViewStyle>; /** * 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; };
type StackNavigationProp
type StackNavigationProp< ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp< ParamList, RouteName, NavigatorID, StackNavigationState<ParamList>, StackNavigationOptions, StackNavigationEventMap> & StackActionHelpers<ParamList>;
type StackScreenProps
type StackScreenProps< ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = { navigation: StackNavigationProp<ParamList, RouteName, NavigatorID>; route: RouteProp<ParamList, RouteName>;};
type TransitionPreset
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;};
Namespaces
namespace CardStyleInterpolators
module 'lib/typescript/src/TransitionConfigs/CardStyleInterpolators.d.ts' {}
Standard iOS-style slide in from the right.
function forBottomSheetAndroid
forBottomSheetAndroid: ({ current, inverted, layouts: { screen }, closing,}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard bottom sheet slide in from the bottom for Android.
function forFadeFromBottomAndroid
forFadeFromBottomAndroid: ({ current, inverted, layouts: { screen }, closing,}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard Android-style fade in from the bottom for Android Oreo.
function forFadeFromCenter
forFadeFromCenter: ({ current: { progress },}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Simple fade animation for dialogs
function forHorizontalIOS
forHorizontalIOS: ({ current, next, inverted, layouts: { screen },}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard iOS-style slide in from the right.
function forModalPresentationIOS
forModalPresentationIOS: ({ index, current, next, inverted, layouts: { screen }, insets,}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard iOS-style modal animation in iOS 13.
function forNoAnimation
forNoAnimation: () => StackCardInterpolatedStyle;
function forRevealFromBottomAndroid
forRevealFromBottomAndroid: ({ current, next, inverted, layouts: { screen },}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard Android-style reveal from the bottom for Android Pie.
function forScaleFromCenterAndroid
forScaleFromCenterAndroid: ({ current, next, closing,}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard Android-style zoom for Android 10.
function forVerticalIOS
forVerticalIOS: ({ current, inverted, layouts: { screen },}: StackCardInterpolationProps) => StackCardInterpolatedStyle;
Standard iOS-style slide in from the bottom (used for modals).
namespace HeaderStyleInterpolators
module 'lib/typescript/src/TransitionConfigs/HeaderStyleInterpolators.d.ts' {}
Standard UIKit style animation for the header where the title fades into the back button label.
function forFade
forFade: ({ current, next,}: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
Simple fade animation for the header elements.
function forNoAnimation
forNoAnimation: () => StackHeaderInterpolatedStyle;
function forSlideLeft
forSlideLeft: ({ current, next, layouts: { screen },}: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
Simple translate animation to translate the header to left.
function forSlideRight
forSlideRight: ({ current, next, layouts: { screen },}: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
Simple translate animation to translate the header to right.
function forSlideUp
forSlideUp: ({ current, next, layouts: { header },}: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
Simple translate animation to translate the header to slide up.
function forUIKit
forUIKit: ({ current, next, layouts,}: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
Standard UIKit style animation for the header where the title fades into the back button label.
namespace TransitionPresets
module 'lib/typescript/src/TransitionConfigs/TransitionPresets.d.ts' {}
Standard iOS navigation transition.
variable BottomSheetAndroid
const BottomSheetAndroid: TransitionPreset;
Standard bottom sheet slide transition for Android 10.
variable DefaultTransition
const DefaultTransition: TransitionPreset;
Default navigation transition for the current platform.
variable FadeFromBottomAndroid
const FadeFromBottomAndroid: TransitionPreset;
Standard Android navigation transition when opening or closing an Activity on Android < 9 (Oreo).
variable ModalFadeTransition
const ModalFadeTransition: TransitionPreset;
Fade transition for transparent modals.
variable ModalPresentationIOS
const ModalPresentationIOS: TransitionPreset;
Standard iOS modal presentation style (introduced in iOS 13).
variable ModalSlideFromBottomIOS
const ModalSlideFromBottomIOS: TransitionPreset;
Standard iOS navigation transition for modals.
variable ModalTransition
const ModalTransition: TransitionPreset;
Default modal transition for the current platform.
variable RevealFromBottomAndroid
const RevealFromBottomAndroid: TransitionPreset;
Standard Android navigation transition when opening or closing an Activity on Android 9 (Pie).
variable ScaleFromCenterAndroid
const ScaleFromCenterAndroid: TransitionPreset;
Standard Android navigation transition when opening or closing an Activity on Android 10 (Q).
variable SlideFromRightIOS
const SlideFromRightIOS: TransitionPreset;
Standard iOS navigation transition.
namespace TransitionSpecs
module 'lib/typescript/src/TransitionConfigs/TransitionSpecs.d.ts' {}
Exact values from UINavigationController's animation configuration.
variable BottomSheetSlideInSpec
const BottomSheetSlideInSpec: TransitionSpec;
Configuration for bottom sheet slide in animation from Material Design. See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
variable BottomSheetSlideOutSpec
const BottomSheetSlideOutSpec: TransitionSpec;
Configuration for bottom sheet slide out animation from Material Design. See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
variable FadeInFromBottomAndroidSpec
const FadeInFromBottomAndroidSpec: TransitionSpec;
Configuration for activity open animation from Android Nougat. See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
variable FadeOutToBottomAndroidSpec
const FadeOutToBottomAndroidSpec: TransitionSpec;
Configuration for activity close animation from Android Nougat. See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
variable RevealFromBottomAndroidSpec
const RevealFromBottomAndroidSpec: TransitionSpec;
Approximate configuration for activity open animation from Android Pie. See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
variable ScaleFromCenterAndroidSpec
const ScaleFromCenterAndroidSpec: TransitionSpec;
Approximate configuration for activity open animation from Android Q. See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
variable TransitionIOSSpec
const TransitionIOSSpec: TransitionSpec;
Exact values from UINavigationController's animation configuration.
Package Files (13)
- lib/typescript/src/TransitionConfigs/CardStyleInterpolators.d.ts
- lib/typescript/src/TransitionConfigs/HeaderStyleInterpolators.d.ts
- lib/typescript/src/TransitionConfigs/TransitionPresets.d.ts
- lib/typescript/src/TransitionConfigs/TransitionSpecs.d.ts
- lib/typescript/src/index.d.ts
- lib/typescript/src/navigators/createStackNavigator.d.ts
- lib/typescript/src/types.d.ts
- lib/typescript/src/utils/CardAnimationContext.d.ts
- lib/typescript/src/utils/GestureHandlerRefContext.d.ts
- lib/typescript/src/utils/useCardAnimation.d.ts
- lib/typescript/src/utils/useGestureHandlerRef.d.ts
- lib/typescript/src/views/Header/Header.d.ts
- lib/typescript/src/views/Stack/StackView.d.ts
Dependencies (3)
Dev Dependencies (13)
Peer Dependencies (6)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-navigation/stack
.
- Markdown[](https://www.jsdocs.io/package/@react-navigation/stack)
- HTML<a href="https://www.jsdocs.io/package/@react-navigation/stack"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 1874 ms. - Missing or incorrect documentation? Open an issue for this package.