react-native-screens

property experimentalControlNavigationStateInJS

experimentalControlNavigationStateInJS?: boolean;

• Experimental prop for changing container control.

  If set to true, tab screen changes need to be handled by JS using onNativeFocusChange callback (controlled/programatically-driven).

  If set to false, tab screen change will not be prevented by the native side (managed/natively-driven).

  On iOS, some features are not fully implemented for managed tabs (e.g. overrideScrollViewContentInsetAdjustmentBehavior).

  On Android, only controlled tabs are currently supported.

  Defaults to false.

  android, ios

property onNativeFocusChange

onNativeFocusChange?: (
    event: NativeSyntheticEvent<NativeFocusChangeEvent>
) => void;

• A callback that gets invoked when user requests change of focused tab screen.

  android, ios

property tabBarBackgroundColor

tabBarBackgroundColor?: ColorValue;

• Specifies the background color for the entire tab bar.

  android

property tabBarControllerMode

tabBarControllerMode?: TabBarControllerMode;

• Specifies the display mode for the tab bar.

  Available starting from iOS 18. Not supported on tvOS.

  The following values are currently supported:

  - automatic - the system sets the display mode based on the tab’s content - tabBar - the system displays the content only as a tab bar - tabSidebar - the tab bar is displayed as a sidebar

  See the official documentation for more details:

  See Also

  • UITabBarController.Mode

    Defaults to automatic.

    ios iOS 18 or higher

property tabBarItemActiveIndicatorColor

tabBarItemActiveIndicatorColor?: ColorValue;

• Specifies the background color of the active indicator.

  android

property tabBarItemActiveIndicatorEnabled

tabBarItemActiveIndicatorEnabled?: boolean;

• Specifies if the active indicator should be used.

  true

  android

property tabBarItemIconColor

tabBarItemIconColor?: ColorValue;

• Specifies the icon color for each tab bar item.

  android

property tabBarItemIconColorActive

tabBarItemIconColorActive?: ColorValue;

• Specifies the icon color for each tab bar item in active state.

  If not provided, tabBarItemIconColor is used.

  android

property tabBarItemLabelVisibilityMode

tabBarItemLabelVisibilityMode?: TabBarItemLabelVisibilityMode;

• Specifies the label visibility mode.

  The label visibility mode defines when the labels of each item bar should be displayed.

  The following values are available: - auto - the label behaves as in “labeled” mode when there are 3 items or less, or as in “selected” mode when there are 4 items or more - selected - the label is only shown on the selected navigation item - labeled - the label is shown on all navigation items - unlabeled - the label is hidden for all navigation items

  The supported values correspond to the official Material Components documentation:

  See Also

  • Material Components documentation

    auto android

property tabBarItemRippleColor

tabBarItemRippleColor?: ColorValue;

• Specifies the color of each tab bar item's ripple effect.

  android

property tabBarItemTitleFontColor

tabBarItemTitleFontColor?: TextStyle['color'];

• Specifies the font color used for the title of each tab bar item.

  android

property tabBarItemTitleFontColorActive

tabBarItemTitleFontColorActive?: TextStyle['color'];

• Specifies the font color used for the title of each tab bar item in active state.

  If not provided, tabBarItemTitleFontColor is used.

  android

property tabBarItemTitleFontFamily

tabBarItemTitleFontFamily?: TextStyle['fontFamily'];

• Specifies the font family used for the title of each tab bar item.

  android

property tabBarItemTitleFontSize

tabBarItemTitleFontSize?: TextStyle['fontSize'];

• Specifies the font size used for the title of each tab bar item.

  The size is represented in scale-independent pixels (sp).

  android

property tabBarItemTitleFontSizeActive

tabBarItemTitleFontSizeActive?: TextStyle['fontSize'];

• Specifies the font size used for the title of each tab bar item in active state.

  The size is represented in scale-independent pixels (sp).

  android

property tabBarItemTitleFontStyle

tabBarItemTitleFontStyle?: TextStyle['fontStyle'];

• Specifies the font style used for the title of each tab bar item.

  android

property tabBarItemTitleFontWeight

tabBarItemTitleFontWeight?: TextStyle['fontWeight'];

• Specifies the font weight used for the title of each tab bar item.

  android

property tabBarMinimizeBehavior

tabBarMinimizeBehavior?: TabBarMinimizeBehavior;

• Specifies the minimize behavior for the tab bar.

  Available starting from iOS 26.

  The following values are currently supported:

  - automatic - resolves to the system default minimize behavior - never - the tab bar does not minimize - onScrollDown - the tab bar minimizes when scrolling down and expands when scrolling back up - onScrollUp - the tab bar minimizes when scrolling up and expands when scrolling back down

  The supported values correspond to the official UIKit documentation:

  See Also

  • UITabBarController.MinimizeBehavior

    Defaults to automatic.

    ios iOS 26 or higher

property tabBarTintColor

tabBarTintColor?: ColorValue;

• Specifies the color used for selected tab's text and icon color.

  Starting from iOS 26, it also impacts glow of Liquid Glass tab selection view.

  tabBarItemTitleFontColor and tabBarItemIconColor defined on BottomTabsScreen component override this color.

  ios

property compactInline

compactInline?: BottomTabsScreenItemAppearance;

• Specifies the appearance of tab bar items when they are in compact inline layout.

  Tab bar items in compact inline layout have the icon next to the title. Compact inline layout is used in compact-width environments, e.g. in landscape orientation on the iPhone 16 Pro.

  Complete list of size classes for iOS and iPadOS devices is available in Apple's Human Interface Guidelines:

  See Also

  • HIG: Device size classes

    ios

