react-native-screens

property stackUseEffectCallback

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

• Callback to attach into ScreenStack's useEffect() from ScreenGestureDetector that wraps the stack.

  Parameter stackRef

  holds a reference to an instance of ScreenStackNativeComponent

property currentScreenId

currentScreenId?: string | undefined;

property goBackGesture

goBackGesture?: GoBackGesture | undefined;

property screenEdgeGesture

screenEdgeGesture?: boolean | undefined;

property screensRefs

screensRefs?: React.MutableRefObject<ScreensRefsHolder> | undefined;

property transitionAnimation

transitionAnimation?: AnimatedScreenTransition | undefined;

property children

children?: React.ReactNode | undefined;

property gestureDetectorBridge

gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;

property destructive

destructive?: boolean | undefined;

• Indicates whether to apply destructive style to the item.

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

property disabled

disabled?: boolean | undefined;

• Indicates whether to apply disabled style to the item.

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

property discoverabilityLabel

discoverabilityLabel?: string | undefined;

• Discoverability label of the menu item.

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

property hidden

hidden?: boolean | undefined;

• Indicates whether to apply hidden style to the item.

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

property icon

icon?: PlatformIconIOS | undefined;

property keepsMenuPresented

keepsMenuPresented?: boolean | undefined;

• 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' | undefined;

• State of the item.

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

property subtitle

subtitle?: string | undefined;

property title

title?: string | undefined;

property type

type: 'action';

property spacing

spacing: number;

property type

type: 'spacing';

property destructive

destructive?: boolean | undefined;

property displayAsPalette

displayAsPalette?: boolean | undefined;

property displayInline

displayInline?: boolean | undefined;

property icon

icon?: PlatformIconIOS | undefined;

property items

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

property singleSelection

singleSelection?: boolean | undefined;

property title

title?: string | undefined;

property type

type: 'submenu';

property onPress

onPress: () => void;

property selected

selected?: boolean | undefined;

• 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 | undefined;

• 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 | undefined;
    items: (HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu)[];
    singleSelection?: boolean | undefined;
    displayAsPalette?: boolean | undefined;
};

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 children

children?: React.ReactNode | undefined;

property enabled

enabled?: boolean | undefined;

• 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 | undefined;

• 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> | undefined;

property activityState

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

property children

children?: React.ReactNode | undefined;

property customAnimationOnSwipe

customAnimationOnSwipe?: boolean | undefined;

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

  ios

property enabled

enabled?: boolean | undefined;

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

property freezeOnBlur

freezeOnBlur?: boolean | undefined;

• 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 | undefined;

• 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 | undefined;

• 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 handling custom animations, but we assume true for shadows.

  ios

property gestureEnabled

gestureEnabled?: boolean | undefined;

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

  ios

property gestureResponseDistance

gestureResponseDistance?: GestureResponseDistanceType | undefined;

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

  ios

property hasLargeHeader

hasLargeHeader?: boolean | undefined;

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

property hideKeyboardOnSwipe

hideKeyboardOnSwipe?: boolean | undefined;

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

  ios

property homeIndicatorHidden

homeIndicatorHidden?: boolean | undefined;

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

  ios

property isNativeStack

isNativeStack?: boolean | undefined;

• 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 | undefined;

• 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 | undefined;

• 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 | undefined;

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

  android

property navigationBarTranslucent

navigationBarTranslucent?: boolean | undefined;

• 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) | undefined;

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

property onComponentRef

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

property onDisappear

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

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

property onDismissed

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

• 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) | undefined;

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

property onHeaderBackButtonClicked

onHeaderBackButtonClicked?: (() => void) | undefined;

• 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)
    | undefined;

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

property onNativeDismissCancelled

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

• 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)
    | undefined;

• 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)
    | undefined;

• 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) | undefined;

• 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) | undefined;

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

property preventNativeDismiss

preventNativeDismiss?: boolean | undefined;

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

  ios

property ref

ref?: React.Ref<View> | undefined;

property replaceAnimation

replaceAnimation?: ScreenReplaceTypes | undefined;

• 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 | undefined;

• In which orientation should the screen appear. The following values are currently supported: - "default" - resolves to "all" without "portrait_down" on iPhone devices, "all" on iPad devices. 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;
      }
    | undefined;

• 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, search bar) for the specified edge of the ScrollView.

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

  **Note:** Using both blurEffect and scrollEdgeEffects (>= iOS 26) simultaneously may cause overlapping effects.

  Edge effects can be configured for each edge separately. The following values are currently supported:

  - automatic - the automatic scroll edge effect style, - hard - a scroll edge effect with a hard cutoff and dividing line, - soft - a soft-edged scroll edge effect, - hidden - no scroll edge effect.

  The supported values correspond to the UIScrollEdgeEffect's style and isHidden props in the official UIKit documentation:

  See Also

  • UIScrollEdgeEffect

    automatic for each edge

    ios

    iOS 26 or higher

