Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Expo Router Stack

An Expo Router API that provides Stack navigator, toolbar, and screen components.

Android
iOS
tvOS
Web
Included in Expo Go

GitHub

npm

Changelog

An Expo Router API that provides Stack navigator, toolbar, and screen components.

See the Expo Router reference for installation and configuration.

Usage

import { Stack } from 'expo-router';

export default function Layout() {
  return <Stack />;
}

For more information about using stack navigator, read the stack layout guide:

Stack layout

Learn how to use the Stack layout in Expo Router.

API

import { Stack } from 'expo-router';

Components

Stack

Android
iOS
tvOS
Web

Renders a native stack navigator.

Stack.Header

Android
iOS
tvOS
Web

Type: React.Element<StackHeaderProps>

The component used to configure header styling for a stack screen.

Use this component to set header appearance properties like blur effect, background color, and shadow visibility.

Example

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Header
        blurEffect="systemMaterial"
        style={{ backgroundColor: '#fff' }}
      />
      <ScreenContent />
    </>
  );
}

Example

When used inside a layout with Stack.Screen:

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index">
        <Stack.Header blurEffect="systemMaterial" />
      </Stack.Screen>
    </Stack>
  );
}

Note: If multiple instances of this component are rendered for the same screen, the last one rendered in the component tree takes precedence.

StackHeaderProps

asChild

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

When true, renders children as a custom header component, replacing the default header entirely. Use this to implement fully custom header layouts.

blurEffect

iOS
Optional • Type: BlurEffectTypes

The blur effect to apply to the header background on iOS. Common values include 'regular', 'prominent', 'systemMaterial', etc.

children

Android
iOS
tvOS
Web
Optional • Type: ReactNode

Child elements for custom header when asChild is true.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether to hide the header completely. When set to true, the header will not be rendered.

largeStyle

iOS
Optional • Type: StyleProp<{ backgroundColor: ColorValue, shadowColor: 'transparent' }>

Style properties for the large title header (iOS).

  • backgroundColor: Background color of the large title header
  • shadowColor: Set to 'transparent' to hide the large title shadow/border

style

Android
iOS
tvOS
Web
Optional • Type: StyleProp<{ backgroundColor: ColorValue, color: ColorValue, shadowColor: 'transparent' }>

Style properties for the standard-sized header.

  • color: Tint color for header elements (similar to tintColor in React Navigation)
  • backgroundColor: Background color of the header
  • shadowColor: Set to 'transparent' to hide the header shadow/border

transparent

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether the header should be transparent. When true, the header is absolutely positioned and content scrolls underneath.

Auto-enabled when:

  • style.backgroundColor is 'transparent'
  • blurEffect is set (required for blur to work)

Stack.Screen

Android
iOS
tvOS
Web

Type: React.Element<StackScreenProps>

StackScreenProps

dangerouslySingular

Android
iOS
tvOS
Web
Optional • Type: SingularOptions

When enabled, the navigator will reuse an existing screen instead of pushing a new one.

Only supported when used inside a Layout component.

Deprecated: Use dangerouslySingular instead.

Only supported when used inside a Layout component.

getId

Android
iOS
tvOS
Web
Optional • Type: (__namedParameters: { params: Record<string, any> }) => string | undefined

Function to determine a unique ID for the screen.

initialParams

Android
iOS
tvOS
Web
Optional • Type: Record<string, any>

Initial params to pass to the route.

Only supported when used inside a Layout component.

listeners

Android
iOS
tvOS
Web
Optional • Literal type: union

Listeners for navigation events.

Only supported when used inside a Layout component.

Acceptable values are: Partial<undefined> | (prop: { navigation: any, route: RouteProp<ParamListBase, string> }) => ScreenListeners<TState, TEventMap>

name

Android
iOS
tvOS
Web
Optional • Type: string

Name is required when used inside a Layout component.

options

Android
iOS
tvOS
Web
Optional • Literal type: union

Options to configure the screen.

Accepts an object or a function returning an object. The function form options={({ route }) => ({})} is only supported when used inside a Layout component. When used inside a page component, pass an options object directly.

Acceptable values are: NativeStackNavigationOptions | (prop: { navigation: any, route: RouteProp<ParamListBase, string> }) => NativeStackNavigationOptions

redirect

Android
iOS
tvOS
Web
Optional • Type: boolean

Redirect to the nearest sibling route. If all children are redirect={true}, the layout will render null as there are no children to render.

Only supported when used inside a Layout component.

Inherited Props

  • PropsWithChildren

Stack.SearchBar

Android
iOS
tvOS
Web

Type: React.Element<StackSearchBarProps>