property inline

inline?: BottomTabsScreenItemAppearance;

• Specifies the appearance of tab bar items when they are in inline layout.

  Tab bar items in inline layout have the icon next to the title. Inline layout is used in regular-width environments, e.g. in landscape orientation on the iPhone 16 Pro Max.

  Complete list of size classes for iOS and iPadOS devices is available in Apple's Human Interface Guidelines:

  See Also

  • HIG: Device size classes

    ios

property stacked

stacked?: BottomTabsScreenItemAppearance;

• Specifies the appearance of tab bar items when they are in stacked layout.

  Tab bar items in stacked layout have the icon above the title. Stacked layout is used e.g. on the iPhone in portrait orientation.

  ios

property tabBarBackgroundColor

tabBarBackgroundColor?: ColorValue;

• Specifies the background color for the entire tab bar when tab screen is selected.

  This property does not affect the tab bar starting from iOS 26.

  ios iOS 18 or lower

property tabBarBlurEffect

tabBarBlurEffect?: BottomTabsScreenBlurEffect;

• Specifies the blur effect applied to the tab bar when tab screen is selected.

  Works with backgroundColor's alpha < 1.

  This property does not affect the tab bar starting from iOS 26.

  The following values are currently supported:

  - none - disables blur effect - systemDefault - uses UIKit's default tab bar blur effect - one of styles mapped from UIKit's UIBlurEffectStyle, e.g. systemUltraThinMaterial

  Complete list of possible blur effect styles is available in the official UIKit documentation:

  See Also

  • UIBlurEffect.Style

    systemDefault

    ios iOS 18 or lower

property tabBarShadowColor

tabBarShadowColor?: ColorValue;

• Specifies the shadow color for the tab bar when tab screen is selected.

  This property does not affect the tab bar starting from iOS 26.

  ios iOS 18 or lower

property disabled

disabled?: BottomTabsScreenItemStateAppearance;

• Specifies the tab bar item appearance when it's disabled.

  ios

property focused

focused?: BottomTabsScreenItemStateAppearance;

• Specifies the tab bar item appearance when it's focused.

  ios

property normal

normal?: BottomTabsScreenItemStateAppearance;

• Specifies the tab bar item appearance when it's enabled, unselected, and not the focused item.

  ios

property selected

selected?: BottomTabsScreenItemStateAppearance;

• Specifies the tab bar item appearance when it's selected.

  ios

property tabBarItemBadgeBackgroundColor

tabBarItemBadgeBackgroundColor?: ColorValue;

• Specifies the background color of badges for each tab bar item when tab screen is selected.

  ios

property tabBarItemIconColor

tabBarItemIconColor?: ColorValue;

• Specifies the icon color for each tab bar item when tab screen is selected.

  This also impacts the title text color.

  Starting from iOS 26, it only applies to selected tab bar item. Other items adopt a dark or light appearance depending on the theme of the tab bar.

  Is overridden by tabBarItemTitleFontColor (for title text color). Overrides tabBarTintColor.

  ios

property tabBarItemTitleFontColor

tabBarItemTitleFontColor?: TextStyle['color'];

• Specifies the font color used for the title of each tab bar item when tab screen is selected.

  Overrides the color defined in tabBarTintColor and tabBarItemIconColor.

  ios

property tabBarItemTitleFontFamily

tabBarItemTitleFontFamily?: TextStyle['fontFamily'];

• Specifies the font family used for the title of each tab bar item when tab screen is selected.

  ios

property tabBarItemTitleFontSize

tabBarItemTitleFontSize?: TextStyle['fontSize'];

• Specifies the font size used for the title of each tab bar item when tab screen is selected.

  ios

property tabBarItemTitleFontStyle

tabBarItemTitleFontStyle?: TextStyle['fontStyle'];

• Specifies the font style used for the title of each tab bar item when tab screen is selected.

  ios

property tabBarItemTitleFontWeight

tabBarItemTitleFontWeight?: TextStyle['fontWeight'];

• Specifies the font weight used for the title of each tab bar item when tab screen is selected.

  ios

property tabBarItemTitlePositionAdjustment

tabBarItemTitlePositionAdjustment?: {
    horizontal?: number;
    vertical?: number;
};

• Specifies the title offset for each tab bar item when tab screen is selected.

  Depending on the iOS version and the device's interface orientation, this setting may affect the alignment of the text, badge and icon.

  ios

property badgeValue

badgeValue?: string;

• Specifies content of tab bar item badge.

  On iOS, badge is displayed as regular string.

  On Android, the value is interpreted in the following order: - if the string can be parsed to integer, displays the value as a number; - otherwise if the string is empty, displays "small dot" badge; - otherwise, displays the value as a text.

  android, ios

property children

children?: ViewProps['children'];

property freezeContents

freezeContents?: boolean;

• Allows to control whether contents of a tab screen should be frozen or not. This overrides any default behavior.

  undefined

property icon

icon?: PlatformIcon;