property sheetAllowedDetents

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

• 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 development 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 | undefined;

• 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 sheetDefaultResizeAnimationEnabled

sheetDefaultResizeAnimationEnabled?: boolean | undefined;

• Whether the default native animation should be used when the sheet's with fitToContents content size changes.

  When set to true, the sheet uses internal logic to synchronize size updates and translation animations during entry, exit, or content updates. This ensures a smooth transition for standard, static content mounting/unmounting.

  When set to false, the internal animation and translation logic is ignored. This allows the sheet to adjust its size dynamically based on the current dimensions of the content provided by the developer, allowing implementing custom resizing animations.

  Defaults to true.

  android

property sheetElevation

sheetElevation?: number | undefined;

• 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 | undefined;

• 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 | undefined;

• 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' | undefined;

• 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'
    | undefined;

• 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.

  On iOS, the native implementation might resize the the sheet w/o explicitly changing the detent level, e.g. in case of keyboard appearance. In case after such resize the sheet exceeds height for which in regular scenario a dimming view would be applied - it will be applied, even if the detent has not effectively been changed.

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

property sheetShouldOverflowTopInset

sheetShouldOverflowTopInset?: boolean | undefined;

• Whether the sheet content should be rendered behind the Status Bar or display cutouts.

  When set to true, the sheet will extend to the physical edges of the stack, allowing content to be visible behind the status bar or display cutouts. Detent ratios in sheetAllowedDetents will be measured relative to the full stack height.

  When set to false, the sheet's layout will be constrained by the inset from the top and the detent ratios will then be measured relative to the adjusted height (excluding the top inset). This means that sheetAllowedDetents will result in different sheet heights depending on this prop.

  Defaults to false.

  android

property shouldFreeze

shouldFreeze?: boolean | undefined;

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

property stackAnimation

stackAnimation?: StackAnimationTypes | undefined;

• 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 | undefined;

• 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' | undefined;

• 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 | undefined;

• 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 | undefined;

• 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' | undefined;

• 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 | undefined;

• 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 | undefined;

• 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 | undefined;

• 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) | undefined;

• 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 | undefined;

• 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 | undefined;

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

property backgroundColor

backgroundColor?: ColorValue | undefined;

• Controls the color of the navigation header.

property backTitle

backTitle?: string | undefined;

• Title to display in the back button. ios.

property backTitleFontFamily

backTitleFontFamily?: string | undefined;

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

property backTitleFontSize

backTitleFontSize?: number | undefined;

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

property backTitleVisible

backTitleVisible?: boolean | undefined;

• 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 | undefined;

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

  **Note:** Using both blurEffect and scrollEdgeEffects (>= iOS 26) simultaneously may cause overlapping effects.

  ios

property children

children?: React.ReactNode | undefined;

• Pass HeaderLeft, HeaderRight and HeaderTitle

property color

color?: ColorValue | undefined;

• 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?: Direction | undefined;

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

property disableBackButtonMenu

disableBackButtonMenu?: boolean | undefined;

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

property disableTopInsetApplication

disableTopInsetApplication?: boolean | undefined;

• When set to true on the outermost stack with a **visible** header, disables top inset handling for that header and the entire subtree.

  This prop only takes effect on the outermost visible header in the hierarchy. Setting it on an inner stack has no additional impact because a parent stack has already made the decision (whether inset should be applied or not).

  Has no effect when androidLegacyTopInsetBehavior feature flag is enabled.

  android

property experimental_userInterfaceStyle

experimental_userInterfaceStyle?: UserInterfaceStyle | undefined;

• Allows to override system appearance for the navigation bar.

  Does not support dynamic changes to the prop value for the currently visible screen.

  Please note that this prop is marked as **experimental** and might be subject to breaking changes or even removal.

  The following values are currently supported: - unspecified - an unspecified interface style, - light - the light interface style, - dark - the dark interface style.

  The supported values correspond to the official UIKit documentation:

  See Also

  • UIUserInterfaceStyle

    unspecified ios

property headerLeftBarButtonItems

headerLeftBarButtonItems?: HeaderBarButtonItem[] | undefined;

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

  ios

property headerRightBarButtonItems

headerRightBarButtonItems?: HeaderBarButtonItem[] | undefined;

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

  ios

property hidden

hidden?: boolean | undefined;

• 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 | undefined;

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

property hideShadow

hideShadow?: boolean | undefined;

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