A search bar component that integrates with the native stack header.

Note: Using Stack.SearchBar will automatically make the header visible (headerShown: true), as the search bar is rendered as part of the native header.

To display the search bar in the bottom toolbar on iOS 26+, use Stack.Toolbar.SearchBarSlot inside Stack.Toolbar.

Example

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.SearchBar
        placeholder="Search..."
        onChangeText={(text) => console.log(text)}
      />
     <ScreenContent />
    </>
  );
}

StackSearchBarProps

Inherited Props

  • SearchBarProps

Stack.Toolbar

Experimental
 • 
iOS

Type: React.Element<StackToolbarProps>

The component used to configure the stack toolbar.

  • Use placement="left" to customize the left side of the header.
  • Use placement="right" to customize the right side of the header.
  • Use placement="bottom" (default) to show a bottom toolbar (iOS only).

If multiple instances of this component are rendered for the same screen, the last one rendered in the component tree takes precedence.

Note: Using Stack.Toolbar with placement="left" or placement="right" will automatically make the header visible (headerShown: true), as the toolbar is rendered as part of the native header.

Note: Stack.Toolbar with placement="bottom" can only be used inside page components, not in layout components.

Example

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index">
        <Stack.Toolbar placement="left">
          <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
        </Stack.Toolbar>
        <Stack.Toolbar placement="right">
          <Stack.Toolbar.Button icon="ellipsis.circle" onPress={() => alert('Right button pressed!')} />
        </Stack.Toolbar>
      </Stack.Screen>
    </Stack>
  );
}

Example

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Toolbar placement="left">
        <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
      </Stack.Toolbar>
      <Stack.Toolbar>
        <Stack.Toolbar.Spacer />
        <Stack.Toolbar.Button icon="magnifyingglass" onPress={() => {}} />
        <Stack.Toolbar.Spacer />
      </Stack.Toolbar>
      <ScreenContent />
    </>
  );
}

StackToolbarProps

asChild

iOS
Optional • Type: boolean • Default: false

When true, renders children as a custom component in the header area, replacing the default header layout.

Only applies to placement="left" and placement="right".

children

iOS
Optional • Type: ReactNode

Child elements to compose the toolbar. Can include Stack.Toolbar.Button, Stack.Toolbar.Menu, Stack.Toolbar.View, Stack.Toolbar.Spacer, and Stack.Toolbar.SearchBarSlot (bottom only) components.

placement

iOS
Optional • Type: ToolbarPlacement • Default: 'bottom'

The placement of the toolbar.

  • 'left': Renders items in the left area of the header.
  • 'right': Renders items in the right area of the header.
  • 'bottom': Renders items in the bottom toolbar (iOS only).

Stack.Screen.BackButton

Android
iOS
tvOS
Web

Type: React.Element<StackScreenBackButtonProps>

Component to configure the back button.

Can be used inside Stack.Screen in a layout or directly inside a screen component.

Example

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="detail">
        <Stack.Screen.BackButton displayMode="minimal">Back</Stack.Screen.BackButton>
      </Stack.Screen>
    </Stack>
  );
}

Example

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Screen.BackButton hidden />
      <ScreenContent />
    </>
  );
}

Note: If multiple instances of this component are rendered for the same screen, the last one rendered in the component tree takes precedence.

StackScreenBackButtonProps

children

Android
iOS
tvOS
Web
Optional • Type: string

The title to display for the back button.

displayMode

iOS
Optional • Type: BackButtonDisplayMode

The display mode for the back button.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean

Whether to hide the back button.

src

Android
iOS
tvOS
Web
Optional • Type: ImageSourcePropType

Custom image source for the back button.

style

Android
iOS
tvOS
Web
Optional • Type: StyleProp<undefined>

Style for the back button title.

withMenu

iOS
Optional • Type: boolean

Whether to show a context menu when long pressing the back button.

Stack.Screen.Title

Android
iOS
tvOS
Web

Type: React.Element<StackScreenTitleProps>

Component to set the screen title.

Can be used inside Stack.Screen in a layout or directly inside a screen component.

Example

String title in a layout:

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index">
        <Stack.Screen.Title large>Home</Stack.Screen.Title>
      </Stack.Screen>
    </Stack>
  );
}

Example

String title inside a screen:

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Screen.Title>My Page</Stack.Screen.Title>
      <ScreenContent />
    </>
  );
}

Example

Custom component as the title using asChild:

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index">
        <Stack.Screen.Title asChild>
          <MyCustomTitle />
        </Stack.Screen.Title>
      </Stack.Screen>
    </Stack>
  );
}