• Specifies the icon for the tab bar item.

  You can define an icon separately for each platform (in ios and android) or define a default icon in shared. The shared icon will be used on both platforms unless it is overridden by a platform-specific definition in ios or android.

  Supported values:

  Shared (both iOS and Android): - { type: 'imageSource', imageSource } Uses an image from the provided resource.

  Remarks: imageSource type doesn't support SVGs on Android. For loading SVGs use drawableResource type.

  iOS-only: - { type: 'sfSymbol', name } Uses an SF Symbol with the specified name. - { type: 'templateSource', templateSource } Uses the provided image as a template image. The icon color will depend on the current state of the tab bar item and icon color-related props.

  Android-only: - { type: 'drawableResource', name } Uses a drawable resource with the given name.

  Remarks: Requires passing a drawable to resources via Android Studio.

  On iOS, if no selectedIcon is provided, this icon will also be used as the selected state icon.

property isFocused

isFocused?: boolean;

• Determines selected tab.

  In controlled container mode, determines if tab screen is currently focused.

  In managed container mode, it only indicates initially selected tab.

  There should be exactly one focused screen at any given time.

  android, ios

property onDidAppear

onDidAppear?: BottomTabsScreenEventHandler<EmptyObject>;

• A callback that gets invoked when the tab screen did appear. This is called as soon as the transition ends.

  android, ios

property onDidDisappear

onDidDisappear?: BottomTabsScreenEventHandler<EmptyObject>;

• A callback that gets invoked when the tab screen did disappear. This is called as soon as the transition ends.

  android, ios

property onWillAppear

onWillAppear?: BottomTabsScreenEventHandler<EmptyObject>;

• A callback that gets invoked when the tab screen will appear. This is called as soon as the transition begins.

  android, ios

property onWillDisappear

onWillDisappear?: BottomTabsScreenEventHandler<EmptyObject>;

• A callback that gets invoked when the tab screen will disappear. This is called as soon as the transition begins.

  android, ios

property orientation

orientation?: BottomTabsScreenOrientation;

• Specifies supported orientations for the tab screen.

  Procedure for determining supported orientations: 1. Traversal initiates from the root component and moves to the deepest child possible. 2. Components are queried for their supported orientations: - if orientation is explicitly set (e.g., portrait, landscape), it is immediately used, - if orientation is set to inherit, the parent component is queried.

  Note that: - some components (like SplitViewHost) may choose not to query its child components, - Stack v4 implementation **ALWAYS** returns some supported orientations (allButUpsideDown by default), overriding orientation from tab screen.

  The following values are currently supported:

  - inherit - tab screen supports the same orientations as parent component, - all - tab screen supports all orientations, - allButUpsideDown - tab screen supports all but the upside-down portrait interface orientation, - portrait - tab screen supports both portrait-up and portrait-down interface orientations, - 'portraitUp' - tab screen supports a portrait-up interface orientation, - portraitDown - tab screen supports a portrait-down interface orientation, - landscape - tab screen supports both landscape-left and landscape-right interface orientations, - landscapeLeft - tab screen supports landscape-left interface orientaion, - landscapeRight - tab screen supports landscape-right interface orientaion.

  The supported values (apart from inherit, portrait, portraitUp, portraitDown) correspond to the official UIKit documentation:

  See Also

  • UIInterfaceOrientationMask

    inherit

    ios

property overrideScrollViewContentInsetAdjustmentBehavior

overrideScrollViewContentInsetAdjustmentBehavior?: boolean;

• Specifies if contentInsetAdjustmentBehavior of first ScrollView in first descendant chain from tab screen should be overridden back from never to automatic.

  By default, react-native's ScrollView has contentInsetAdjustmentBehavior set to never instead of UIKit-default (which is automatic). This prevents ScrollViews from respecting navigation bar insets. When this prop is set to true, automatic behavior is reverted.

  true

  ios

property placeholder

placeholder?: React.ReactNode | undefined;

• Defines what should be rendered when tab screen is frozen.

  See Also

  • `react-freeze`'s GitHub repository for more information about react-freeze.

    android, ios

property scrollEdgeAppearance

scrollEdgeAppearance?: BottomTabsScreenAppearance;

• Specifies the tab bar appearace when edge of scrollable content aligns with the edge of the tab bar.

  Allows to customize the appearance depending on the tab bar item layout (stacked, inline, compact inline) and state (normal, selected, focused, disabled).

  If this property is undefined, UIKit uses standardAppearance, modified to have a transparent background.

  ios

property scrollEdgeEffects

scrollEdgeEffects?: {
    bottom?: ScrollEdgeEffect;
    left?: ScrollEdgeEffect;
    right?: ScrollEdgeEffect;
    top?: ScrollEdgeEffect;
};

• Configures the scroll edge effect for the _content ScrollView_ (the ScrollView that is present in first descendants chain of the Screen). Depending on values set, it will blur the scrolling content below certain UI elements (Header Items, SearchBar) for the specifed edge of the ScrollView.

  When set in nested containers, i.e. ScreenStack inside BottomTabs, or the other way around, the ScrollView will use only the innermost one's config.

  ios

  iOS 26 or higher

property selectedIcon

selectedIcon?: PlatformIconIOS;

• Specifies the icon for tab bar item when it is selected.

  Supports the same values as icon property for iOS.

  To use selectedIcon, icon must also be provided.

  ios

property specialEffects

specialEffects?: {
    repeatedTabSelection?: {
        popToRoot?: boolean;
        scrollToTop?: boolean;
    };
};

• Specifies which special effects (also known as microinteractions) are enabled for the tab screen.

  For repeated tab selection (selecting already focused tab bar item), there are 2 supported special effects: - popToRoot - when Stack is nested inside tab screen and repeated selection is detected, the Stack will pop to root screen, - scrollToTop - when there is a ScrollView in first descendant chain from tab screen and repeated selection is detected, ScrollView will be scrolled to top.

  popToRoot has priority over scrollToTop.

  All special effects are enabled by default.

  ios