property largeTitle

largeTitle?: boolean | undefined;

• 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 | undefined;

• 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 | undefined;

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

property largeTitleFontFamily

largeTitleFontFamily?: string | undefined;

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

property largeTitleFontSize

largeTitleFontSize?: number | undefined;

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

property largeTitleFontWeight

largeTitleFontWeight?: string | undefined;

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

property largeTitleHideShadow

largeTitleHideShadow?: boolean | undefined;

• 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) | undefined;

• Callback which is executed when screen header is attached

property onDetached

onDetached?: (() => void) | undefined;

• Callback which is executed when screen header is detached

property title

title?: string | undefined;

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

property titleColor

titleColor?: ColorValue | undefined;

• Allows for setting text color of the title.

property titleFontFamily

titleFontFamily?: string | undefined;

• Customize font family to be used for the title.

property titleFontSize

titleFontSize?: number | undefined;

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

property titleFontWeight

titleFontWeight?: string | undefined;

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

property topInsetEnabled

topInsetEnabled?: boolean | undefined;

• 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 | undefined;

• Boolean indicating whether the navigation bar is translucent.

property hidesSharedBackground

hidesSharedBackground?: boolean | undefined;

• 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 | undefined;

property nativeContainerStyle

nativeContainerStyle?: ScreenStackNativeContainerStyleProps | undefined;

property onFinishTransitioning

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

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

property ref

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

property allowToolbarIntegration

allowToolbarIntegration?: boolean | undefined;

• 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'
    | undefined;

• 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 | undefined;

• Automatically focuses search bar on mount

  android

property barTintColor

barTintColor?: ColorValue | undefined;

• The search field background color

property cancelButtonText

cancelButtonText?: string | undefined;

• 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 | undefined;

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

  android

property headerIconColor

headerIconColor?: ColorValue | undefined;

• The search and close icon color shown in the header

  android

property hideNavigationBar

hideNavigationBar?: boolean | undefined;

• 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 | undefined;

• Indicates whether to hide the search bar when scrolling

  ios

property hintTextColor

hintTextColor?: ColorValue | undefined;

• The search hint text color

  android

property inputType

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

• Sets type of the input. Defaults to text.

  android

property obscureBackground

obscureBackground?: boolean | undefined;

• 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) | undefined;

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

property onCancelButtonPress

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

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

  ios

property onChangeText

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

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

property onClose

onClose?: (() => void) | undefined;

• A callback that gets called when search bar is closed

  android

property onFocus

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

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

property onOpen

onOpen?: (() => void) | undefined;

• A callback that gets called when search bar is opened

  android

property onSearchButtonPress

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

• 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 | undefined;

• Text displayed when search field is empty

property placement

placement?: SearchBarPlacement | undefined;

• 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)

property ref

ref?: React.RefObject<SearchBarCommands | null> | undefined;

• Reference to imperatively modify search bar.

  Currently supported operations are:

  * focus - focuses the search bar * blur - removes focus from the search bar * clearText - removes any text present in the search bar input field * setText - sets the search bar's content to given value * cancelSearch - cancel search in search bar. * toggleCancelButton - depending on passed boolean value, hides or shows cancel button (iOS only)

property shouldShowHintSearchIcon

shouldShowHintSearchIcon?: boolean | undefined;

• Show the search hint icon when search bar is focused

  android true

property textColor

textColor?: ColorValue | undefined;

• The search field text color

property tintColor

tintColor?: ColorValue | undefined;

• The color for the cursor caret and cancel button text.

  ios

property android

android?: TabsHostPropsAndroid | undefined;

property ios

ios?: TabsHostPropsIOS | undefined;

property tabBarRespectsIMEInsets

tabBarRespectsIMEInsets?: boolean | undefined;

• Determines whether BottomNavigationView applies the inset for IME (i.e. keyboard).

  This prop should be used with android:windowSoftInputMode="adjustResize".

  On API prior to 30, setting this prop to true has no effect.

  Changing this prop while the keyboard is open will not take effect immediately. The new value will be applied the next time the keyboard is opened.

  false

  android API 30 or higher

property children

children: NonNullable<ViewProps['children']>;

property colorScheme

colorScheme?: TabsHostColorScheme | undefined;

• Specifies the color scheme used by the container and any child containers.

  The following values are currently supported: - inherit - the interface style from parent, - light - the light interface style, - dark - the dark interface style.

  inherit

  android, ios

property direction

direction?: TabsHostDirection | undefined;