Note: If multiple instances of this component are rendered for the same screen, the last one rendered in the component tree takes precedence.

StackScreenTitleProps

asChild

Android
iOS
tvOS
Web
Optional • Type: boolean

Use this to render a custom component as the header title.

Example

<Stack.Screen.Title asChild>
  <MyCustomTitle />
</Stack.Screen.Title>

children

Android
iOS
tvOS
Web
Optional • Type: React.ReactNode

The title content. Pass a string for a plain text title, or a custom component when asChild is enabled.

large

iOS
Optional • Type: boolean

Enables large title mode.

largeStyle

iOS
Optional • Type: StyleProp<{ color: string, fontFamily: TextStyle[fontFamily], fontSize: TextStyle[fontSize], fontWeight: Exclude<TextStyle[fontWeight], number> }>

Style properties for the large title header.

style

Android
iOS
tvOS
Web
Optional • Type: StyleProp<{ color: string, fontFamily: TextStyle[fontFamily], fontSize: TextStyle[fontSize], fontWeight: Exclude<TextStyle[fontWeight], number>, textAlign: 'left' | 'center' }>

Stack.Toolbar.Badge

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarBadgeProps>>

StackToolbarBadgeProps

children

Android
iOS
tvOS
Web
Optional • Type: string

The text to display as the badge

style

Android
iOS
tvOS
Web
Optional • Type: StyleProp<Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight' | 'backgroundColor' | 'color'>>

Stack.Toolbar.Button

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarButtonProps>>

StackToolbarButtonProps

accessibilityHint

Android
iOS
tvOS
Web
Optional • Type: string

accessibilityLabel

Android
iOS
tvOS
Web
Optional • Type: string

children

Android
iOS
tvOS
Web
Optional • Type: ReactNode

There are two ways to specify the content of the button:

Example

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Toolbar placement="left">
        <Stack.Toolbar.Button icon="star.fill">As text passed as children</Stack.Toolbar.Button>
      </Stack.Toolbar>
      <ScreenContent />
    </>
  );
}

Example

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Toolbar placement="left">
        <Stack.Toolbar.Button>
          <Stack.Toolbar.Icon sf="star.fill" />
          <Stack.Toolbar.Label>As components</Stack.Toolbar.Label>
          <Stack.Toolbar.Badge>3</Stack.Toolbar.Badge>
        </Stack.Toolbar.Button>
      </Stack.Toolbar>
      <ScreenContent />
    </>
  );
}

Note: When icon is used, the label will not be shown and will be used for accessibility purposes only. Badge is only supported in left/right placements, not in bottom (iOS toolbar limitation).

disabled

Android
iOS
tvOS
Web
Optional • Type: boolean

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether the button should be hidden.

hidesSharedBackground

iOS 26+
Optional • Type: boolean

Whether to hide the shared background.

icon

Android
iOS
tvOS
Web
Optional • Literal type: union

Icon to display in the button.

Can be a string representing an SFSymbol or an image source.

Note: When used in placement="bottom", only string SFSymbols are supported. Use the image prop to provide custom images.

Acceptable values are: ImageSourcePropType | SFSymbols7_0

iconRenderingMode

iOS
Optional • Literal type: string

Controls how image-based icons are rendered on iOS.

  • 'template': iOS applies tint color to the icon
  • 'original': Preserves original icon colors (useful for multi-color icons)

Default behavior:

  • If tintColor is specified, defaults to 'template'
  • If no tintColor, defaults to 'original'

This prop only affects image-based icons (not SF Symbols).

See: Apple documentation for more information.

Acceptable values are: 'template' | 'original'

image

Android
iOS
tvOS
Web
Optional • Type: ImageRef

Image to display in the button.

Note: This prop is only supported in toolbar with placement="bottom".

onPress

Android
iOS
tvOS
Web
Optional • Type: () => void

selected

Android
iOS
tvOS
Web
Optional • Type: boolean

Whether the button is in a selected state

See: Apple documentation for more information

separateBackground

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether to separate the background of this item from other header items.

style

Android
iOS
tvOS
Web
Optional • Type: StyleProp<TextStyle>

Style for the label of the header item.

tintColor

Android
iOS
tvOS
Web
Optional • Type: ColorValue

The tint color to apply to the button item

See: Apple documentation for more information.

variant

Android
iOS
tvOS
Web
Optional • Literal type: string • Default: 'plain'

Acceptable values are: 'done' | 'prominent' | 'plain'

Stack.Toolbar.Icon

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarIconProps>>

StackToolbarIconProps

renderingMode

iOS
Optional • Literal type: string

Controls how the image icon is rendered on iOS.

  • 'template': iOS applies tint color to the icon
  • 'original': Preserves original icon colors