property standardAppearance

standardAppearance?: BottomTabsScreenAppearance;

• Specifies the standard tab bar appearance.

  Allows to customize the appearance depending on the tab bar item layout (stacked, inline, compact inline) and state (normal, selected, focused, disabled).

  ios

property systemItem

systemItem?: BottomTabsSystemItem;

• System-provided tab bar item with predefined icon and title

  Uses Apple's built-in tab bar items (e.g., bookmarks, contacts, downloads) with standard iOS styling and localized titles. Custom icon or selectedIcon properties will override the system icon, but the system-defined title cannot be customized.

  See Also

  • UITabBarItem.SystemItem ios

property tabBarItemBadgeBackgroundColor

tabBarItemBadgeBackgroundColor?: ColorValue;

• Specifies the background color of the badge.

  android

property tabBarItemBadgeTextColor

tabBarItemBadgeTextColor?: ColorValue;

• Specifies the color of the text in the badge.

  android

property tabKey

tabKey: string;

• Identifies screen, e.g. when receiving onNativeFocusChange event.

  android, ios

property title

title?: string;

• Title of the tab screen, displayed in the tab bar item.

  android, ios

property stackUseEffectCallback

stackUseEffectCallback: (
    stackRef: React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>
) => void;

property currentScreenId

currentScreenId?: string;

property goBackGesture

goBackGesture?: GoBackGesture;

property screenEdgeGesture

screenEdgeGesture?: boolean;

property screensRefs

screensRefs?: React.MutableRefObject<ScreensRefsHolder>;

property transitionAnimation

transitionAnimation?: AnimatedScreenTransition;

property children

children?: React.ReactNode;

property gestureDetectorBridge

gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;

property destructive

destructive?: boolean;

• Indicates whether to apply destructive style to the item.

  Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive

property disabled

disabled?: boolean;

• Indicates whether to apply disabled style to the item.

  Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/disabled

property discoverabilityLabel

discoverabilityLabel?: string;

• Discoverability label of the menu item.

  Read more: https://developer.apple.com/documentation/uikit/uiaction/discoverabilitytitle

property hidden

hidden?: boolean;

• Indicates whether to apply hidden style to the item.

  Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/hidden

property icon

icon?: PlatformIconIOSSfSymbol;

property keepsMenuPresented

keepsMenuPresented?: boolean;

• Indicates whether to keep the menu presented after firing the element’s action.

  Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/keepsmenupresented

property onPress

onPress: () => void;

property state

state?: 'on' | 'off' | 'mixed';

• State of the item.

  Read more: https://developer.apple.com/documentation/uikit/uimenuelement/state

property title

title?: string;

property type

type: 'action';

property spacing

spacing: number;

property type

type: 'spacing';

property icon

icon?: PlatformIconIOSSfSymbol;

property items

items: HeaderBarButtonItemWithMenu['menu']['items'];

property title

title?: string;

property type

type: 'submenu';

property onPress

onPress: () => void;

property selected

selected?: boolean;

• A Boolean value that indicates whether the item is in a selected state.

  Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected

property type

type: 'button';

property changesSelectionAsPrimaryAction

changesSelectionAsPrimaryAction?: boolean;

• A Boolean value that indicates whether the button title should indicate selection or not. Only available from iOS 15.0 and later.

  Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/changesselectionasprimaryaction

property menu

menu: {
    title?: string;
    items: (HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu)[];
};

property type

type: 'menu';

property height

height: number;

property pageX

pageX: number;

property pageY

pageY: number;

property width

width: number;

property x

x: number;

property y

y: number;

property android

android?: PlatformIconAndroid;

property ios

ios?: PlatformIconIOS;

property shared

shared?: PlatformIconShared;

property children

children?: React.ReactNode;

property enabled

enabled?: boolean;

• A prop that gives users an option to switch between using Screens for the navigator (container). All children screens should have the same value of their "enabled" prop as their container.

property hasTwoStates

hasTwoStates?: boolean;

• A prop to be used in navigators always showing only one screen (providing only 0 or 2 activityState values) for better implementation of ScreenContainer on iOS.

property active

active?: 0 | 1 | Animated.AnimatedInterpolation<number>;

property activityState

activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;

property children

children?: React.ReactNode;

property customAnimationOnSwipe

customAnimationOnSwipe?: boolean;

• Boolean indicating that swipe dismissal should trigger animation provided by stackAnimation. Defaults to false.

  ios

property enabled

enabled?: boolean;

• All children screens should have the same value of their "enabled" prop as their container.

property freezeOnBlur

freezeOnBlur?: boolean;

• Whether inactive screens should be suspended from re-rendering. Defaults to false. When enableFreeze() is run at the top of the application defaults to true.

property fullScreenSwipeEnabled

fullScreenSwipeEnabled?: boolean;

• Boolean indicating whether the swipe gesture should work on whole screen. The behavior depends on iOS version.

  For iOS prior to 26, swiping with this option results in the same transition animation as simple_push by default. It can be changed to other custom animations with customAnimationOnSwipe prop, but default iOS swipe animation is not achievable due to usage of custom recognizer.

  For iOS 26 and up, native interactiveContentPopGestureRecognizer is used, and this prop controls whether it should be enabled or not.

  When not set, it defaults to false on iOS < 26 and true for iOS >= 26.

  ios

property fullScreenSwipeShadowEnabled

