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 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 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?: Icon;

• Specifies the icon for the tab bar item.

  The following values are currently supported:

  - an object with sfSymbolName - will attempt to use SF Symbol with given name, - an object with imageSource - will attempt to use image from provided resource, - an object with templateSource - will attempt to use image from provided resource as template (the color of the image will depend on props related to icon color and tab bar item's state).

  If no selectedIcon is provided, it will also be used as selectedIcon.

  ios

property iconResource

iconResource?: ImageSourcePropType;

• Specifies the icon for the tab bar item.

  Accepts a path to the external image asset. As for now, it respects an image from local assets and passed by source.uri property.

  android

property iconResourceName

iconResourceName?: string;

• Specifies the icon for the tab bar item.

  Accepts a string corresponding to the resource name. Initially searches within the app's drawable resources. If no matching resource is found, it defaults to searching within the Android's drawable resources.

  android

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 selectedIcon

selectedIcon?: Icon;

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

  Supports the same values as icon property.

  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 imageSource

imageSource: ImageSourcePropType;

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;

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. 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. Defaults to false.

  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.

  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.

  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;

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

  android

  Deprecated

  For all apps targeting Android SDK 35 or above this prop has no effect and is subject to removal in the future. For SDK below 35 this works only with specific app setup. This prop is subject to removal in the future. 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;

• Boolean indicating whether the content should be visible behind the navigation bar. Defaults to false.

  android

  Deprecated

  For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. We expect that in future SDKs this option will be enforced. This prop is subject to removal in the future. 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 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;

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

  android

  Deprecated

  For all apps targeting Android SDK 35 or above this prop has no effect. For SDK below 35 this works only with specific app setup. This prop is subject to removal in the future. 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;

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

  android

  Deprecated

  For all apps targeting Android SDK 35 or above edge-to-edge mode on Android is enabled by default and this point loses relevance. It is expected that the edge-to-edge will be enforced in future SDKs: 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. The duration of default and flip transitions 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 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;

• A flag to that lets you opt out of insetting the header. You may want to set this to false if you use an opaque status bar. Defaults to true. Only supported on Android. Insets are always applied on iOS because the header cannot be opaque.

  android

  Deprecated

  For apps targeting Android SDK 35 or above edge-to-edge mode is enabled by default and it is expected that the edge-to-edge will be enforced in future SDKs - therefore this prop loses its relevance and will be removed at some point in the future.

property translucent

translucent?: boolean;

• Boolean indicating whether the navigation bar is translucent.

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 autoCapitalize

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

• The auto-capitalization behavior

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

  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

  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

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 * inline - the search bar is placed on the trailing edge of navigation bar * stacked - the search bar is placed below the other content in navigation bar

  Defaults to stacked

  iOS (>= 16.0)

property ref

ref?: React.RefObject<SearchBarCommands>;

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

• Show the search hint icon when search bar is focused

  android true

property textColor

textColor?: ColorValue;

• The search field text color

property tintColor

tintColor?: ColorValue;

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

  ios

property sfSymbolName

sfSymbolName: string;

property maximumInspectorColumnWidth

maximumInspectorColumnWidth?: number;

• Maximum width for the inspector component.

  Specifies the maximum width (in points) for the inspector column in the SplitView layout, typically the view which is providing additional data about the secondary column.

  iOS 26 or higher

property maximumPrimaryColumnWidth

maximumPrimaryColumnWidth?: number;

• Maximum width for the primary sidebar.

  Specifies the maximum width (in points) for the primary column in the SplitView layout, typically representing the leftmost sidebar.

property maximumSupplementaryColumnWidth

maximumSupplementaryColumnWidth?: number;

• Maximum width for the intermediate sidebar.

  Specifies the maximum width (in points) for the supplementary column in the SplitView layout, typically representing the intermediate sidebar.

property minimumInspectorColumnWidth

minimumInspectorColumnWidth?: number;

• Minimum width for the inspector component.

  Specifies the minimum width (in points) for the inspector column in the SplitView layout, typically the view which is providing additional data about the secondary column.

  iOS 26 or higher

property minimumPrimaryColumnWidth

minimumPrimaryColumnWidth?: number;

• Minimum width for the primary sidebar.

  Specifies the minimum width for the primary column in the SplitView layout, typically representing the leftmost sidebar.

property minimumSecondaryColumnWidth

minimumSecondaryColumnWidth?: number;

• Minimum width for the secondary component.

  Specifies the minimum width (in points) for the secondary column in the SplitView layout, typically for the view with the main content.

  iOS 26 or higher

property minimumSupplementaryColumnWidth

minimumSupplementaryColumnWidth?: number;

• Minimum width for the intermediate sidebar.

  Specifies the minimum width (in points) for the supplementary column in the SplitView layout, typically representing the intermediate sidebar.

property preferredInspectorColumnWidthOrFraction

preferredInspectorColumnWidthOrFraction?: number;

• Preferred width for the inspector component.

  Specifies the preferred width (in points or as a fraction for percentage width support) for the inspector column in the SplitView layout, typically the view which is providing additional data about the secondary column.

  iOS 26 or higher

property preferredPrimaryColumnWidthOrFraction

preferredPrimaryColumnWidthOrFraction?: number;

• Preferred width for the primary sidebar.

  Specifies the preferred width (in points or as a fraction for percentage width support) for the primary column in the SplitView layout, typically representing the leftmost sidebar.

property preferredSecondaryColumnWidthOrFraction

preferredSecondaryColumnWidthOrFraction?: number;

• Preferred width for the secondary component.

  Specifies the preferred width (in points or as a fraction for percentage width support) for the secondary column in the SplitView layout, typically for the view with the main content.

  iOS 26 or higher

property preferredSupplementaryColumnWidthOrFraction

preferredSupplementaryColumnWidthOrFraction?: number;

• Preferred width for the intermediate sidebar.

  Specifies the preferred width (in points or as a fraction for percentage width support) for the supplementary column in the SplitView layout, typically representing the intermediate sidebar.

property children

children?: React.ReactNode;

property columnMetrics

columnMetrics?: SplitViewColumnMetrics;

• An object describing bounds for column widths.

  It supports definitions for the following columns:

  - primary - the leftmost sidebar - supplementary - the intermediate sidebar

  On iOS 26 or higher, it also supports definitions for:

  - secondary - the view with the main content - inspector - the view which is providing additional data about the secondary column

property displayModeButtonVisibility

displayModeButtonVisibility?: SplitViewDisplayModeButtonVisibility;

• Determines whether the button for changing the SplitView display mode is visible on the screen.

  The following values are currently supported:

  - automatic - the visibility of the display mode button is set by system - always – the display mode button is always visible - never – the display mode button is always hidden

  The supported values corresponds to the official UIKit documentation:

  See Also

  • UISplitViewController.DisplayModeButtonVisibility

    automatic

property onCollapse

onCollapse?: (e: NativeSyntheticEvent<GenericEmptyEvent>) => void;

• A callback that gets invoked when the SplitView was collapsed to a single column.

property onDisplayModeWillChange

onDisplayModeWillChange?: (
    e: NativeSyntheticEvent<DisplayModeWillChangeEvent>
) => void;

• A callback that gets invoked when the SplitView displayMode has changed.

  The purpose of this callback is tracking displayMode updates on host from the JS side. These updates might be a consequence of some native interactions, like pressing native button or performing swipe gesture.

property onExpand

onExpand?: (e: NativeSyntheticEvent<GenericEmptyEvent>) => void;

• A callback that gets invoked when the SplitView was expanded to multiple columns.

property onInspectorHide

onInspectorHide?: (e: NativeSyntheticEvent<GenericEmptyEvent>) => void;

• A callback that gets invoked when the SplitView inspector is either programmatically hidden (in column presentation) or dismissed (in modal presentation).

  The purpose of this callback depends on whether the SplitView is collapsed or expanded.

  iOS 26 or higher

property orientation

orientation?: SplitViewHostOrientation;

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

  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, 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) correspond to the official UIKit documentation:

  See Also

  • UIInterfaceOrientationMask

    inherit

    ios

property preferredDisplayMode

preferredDisplayMode?: SplitViewDisplayMode;