Type alias NativeStackNavigationOptions

NativeStackNavigationOptions: {
    animation?: ScreenProps["stackAnimation"];
    animationDuration?: number;
    animationTypeForReplace?: ScreenProps["replaceAnimation"];
    autoHideHomeIndicator?: boolean;
    contentStyle?: StyleProp<ViewStyle>;
    customAnimationOnGesture?: boolean;
    freezeOnBlur?: boolean;
    fullScreenGestureEnabled?: boolean;
    gestureDirection?: ScreenProps["swipeDirection"];
    gestureEnabled?: boolean;
    header?: ((props) => ReactNode);
    headerBackButtonMenuEnabled?: boolean;
    headerBackImageSource?: ImageSourcePropType;
    headerBackTitle?: string;
    headerBackTitleStyle?: StyleProp<{
        fontFamily?: string;
        fontSize?: number;
    }>;
    headerBackTitleVisible?: boolean;
    headerBackVisible?: boolean;
    headerBackground?: (() => ReactNode);
    headerBlurEffect?: ScreenStackHeaderConfigProps["blurEffect"];
    headerLargeStyle?: StyleProp<{
        backgroundColor?: string;
    }>;
    headerLargeTitle?: boolean;
    headerLargeTitleShadowVisible?: boolean;
    headerLargeTitleStyle?: StyleProp<{
        color?: string;
        fontFamily?: string;
        fontSize?: number;
        fontWeight?: string;
    }>;
    headerLeft?: ((props) => ReactNode);
    headerRight?: ((props) => ReactNode);
    headerSearchBarOptions?: SearchBarProps;
    headerShadowVisible?: boolean;
    headerShown?: boolean;
    headerStyle?: StyleProp<{
        backgroundColor?: string;
    }>;
    headerTintColor?: string;
    headerTitle?: string | ((props) => ReactNode);
    headerTitleAlign?: "left" | "center";
    headerTitleStyle?: StyleProp<Pick<TextStyle, "fontFamily" | "fontSize" | "fontWeight"> & {
        color?: string;
    }>;
    headerTransparent?: boolean;
    navigationBarColor?: string;
    navigationBarHidden?: boolean;
    orientation?: ScreenProps["screenOrientation"];
    presentation?: Exclude<ScreenProps["stackPresentation"], "push"> | "card";
    statusBarAnimation?: ScreenProps["statusBarAnimation"];
    statusBarColor?: string;
    statusBarHidden?: boolean;
    statusBarStyle?: ScreenProps["statusBarStyle"];
    statusBarTranslucent?: boolean;
    title?: string;
}