fullScreenSwipeShadowEnabled?: boolean;

• Whether the full screen dismiss gesture has shadow under view during transition. When enabled, a custom shadow view is added during the transition which tries to mimic the default iOS shadow. Defaults to true.

  This does not affect the behavior of transitions that don't use gestures, enabled by fullScreenGestureEnabled prop.

  Deprecated

  since iOS 26, full screen swipe is handled by native recognizer, and this prop is ignored. We still fallback to the legacy implementation when when handling custom animations, but we assume true for shadows.

  ios

property gestureEnabled

gestureEnabled?: boolean;

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

  ios

property gestureResponseDistance

gestureResponseDistance?: GestureResponseDistanceType;

• Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside fullScreenSwipeEnabled.

  Deprecated

  since iOS 26, this prop conflicts with the native behavior of full screen swipe to dismiss, therefore it is ignored.

  ios

property hasLargeHeader

hasLargeHeader?: boolean;

• Internal boolean used to detect if current header has large title on iOS.

property hideKeyboardOnSwipe

hideKeyboardOnSwipe?: boolean;

• Whether the keyboard should hide when swiping to the previous screen. Defaults to false.

  ios

property homeIndicatorHidden

homeIndicatorHidden?: boolean;

• Whether the home indicator should be hidden on this screen. Defaults to false.

  ios

property isNativeStack

isNativeStack?: boolean;

• Internal boolean used to not attach events used only by native-stack. It prevents non native-stack navigators from sending transition progress from their Screen components.

property nativeBackButtonDismissalEnabled

nativeBackButtonDismissalEnabled?: boolean;

• Boolean indicating whether, when the Android default back button is clicked, the pop action should be performed on the native side or on the JS side to be able to prevent it. Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there. Defaults to false.

  android

property navigationBarColor

navigationBarColor?: ColorValue;

• Deprecated

  Setting this prop has no effect. Retained only for backward compatibility.

  For all apps targeting Android SDK 35 or above this prop has no effect. See: https://developer.android.com/reference/android/view/Window#setNavigationBarColor(int)

property navigationBarHidden

navigationBarHidden?: boolean;

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

  android

property navigationBarTranslucent

navigationBarTranslucent?: boolean;

• Deprecated

  Setting this prop has no effect. Retained only for backward compatibility.

  For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. See: https://developer.android.com/about/versions/15/behavior-changes-15#window-insets

property onAppear

onAppear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when the current screen appears.

property onComponentRef

onComponentRef?: (view: unknown) => void;

property onDisappear

onDisappear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when the current screen disappears.

property onDismissed

onDismissed?: (
    e: NativeSyntheticEvent<{
        dismissCount: number;
    }>
) => void;

• A callback that gets called when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down). The callback takes the number of dismissed screens as an argument since iOS 14 native header back button can pop more than 1 screen at a time.

property onGestureCancel

onGestureCancel?: (e: NativeSyntheticEvent<null>) => void;

• A callback that gets called after swipe back is canceled.

property onHeaderBackButtonClicked

onHeaderBackButtonClicked?: () => void;

• An internal callback that gets called when the native header back button is clicked on Android and enableNativeBackButtonDismissal is set to false. It dismises the screen using navigation.pop().

  android

property onHeaderHeightChange

onHeaderHeightChange?: (
    e: NativeSyntheticEvent<HeaderHeightChangeEventType>
) => void;

• A callback that gets called when the header height has changed.

property onNativeDismissCancelled

onNativeDismissCancelled?: (
    e: NativeSyntheticEvent<{
        dismissCount: number;
    }>
) => void;

• An internal callback called when screen is dismissed by gesture or by native header back button and preventNativeDismiss is set to true.

  ios

property onSheetDetentChanged

onSheetDetentChanged?: (
    e: NativeSyntheticEvent<{
        index: number;
        isStable: boolean;
    }>
) => void;

• A callback that gets called when the current screen is in formSheet presentation and its detent has changed.

property onTransitionProgress

onTransitionProgress?: (
    e: NativeSyntheticEvent<TransitionProgressEventType>
) => void;

• An internal callback called every frame during the transition of screens of native-stack, used to feed transition context.

property onWillAppear

onWillAppear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when the current screen will appear. This is called as soon as the transition begins.

property onWillDisappear

onWillDisappear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when the current screen will disappear. This is called as soon as the transition begins.

property preventNativeDismiss

preventNativeDismiss?: boolean;

• Boolean indicating whether to prevent current screen from being dismissed. Defaults to false.

  ios

property ref

ref?: React.Ref<View>;

property replaceAnimation

replaceAnimation?: ScreenReplaceTypes;

• How should the screen replacing another screen animate. Defaults to pop. The following values are currently supported: - "push" – the new screen will perform push animation. - "pop" – the new screen will perform pop animation.

property screenId

screenId?: string | undefined;

• A way to identify the screen in native code. This value will be passed down to native side, where it can be later consulted. Meant for native integration with the library. This should be unique value across all screen instances, however it is not asserted on native side.

  Empty string translates to undefined.

  ios

property screenOrientation

screenOrientation?: ScreenOrientationTypes;

• In which orientation should the screen appear. The following values are currently supported: - "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

property scrollEdgeEffects

scrollEdgeEffects?: {
    bottom: ScrollEdgeEffect;
    left: ScrollEdgeEffect;
    right: ScrollEdgeEffect;
    top: ScrollEdgeEffect;
};