• Specifies the layout direction of the native container, its views and child containers.

  The following values are currently supported:

  - inherit - uses parent's layout direction, - ltr - forces left-to-right layout direction, - rtl - forces right-to-left layout direction.

  On Android, this property relies on react-native's style.direction (which sets native Android layoutDirection View property). Property is propagated via the view hierarchy. The value will fallback to direction set on one of the parent views.

  On iOS, this property sets layoutDirection trait override for the native tab bar controller. Property is propagated via the native trait system. The value will fallback to direction of the **native** app (userInterfaceLayoutDirection), potentially ignoring react-native's override (e.g. when forceRTL is used). To mitigate this, you can pass ltr/rtl to this property depending on the value of I18nManager.isRTL.

  inherit

  android, ios

property nativeContainerStyle

nativeContainerStyle?: TabsHostNativeContainerStyleProps | undefined;

• Allows for native container view customization.

  On Android, style is applied to FrameLayout that wraps currently focused screen and BottomNavigationView. On iOS, style is applied to UITabBarController's view.

  android, ios

property navStateRequest

navStateRequest: TabsHostNavStateRequest;

• Allows to pass desired navigation state request to the native side. It also determines initial navigation state after first render.

  This prop can be thought of as a "next navigation state suggestion for the native side". Depending on configuration and the provenance of the update the update might get accepted or rejected.

  See Also

  • TabsHostPropsBase#rejectStaleNavStateUpdates

  • TabsHostNavStateRequest for description of the type model & accepted values.

property onTabSelected

onTabSelected?:
    | ((event: NativeSyntheticEvent<TabSelectedEvent>) => void)
    | undefined;

• A callback that gets invoked when the selected tab changes.

  android, ios

property onTabSelectionPrevented

onTabSelectionPrevented?:
    | ((event: NativeSyntheticEvent<TabSelectionPreventedEvent>) => void)
    | undefined;

• A callback that gets invoked when the native side prevents a tab selection because the target screen has preventNativeSelection enabled.

  See Also

  • TabSelectionPreventedEvent

property onTabSelectionRejected

onTabSelectionRejected?:
    | ((event: NativeSyntheticEvent<TabSelectionRejectedEvent>) => void)
    | undefined;

• A callback that gets invoked when the native side rejects a tab selection request.

  See Also

  • TabSelectionRejectedEvent

property rejectStaleNavStateUpdates

rejectStaleNavStateUpdates?: boolean | undefined;

• If true, the native side will reject any navigation state updates coming from JS if they are stale.

  A navigation state update is considered stale if it is based of an stale state (TabsHostNavStateRequest#baseProvenance indicates the base state). A state is stale, when at the time of executing update, there already had been accepted a newer state of different origin.

  This can happen, when an update from JS is dispatched, but before it reaches the native side, another update happens on UI thread, e.g. user selects another tab. For such situations, where to-be-applied navigation state update had been dispatched w/o full context of actual navigation state you can toggle this prop. Please note, that above definition means, that an JS update won't be rejected if you send a series of udpates with the same provenance, unless some action has been taken by the user "in the meantime".

  If an update is rejected due to being stale, the onTabSelectionRejected event will be emitted with details of the rejected update and the currently active navigation state.

  false

property tabBarHidden

tabBarHidden?: boolean | undefined;

• Hides the tab bar.

  false

  android, ios

property bottomAccessory

bottomAccessory?: TabsBottomAccessoryComponentFactory | undefined;

• Specifies component used as bottom accessory.

  This prop is a function that accepts environment as a parameter and returns the component that will be rendered in the bottom accessory.

  environment can be one of the following values:

  - regular - the accessory is laid out above the bottom tab bar, - inline - the accessory is laid out inline with the collapsed bottom tab bar.

  If this prop is undefined, the bottom accessory will not be rendered.

  On legacy architecture (Paper) and on new architecture (Fabric) with RN < 0.82, implementation uses DisplayLink which might result in the size of bottom accessory being updated with a delay.

  Starting from RN 0.82, this issue is mitigated but in order to allow accessory rendering based on environment, component is rendered 2 times for both regular and inline environments at the same time. Environment determines which component is visible at given moment. This might require implementing a solution to share state between both rendered components (e.g. usage of context).

  Available starting from iOS 26.

  iOS iOS 26 or higher

property onMoreTabSelected

onMoreTabSelected?:
    | ((event: NativeSyntheticEvent<MoreTabSelectedEvent>) => void)
    | undefined;

• A callback that gets invoked when the user taps the "More" tab bar item.

  This event fires when the user taps the system-generated "More" tab bar item. It does NOT fire when a tab is selected from within the More list — that triggers the normal onTabSelected event instead.

  See Also

  • MoreTabSelectedEvent

    ios

property tabBarControllerMode

tabBarControllerMode?: TabBarControllerMode | undefined;

• 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