Type declaration

  • Optional animation?: ScreenProps["stackAnimation"]

    How the screen should animate when pushed or popped.

    Supported values:

    • "default": use the platform default animation
    • "fade": fade screen in or out
    • "flip": flip the screen, requires presentation: "modal" (iOS only)
    • "simple_push": use the platform default animation, but without shadow and native header transition (iOS only)
    • "slide_from_bottom": slide in the new screen from bottom
    • "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS)
    • "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
    • "none": don't animate the screen

    Only supported on iOS and Android.

  • Optional animationDuration?: number

    Changes the duration (in milliseconds) of slide_from_bottom, fade_from_bottom, fade and simple_push transitions on iOS. Defaults to 350. The duration of default and flip transitions isn't customizable.

    Platform

    ios

  • Optional animationTypeForReplace?: ScreenProps["replaceAnimation"]

    The type of animation to use when this screen replaces another screen. Defaults to pop.

    Supported values:

    • "push": the new screen will perform push animation.
    • "pop": the new screen will perform pop animation.

    Only supported on iOS and Android.

  • Optional autoHideHomeIndicator?: boolean

    Whether the home indicator should prefer to stay hidden on this screen. Defaults to false.

    Platform

    ios

  • Optional contentStyle?: StyleProp<ViewStyle>

    Style object for the scene content.

  • Optional customAnimationOnGesture?: boolean

    Whether the gesture to dismiss should use animation provided to animation prop. Defaults to false.

    Doesn't affect the behavior of screens presented modally.

    Platform

    ios

  • Optional freezeOnBlur?: 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.

  • Optional fullScreenGestureEnabled?: boolean

    Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same transition animation as simple_push. This behavior can be changed by setting customAnimationOnGesture prop. Achieving the default iOS animation isn't possible due to platform limitations. Defaults to false.

    Doesn't affect the behavior of screens presented modally.

    Platform

    ios

  • Optional gestureDirection?: ScreenProps["swipeDirection"]

    Sets the direction in which you should swipe to dismiss the screen. When using vertical option, options fullScreenGestureEnabled: true, customAnimationOnGesture: true and animation: 'slide_from_bottom' are set by default.

    Supported values:

    • vertical – dismiss screen vertically
    • horizontal – dismiss screen horizontally (default)

    Platform

    ios

  • Optional gestureEnabled?: boolean

    Whether you can use gestures to dismiss this screen. Defaults to true.

    Only supported on iOS.

    Platform

    ios

  • Optional header?: ((props) => ReactNode)

    Function that given HeaderProps returns a React Element to display as a header.

  • Optional headerBackButtonMenuEnabled?: boolean

    Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to true. Requires react-native-screens version >=3.3.0.

    Only supported on iOS.

    Platform

    ios

  • Optional headerBackImageSource?: ImageSourcePropType

    Image to display in the header as the icon in the back button. Defaults to back icon image for the platform

    • A chevron on iOS
    • An arrow on Android
  • Optional headerBackTitle?: string

    Title string used by the back button on iOS. Defaults to the previous scene's title, or "Back" if there's not enough space. Use headerBackTitleVisible: false to hide it.

    Only supported on iOS.

    Platform

    ios

  • Optional headerBackTitleStyle?: StyleProp<{
        fontFamily?: string;
        fontSize?: number;
    }>

    Style object for header back title. Supported properties:

    • fontFamily
    • fontSize

    Only supported on iOS.

    Platform

    ios

  • Optional headerBackTitleVisible?: boolean

    Whether the back button title should be visible or not.

    Only supported on iOS.

    Platform

    ios

  • Optional headerBackVisible?: boolean

    Whether the back button is visible in the header. You can use it to show a back button alongside headerLeft if you have specified it.

    This will have no effect on the first screen in the stack.

  • Optional headerBackground?: (() => ReactNode)

    Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image, a gradient, blur effect etc. You can use this with headerTransparent to render content underneath a translucent header.

  • Optional headerBlurEffect?: ScreenStackHeaderConfigProps["blurEffect"]

    Blur effect for the translucent header. The headerTransparent option needs to be set to true for this to work.

    Only supported on iOS.

    Platform

    ios

  • Optional headerLargeStyle?: StyleProp<{
        backgroundColor?: string;
    }>

    Style of the header when a large title is shown. The large title is shown if headerLargeTitle is true and the edge of any scrollable content reaches the matching edge of the header.

    Supported properties:

    • backgroundColor

    Only supported on iOS.

    Platform

    ios

  • Optional headerLargeTitle?: boolean

    Whether to enable header with large title which collapses to regular header on scroll.

    For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc.

    Only supported on iOS.

    Platform

    ios

  • Optional headerLargeTitleShadowVisible?: boolean

    Whether drop shadow of header is visible when a large title is shown.

    Only supported on iOS.

    Platform

    ios

  • Optional headerLargeTitleStyle?: StyleProp<{
        color?: string;
        fontFamily?: string;
        fontSize?: number;
        fontWeight?: string;
    }>

    Style object for large title in header. Supported properties:

    • fontFamily
    • fontSize
    • fontWeight
    • color

    Only supported on iOS.

    Platform

    ios

  • Optional headerLeft?: ((props) => ReactNode)

    Function which returns a React Element to display on the left side of the header. This replaces the back button. See headerBackVisible to show the back button along side left element.

  • Optional headerRight?: ((props) => ReactNode)

    Function which returns a React Element to display on the right side of the header.

  • Optional headerSearchBarOptions?: SearchBarProps

    Options to render a native search bar. You also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc. If you don't have a ScrollView, specify headerTransparent: false.

    Only supported on iOS and Android.

  • Optional headerShadowVisible?: boolean

    Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.

  • Optional headerShown?: boolean

    Whether to show the header. The header is shown by default. Setting this to false hides the header.

  • Optional headerStyle?: StyleProp<{
        backgroundColor?: string;
    }>

    Style object for header. Supported properties:

    • backgroundColor
  • Optional headerTintColor?: string

    Tint color for the header. Changes the color of back button and title.

  • Optional headerTitle?: string | ((props) => ReactNode)

    String or a function that returns a React Element to be used by the header. Defaults to screen title or route name.

    When a function is passed, it receives tintColor andchildren in the options object as an argument. The title string is passed in children.

    Note that if you render a custom element by passing a function, animations for the title won't work.

  • Optional headerTitleAlign?: "left" | "center"

    How to align the the header title. Defaults to left on platforms other than iOS.

    Not supported on iOS. It's always center on iOS and cannot be changed.

  • Optional headerTitleStyle?: StyleProp<Pick<TextStyle, "fontFamily" | "fontSize" | "fontWeight"> & {
        color?: string;
    }>

    Style object for header title. Supported properties:

    • fontFamily
    • fontSize
    • fontWeight
    • color
  • Optional headerTransparent?: boolean

    Boolean indicating whether the navigation bar is translucent. Setting this to true makes the header absolutely positioned, and changes the background color to transparent unless specified in headerStyle.

  • Optional navigationBarColor?: string

    Sets the navigation bar color. Defaults to initial navigation bar color.

    Platform

    android

  • Optional navigationBarHidden?: boolean

    Sets the visibility of the navigation bar. Defaults to false.

    Platform

    android

  • Optional orientation?: ScreenProps["screenOrientation"]

    The display orientation to use for the screen.

    Supported values:

    • "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
    • "all": all orientations are permitted.
    • "portrait": portrait orientations are permitted.
    • "portrait_up": right-side portrait orientation is permitted.
    • "portrait_down": upside-down portrait orientation is permitted.
    • "landscape": landscape orientations are permitted.
    • "landscape_left": landscape-left orientation is permitted.
    • "landscape_right": landscape-right orientation is permitted.

    Only supported on iOS and Android.

  • Optional presentation?: Exclude<ScreenProps["stackPresentation"], "push"> | "card"

    How should the screen be presented.

    Supported values:

    • "card": the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme.
    • "modal": the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen.
    • "transparentModal": the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background.
    • "containedModal": will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
    • "containedTransparentModal": will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
    • "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
    • "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.

    Only supported on iOS and Android.

  • Optional statusBarAnimation?: ScreenProps["statusBarAnimation"]

    Sets the status bar animation (similar to the StatusBar component). Requires setting View controller-based status bar appearance -> YES (or removing the config) in your Info.plist file.

    Only supported on iOS.

    Platform

    ios

  • Optional statusBarColor?: string

    Sets the status bar color (similar to the StatusBar component). Defaults to initial status bar color.

    Platform

    android

  • Optional statusBarHidden?: boolean

    Whether the status bar should be hidden on this screen. Requires setting View controller-based status bar appearance -> YES in your Info.plist file.

    Only supported on iOS.

    Platform

    ios

  • Optional statusBarStyle?: ScreenProps["statusBarStyle"]

    Sets the status bar color (similar to the StatusBar component). Requires setting View controller-based status bar appearance -> YES (or removing the config) in your Info.plist file.

    Only supported on iOS.

    Platform

    ios

  • Optional statusBarTranslucent?: boolean

    Sets the translucency of the status bar. Defaults to false.

    Platform

    android

  • Optional title?: string

    String that can be displayed in the header as a fallback for headerTitle.