• Configures the scroll edge effect for the _content ScrollView_ (the ScrollView that is present in first descendants chain of the Screen). Depending on values set, it will blur the scrolling content below certain UI elements (Header Items, SearchBar) for the specifed edge of the ScrollView.

  When set in nested containers, i.e. ScreenStack inside BottomTabs, or the other way around, the ScrollView will use only the innermost one's config.

  ios

  iOS 26 or higher

property sheetAllowedDetents

sheetAllowedDetents?: number[] | 'fitToContents' | 'medium' | 'large' | 'all';

• Describes heights where a sheet can rest. Works only when presentation is set to formSheet.

  Heights should be described as fraction (a number from [0, 1] interval) of screen height / maximum detent height. You can pass an array of ascending values each defining allowed sheet detent. iOS accepts any number of detents, while **Android is limited to three**.

  There is also possibility to specify fitToContents literal, which intents to set the sheet height to the height of its contents. On iOS fitToContents currently also includes small padding accounting for bottom inset.

  Please note that the array **must** be sorted in ascending order. This invariant is verified only in developement mode, where violation results in error.

  **Android is limited to up 3 values in the array** -- any surplus values, beside first three are ignored.

  There are also legacy & **deprecated** options available:

  * 'medium' - corresponds to [0.5] detent value, around half of the screen height, * 'large' - corresponds to [1.0] detent value, maximum height, * 'all' - corresponds to [0.5, 1.0] value, the name is deceiving due to compatibility reasons.

  These are provided solely for **temporary** backward compatibility and are destined for removal in future versions.

  Defaults to [1.0].

property sheetCornerRadius

sheetCornerRadius?: number;

• The corner radius that the sheet will try to render with. Works only when stackPresentation is set to formSheet.

  If set to non-negative value it will try to render sheet with provided radius, else it will apply system default.

  If left unset system default is used.

  ios

property sheetElevation

sheetElevation?: number;

• Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.

  Not dynamic - changing it after the component is rendered won't have an effect.

  Defaults to 24.

  Android

property sheetExpandsWhenScrolledToEdge

sheetExpandsWhenScrolledToEdge?: boolean;

• Whether the sheet should expand to larger detent when scrolling. Works only when stackPresentation is set to formSheet. Defaults to true.

  ios

property sheetGrabberVisible

sheetGrabberVisible?: boolean;

• Boolean indicating whether the sheet shows a grabber at the top. Works only when stackPresentation is set to formSheet. Defaults to false.

  ios

property sheetInitialDetentIndex

sheetInitialDetentIndex?: number | 'last';

• Index of the detent the sheet should expand to after being opened. Works only when stackPresentation is set to formSheet.

  If the specified index is out of bounds of sheetAllowedDetents array, in dev environment more error will be thrown, in production the value will be reset to default value.

  Additionaly there is last value available, when set the sheet will expand initially to last (largest) detent.

  Defaults to 0 - which represents first detent in the detents array.

property sheetLargestUndimmedDetentIndex

sheetLargestUndimmedDetentIndex?:
    | number
    | 'none'
    | 'last'
    | 'medium'
    | 'large'
    | 'all';

• The largest sheet detent for which a view underneath won't be dimmed. Works only when stackPresentation is set to formSheet.

  This prop can be set to an number, which indicates index of detent in sheetAllowedDetents array for which there won't be a dimming view beneath the sheet.

  If the specified index is out of bounds of sheetAllowedDetents array, in dev environment mode error will be thrown, in production the value will be reset to default value.

  Additionaly there are following options available:

  * none - there will be dimming view for all detents levels, * last - there won't be a dimming view for any detent level.

  There also legacy & **deprecated** prop values available: medium, large (don't confuse with largest), all, which work in tandem with corresponding legacy prop values for sheetAllowedDetents prop.

  These are provided solely for **temporary** backward compatibility and are destined for removal in future versions.

  Defaults to none, indicating that the dimming view should be always present.

property shouldFreeze

shouldFreeze?: boolean;

• Boolean indicating that the screen should be frozen with react-freeze.

property stackAnimation

stackAnimation?: StackAnimationTypes;

• How the screen should appear/disappear when pushed or popped at the top of the stack. The following values are currently supported: - "default" – uses a platform default animation - "fade" – fades screen in or out - "fade_from_bottom" – performs a fade from bottom animation - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only) - "simple_push" – performs a default animation, but without native header transition (iOS only) - slide_from_bottom – performs a slide from bottom animation - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS) - "slide_from_left" - slide in the new screen from left to right - "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS) - "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS) - "none" – the screen appears/dissapears without an animation

property stackPresentation

stackPresentation?: StackPresentationTypes;

• How should the screen be presented. The following values are currently supported: - "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme. Supports nested stack rendering. - "modal" – the new screen will be presented modally. On iOS it'll use UIModalPresentationStyleAutomatic. On Android this is equivalent to push presentation type. Supports nested stack rendering. - "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends. - "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, on Android this will use Material BottomSheetBehaviour. On Android neested stack rendering is not yet supported. - "pageSheet" – will use "UIModalPresentationPageSheet" modal style on iOS and will fallback to "modal" on Android.

property statusBarAnimation

statusBarAnimation?: 'none' | 'fade' | 'slide';

• Sets the status bar animation (similar to the StatusBar component). On Android, setting either fade or slide will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar. Requires enabling (or deleting) View controller-based status bar appearance in your Info.plist file on iOS.

  Defaults to fade on iOS and none on Android.

property statusBarColor

statusBarColor?: ColorValue;