Defaults based on parent component's tintColor:

  • With tintColor: defaults to 'template'
  • Without tintColor: defaults to 'original'

Acceptable values are: 'template' | 'original'

src

Android
iOS
tvOS
Web
Type: ImageSourcePropType

sf

Android
iOS
tvOS
Web
Type: SFSymbol

xcasset

iOS
Type: string

Name of an image in your Xcode asset catalog (.xcassets).

Stack.Toolbar.Label

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarLabelProps>>

StackToolbarLabelProps

children

Android
iOS
tvOS
Web
Optional • Type: string

The text to display as the label for the tab.

Stack.Toolbar.Menu

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarMenuProps>>

StackToolbarMenuProps

accessibilityHint

Android
iOS
tvOS
Web
Optional • Type: string

accessibilityLabel

Android
iOS
tvOS
Web
Optional • Type: string

children

Android
iOS
tvOS
Web
Optional • Type: ReactNode

Menu content - can include icons, labels, badges and menu actions.

Example

<Stack.Toolbar.Menu>
  <Stack.Toolbar.Icon sfSymbol="ellipsis.circle" />
  <Stack.Toolbar.Label>Options</Stack.Toolbar.Label>
  <Stack.Toolbar.MenuAction onPress={() => {}}>Action 1</Stack.Toolbar.MenuAction>
</Stack.Toolbar.Menu>

destructive

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

disabled

Android
iOS
tvOS
Web
Optional • Type: boolean

elementSize

iOS 16.0+
Optional • Literal type: string

The preferred size of the menu elements.

Note: This prop is only supported in Stack.Toolbar.Bottom.

See: Apple documentation for more information.

Acceptable values are: 'small' | 'auto' | 'medium' | 'large'

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether the menu should be hidden.

hidesSharedBackground

iOS 26+
Optional • Type: boolean

Whether to hide the shared background.

See: Official Apple documentation for more information.

icon

Android
iOS
tvOS
Web
Optional • Literal type: union

Icon for the menu item.

Can be an SF Symbol name or an image source.

Note: When used in placement="bottom", only string SFSymbols are supported. Use the image prop to provide custom images.

Acceptable values are: ImageSourcePropType | SFSymbols7_0

iconRenderingMode

iOS
Optional • Literal type: string

Controls how image-based icons are rendered on iOS.

  • 'template': iOS applies tint color to the icon (useful for monochrome icons)
  • 'original': Preserves original icon colors (useful for multi-color icons)

Default behavior:

  • If tintColor is specified, defaults to 'template'
  • If no tintColor, defaults to 'original'

This prop only affects image-based icons (not SF Symbols).

See: Apple documentation for more information.

Acceptable values are: 'template' | 'original'

image

Android
iOS
tvOS
Web
Optional • Type: ImageRef

Image to display for the menu item.

Note: This prop is only supported in toolbar with placement="bottom".

inline

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu will be displayed inline. This means that the menu will not be collapsed

Note: Inline menus are only supported in submenus.

See: Apple documentation for more information.

palette

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu will be displayed as a palette. This means that the menu will be displayed as one row

Note: Palette menus are only supported in submenus.

See: Apple documentation for more information.

separateBackground

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether to separate the background of this item from other header items.

style

Android
iOS
tvOS
Web
Optional • Type: StyleProp<BasicTextStyle>

Style for the label of the header item.

tintColor

Android
iOS
tvOS
Web
Optional • Type: ColorValue

The tint color to apply to the button item

See: Apple documentation for more information.

title

Android
iOS
tvOS
Web
Optional • Type: string

Optional title to show on top of the menu.

variant

Android
iOS
tvOS
Web
Optional • Literal type: string • Default: 'plain'

Acceptable values are: 'done' | 'prominent' | 'plain'

Stack.Toolbar.MenuAction

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarMenuActionProps>>

StackToolbarMenuActionProps

children

Android
iOS
tvOS
Web
Optional • Type: ReactNode

Can be an Icon, Label or string title.

destructive

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

disabled

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu item will be disabled and not selectable.

See: Apple documentation for more information.

discoverabilityLabel

Android
iOS
tvOS
Web
Optional • Type: string

An elaborated title that explains the purpose of the action.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean

icon

Android
iOS
tvOS
Web
Optional • Literal type: union

Acceptable values are: ImageSourcePropType | SFSymbols7_0

iconRenderingMode

iOS
Optional • Literal type: string

Controls how image-based icons are rendered on iOS.

  • 'template': iOS applies tint color to the icon (useful for monochrome icons)
  • 'original': Preserves original icon colors (useful for multi-color icons)