• Deprecated

  Setting this prop has no effect. Retained only for backward compatibility.

  For all apps targeting Android SDK 35 or above this prop has no effect. See: https://developer.android.com/reference/android/view/Window#setStatusBarColor(int)

property statusBarHidden

statusBarHidden?: boolean;

• Whether the status bar should be hidden on this screen. Requires enabling (or deleting) View controller-based status bar appearance in your Info.plist file on iOS. Defaults to false.

property statusBarStyle

statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';

• Sets the status bar color (similar to the StatusBar component). Requires enabling (or deleting) View controller-based status bar appearance in your Info.plist file on iOS. auto and inverted are supported only on iOS. On Android, they will fallback to light. Defaults to auto on iOS and light on Android.

property statusBarTranslucent

statusBarTranslucent?: boolean;

• Deprecated

  Setting this prop has no effect. Retained only for backward compatibility.

  For all apps targeting Android SDK 35 or above edge-to-edge mode on Android is enabled by default and this prop loses relevance. See: https://developer.android.com/about/versions/15/behavior-changes-15#ux.

property swipeDirection

swipeDirection?: SwipeDirectionTypes;

• Sets the direction in which you should swipe to dismiss the screen. When using vertical option, options fullScreenSwipeEnabled: true, customAnimationOnSwipe: true and stackAnimation: 'slide_from_bottom' are set by default. The following values are supported: - vertical – dismiss screen vertically - horizontal – dismiss screen horizontally (default)

  ios

property transitionDuration

transitionDuration?: number;

• Changes the duration (in milliseconds) of slide_from_bottom, fade_from_bottom, fade and simple_push transitions on iOS. Defaults to 500. For screens with default and flip transitions, and, as of now, for screens with presentation set to modal, formSheet, pageSheet (regardless of transition), the duration isn't customizable.

  ios

property unstable_sheetFooter

unstable_sheetFooter?: () => React.ReactNode;

• Footer component that can be used alongside formSheet stack presentation style.

  This option is provided, because due to implementation details it might be problematic to implement such layout with JS-only code.

  Please note that this prop is marked as unstable and might be subject of breaking changes, including removal, in particular when we find solution that will make implementing it with JS straightforward.

  android

property backButtonDisplayMode

backButtonDisplayMode?: BackButtonDisplayMode;

• How the back button behaves. It is used only when none of: backTitleFontFamily, backTitleFontSize, disableBackButtonMenu and backTitleVisible=false is set. The following values are currently supported (they correspond to [UINavigationItemBackButtonDisplayMode](https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc)):

  - default – show given back button previous controller title, system generic or just icon based on available space - generic – show given system generic or just icon based on available space - minimal – show just an icon

  ios

property backButtonInCustomView

backButtonInCustomView?: boolean;

• Whether to show the back button with custom left side of the header.

property backgroundColor

backgroundColor?: ColorValue;

• Controls the color of the navigation header.

property backTitle

backTitle?: string;

• Title to display in the back button. ios.

property backTitleFontFamily

backTitleFontFamily?: string;

• Allows for customizing font family to be used for back button title on iOS. ios

property backTitleFontSize

backTitleFontSize?: number;

• Allows for customizing font size to be used for back button title on iOS. ios

property backTitleVisible

backTitleVisible?: boolean;

• Whether the back button title should be visible or not. Defaults to true.

  When set to false it works as a "kill switch": it enforces backButtonDisplayMode=minimal and ignores backButtonDisplayMode, backTitleFontSize, backTitleFontFamily, disableBackButtonMenu. For backTitle it works only in back button menu.

  ios

property blurEffect

blurEffect?: BlurEffectTypes;

• Blur effect to be applied to the header. Works with backgroundColor's alpha < 1. ios

property children

children?: React.ReactNode;

• Pass HeaderLeft, HeaderRight and HeaderTitle

property color

color?: ColorValue;

• Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property.

property direction

direction?: 'rtl' | 'ltr';

• Whether the stack should be in rtl or ltr form.

property disableBackButtonMenu

disableBackButtonMenu?: boolean;

• Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. ios

property headerLeftBarButtonItems

headerLeftBarButtonItems?: HeaderBarButtonItem[];

• Array of UIBarButtomItems to the left side of the header.

  ios

property headerRightBarButtonItems

headerRightBarButtonItems?: HeaderBarButtonItem[];

• Array of UIBarButtomItems to the right side of the header.

  ios

property hidden

hidden?: boolean;

• When set to true the header will be hidden while the parent Screen is on the top of the stack. The default value is false.

property hideBackButton

hideBackButton?: boolean;

• Boolean indicating whether to hide the back button in header.

property hideShadow

hideShadow?: boolean;

• Boolean indicating whether to hide the elevation shadow or the bottom border on the header.

property largeTitle

largeTitle?: boolean;

• Boolean to set native property to prefer large title header (like in iOS setting). 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. Only supported on iOS.

  ios

property largeTitleBackgroundColor

largeTitleBackgroundColor?: ColorValue;

• Controls the color of the navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.

property largeTitleColor

largeTitleColor?: ColorValue;

• Customize the color to be used for the large title. By default uses the titleColor property. ios

property largeTitleFontFamily

largeTitleFontFamily?: string;

• Customize font family to be used for the large title. ios

property largeTitleFontSize

largeTitleFontSize?: number;

• Customize the size of the font to be used for the large title. ios

property largeTitleFontWeight

largeTitleFontWeight?: string;

• Customize the weight of the font to be used for the large title. ios

property largeTitleHideShadow

largeTitleHideShadow?: boolean;

• Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.

property onAttached

onAttached?: () => void;

• Callback which is executed when screen header is attached

property onDetached

onDetached?: () => void;

• Callback which is executed when screen header is detached

property title

title?: string;

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

property titleColor

titleColor?: ColorValue;

• Allows for setting text color of the title.

property titleFontFamily

titleFontFamily?: string;

• Customize font family to be used for the title.

property titleFontSize

titleFontSize?: number;

• Customize the size of the font to be used for the title.

property titleFontWeight

titleFontWeight?: string;

• Customize the weight of the font to be used for the title.

property topInsetEnabled

topInsetEnabled?: boolean;

• Deprecated

  Setting this prop has no effect. Retained only for backward compatibility.

  For apps targeting Android SDK 35 or above edge-to-edge mode is enabled by default therefore this prop loses its relevance.

property translucent

translucent?: boolean;

• Boolean indicating whether the navigation bar is translucent.

property hidesSharedBackground

hidesSharedBackground?: boolean;

• A boolean value indicating whether the background this item may share with other items in the bar should be hidden. Only applicable to type="right" and type="left" subviews. Only available from iOS 26.0 and later.

  Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground

property children

children?: React.ReactNode;

property onFinishTransitioning

onFinishTransitioning?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when the current screen finishes its transition.

property ref

ref?: React.MutableRefObject<React.Ref<View>>;

property allowToolbarIntegration

allowToolbarIntegration?: boolean;

• Indicates whether the system can place the search bar among other toolbar items on iPhone.

  Set this prop to false to prevent the search bar from appearing in the toolbar when placement is automatic, integrated, integratedButton or integratedCentered.

  Defaults to true. When placement is set to stacked, this property's value will be overridden with false to circumvent a UIKit native bug that prevents the search bar from appearing on the root screen.

  iOS (>= 26.0)

property autoCapitalize

autoCapitalize?: 'systemDefault' | 'none' | 'words' | 'sentences' | 'characters';

• The auto-capitalization behavior.

  Defaults to systemDefault: - on Android, it is the same as none, - on iOS, it is the same as sentences.

property autoFocus

autoFocus?: boolean;

• Automatically focuses search bar on mount

  android

property barTintColor

barTintColor?: ColorValue;

• The search field background color

property cancelButtonText

cancelButtonText?: string;

• The text to be used instead of default Cancel button text

  Deprecated

  Starting from iOS 26, cancel button does not have any text, therefore this prop has no longer any effect.

  ios

property disableBackButtonOverride

disableBackButtonOverride?: boolean;

• Specifies whether the back button should close search bar's text input or not.

  android

property headerIconColor

headerIconColor?: ColorValue;

• The search and close icon color shown in the header

  android

property hideNavigationBar

hideNavigationBar?: boolean;

• Indicates whether to hide the navigation bar.

  If value is undefined, uses native behavior: - on iOS versions prior to 26, value is true, - starting from iOS 26, value is determined by context.

  Restoring native behavior after setting the value to true or false is unsupported.

  ios

property hideWhenScrolling

hideWhenScrolling?: boolean;

• Indicates whether to hide the search bar when scrolling

  ios

property hintTextColor

hintTextColor?: ColorValue;

• The search hint text color

  android

property inputType

inputType?: 'text' | 'phone' | 'number' | 'email';

• Sets type of the input. Defaults to text.

  android

property obscureBackground

obscureBackground?: boolean;

• Indicates whether to obscure the underlying content.

  If value is undefined, uses native behavior: - on iOS, value is false, - on tvOS, value is true.

  Restoring native behavior after setting the value to true or false is unsupported.

  ios

property onBlur

onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when search bar has lost focus

property onCancelButtonPress

onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when the cancel button is pressed

  ios

property onChangeText

onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;

• A callback that gets called when the text changes. It receives the current text value of the search bar.

property onClose

onClose?: () => void;

• A callback that gets called when search bar is closed

  android

property onFocus

onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

• A callback that gets called when search bar has received focus

property onOpen

onOpen?: () => void;

• A callback that gets called when search bar is opened

  android

property onSearchButtonPress

onSearchButtonPress?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;

• A callback that gets called when the search button is pressed. It receives the current text value of the search bar.

property placeholder

placeholder?: string;

• Text displayed when search field is empty

property placement

placement?: SearchBarPlacement;

• Position of the search bar

  Supported values:

  * automatic - the search bar is placed according to current layout * stacked - the search bar is placed below the other content in navigation bar * integrated - (>= iOS 26) the search bar is placed on the trailing edge of navigation bar. On iPhone, it may be integrated into the toolbar * integratedButton - (>= iOS 26) the search bar has the same placement as integrated, except that the inactive search bar is always shown as a button even when space permits a search field * integratedCentered - (>= iOS 26) the search bar has the same placement as integrated, except that in the regular width on iPad, the search bar is centered in the navigation bar. Only respected in special cases, described in UIKit documentation

  There is also legacy & **deprecated** prop value available:

  * inline - the search bar is placed on the trailing edge of navigation bar

  Starting from iOS 26, inline is the same as integrated. It is provided for backward compatibility and is destined for removal in future versions.

  For iOS versions prior to 26, integrated, integratedButton, integratedCentered are the same as inline.

  Defaults to automatic.

  Complete list of possible search bar placements is available in the official UIKit documentation:

  See Also

  • UINavigationItem.SearchBarPlacement

    iOS (>= 16.0)