Default behavior:

  • If tintColor is specified, defaults to 'template'
  • If no tintColor, defaults to 'original'

This prop only affects image-based icons (not SF Symbols).

See: Apple documentation for more information.

Acceptable values are: 'template' | 'original'

image

Android
iOS
tvOS
Web
Optional • Type: ImageRef

Image to display for the menu action.

Note: This prop is only supported in Stack.Toolbar.Bottom.

isOn

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu item will be displayed as selected.

onPress

Android
iOS
tvOS
Web
Optional • Type: () => void

subtitle

Android
iOS
tvOS
Web
Optional • Type: string

An optional subtitle for the menu item.

See: Apple documentation for more information.

unstable_keepPresented

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the menu will be kept presented after the action is selected.

This is marked as unstable, because when action is selected it will recreate the menu, which will close all opened submenus and reset the scroll position.

See: Apple documentation for more information.

Stack.Toolbar.SearchBarSlot

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarSearchBarSlotProps>>

StackToolbarSearchBarSlotProps

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether the search bar slot should be hidden.

hidesSharedBackground

iOS 26+
Optional • Type: boolean

Whether to hide the shared background.

separateBackground

iOS 26+
Optional • Type: boolean

Whether this search bar slot has a separate background from adjacent items. When this prop is true, the search bar will always render as integratedButton.

In order to render the search bar with a separate background, ensure that adjacent toolbar items have separateBackground set to true or use Stack.Toolbar.Spacer to create spacing.

Example

<Stack.SearchBar onChangeText={()=>{}} />
<Stack.Toolbar placement="bottom">
  <Stack.Toolbar.SearchBarSlot />
  <Stack.Toolbar.Spacer />
  <Stack.Toolbar.Button icon="square.and.pencil" />
</Stack.Toolbar>

Stack.Toolbar.Spacer

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarSpacerProps>>

StackToolbarSpacerProps

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether the spacer should be hidden.

sharesBackground

iOS 26+
Optional • Type: boolean

Whether this spacer shares background with adjacent items.

Only available in bottom placement.

width

Android
iOS
tvOS
Web
Optional • Type: number

The width of the spacing element.

In Left/Right placements, width is required. In Bottom placement, if width is not provided, the spacer will be flexible and expand to fill available space.

Stack.Toolbar.View

Android
iOS
tvOS
Web

Type: React.Element<FC<StackToolbarViewProps>>

StackToolbarViewProps

asChild

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

When true, renders children as a custom component in the header area, replacing the default header layout.

Only applies to placement="left" and placement="right".

children

Android
iOS
tvOS
Web
Optional • Type: ReactNode

Child elements to compose the toolbar. Can include Stack.Toolbar.Button, Stack.Toolbar.Menu, Stack.Toolbar.View, Stack.Toolbar.Spacer, and Stack.Toolbar.SearchBarSlot (bottom only) components.

placement

Android
iOS
tvOS
Web
Optional • Type: ToolbarPlacement • Default: 'bottom'

The placement of the toolbar.

  • 'left': Renders items in the left area of the header.
  • 'right': Renders items in the right area of the header.
  • 'bottom': Renders items in the bottom toolbar (iOS only).

children

Android
iOS
tvOS
Web
Optional • Type: ReactElement<unknown, string | JSXElementConstructor<any>>

Can be any React node.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether the view should be hidden.

hidesSharedBackground

iOS 26+
Optional • Type: boolean

Whether to hide the shared background.

See: Official Apple documentation for more information.

separateBackground

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

Whether to separate the background of this item from other items.

Only available in bottom placement.

Interfaces

StackHeaderItemSharedProps

Android
iOS
tvOS
Web
PropertyTypeDescription
accessibilityHint(optional)string
-
accessibilityLabel(optional)string
-
children(optional)ReactNode
-
disabled(optional)boolean
-
hidesSharedBackground(optional)boolean
-
icon(optional)ImageSourcePropType | SFSymbols7_0
-
iconRenderingMode(optional)'template' | 'original'
Only for: 
iOS

Controls how image-based icons are rendered on iOS.

  • 'template': iOS applies tint color to the icon
  • 'original': Preserves original icon colors (useful for multi-color icons)

Default behavior:

  • If tintColor is specified, defaults to 'template'
  • If no tintColor, defaults to 'original'

This prop only affects image-based icons (not SF Symbols).

See: Apple documentation for more information.

separateBackground(optional)boolean
-
style(optional)StyleProp<BasicTextStyle>
-
tintColor(optional)ColorValue
-
variant(optional)'done' | 'prominent' | 'plain'
Default:'plain'