<Stack />

This component should only be rendered inside a _layout.tsx file, where it will serve as the location that children will render for routes below the layout.

Stack is simply a React Navigation Native Stack view and accepts the same props as React Navigation.

import { Stack } from 'one'
import { Button } from 'react-native'

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        headerRight() {
          return (
            <Button label="Settings" />
          )
        },
      }}
    />
  )
}

You can customize the children of the Stack in your layout by passing a children prop to Stack has Stack.Screen elements, like so:

import { Stack } from 'one'

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Feed' }} />
      <Stack.Screen name="[id]" options={{ title: 'Post' }} />
      <Stack.Screen
        name="sheet"
        options={{
          presentation: 'formSheet',
          gestureDirection: 'vertical',
          animation: 'slide_from_bottom',
          headerShown: false,
        }}
      />
    </Stack>
  )
}

The name must match the full name of the file inside app, without the extension but including groups.

In this example we are setting index, [id], and sheet screens, which would correspond to index.tsx and [id].tsx and sheet.tsx pages in the same directory.

This is a convenient way to configure settings for each page up front, but you could also render Stack.Screen inside each individual page so you can access data loaded inside that page. The upside of doing it in the layout is that it will configure things before any stack animation runs on enter, with the downside being that you can’t access page-level data.

The options property passes to the React Navigation NativeStack, and so takes the same options.

For more declarative header configuration, use the compositional API with Stack.Header and its child components:

import { Stack } from 'one'

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index">
        <Stack.Header blurEffect="regular">
          <Stack.Header.Title large>Articles</Stack.Header.Title>
          <Stack.Header.SearchBar placeholder="Search..." />
        </Stack.Header>
      </Stack.Screen>

      <Stack.Screen name="[id]">
        <Stack.Header>
          <Stack.Header.Title>Post</Stack.Header.Title>
          <Stack.Header.Right asChild>
            <ShareButton />
          </Stack.Header.Right>
        </Stack.Header>
      </Stack.Screen>
    </Stack>
  )
}

Stack.Header

The container for header configuration. Props:

• hidden - Hide the header entirely
• blurEffect - iOS blur effect ('regular', 'prominent', 'systemMaterial', etc.)
• asChild - Render a completely custom header component
• style - Style with backgroundColor, shadowColor (set to 'transparent' to hide)
• largeStyle - Style for large title mode

Stack.Header.Title

Configure the header title:

<Stack.Header.Title large>My Title</Stack.Header.Title>

Props:

• children - The title text
• large - Enable iOS large title mode
• style - Text style (fontWeight, fontSize, color, textAlign)

Stack.Header.BackButton

Configure the back button:

<Stack.Header.BackButton hidden />
<Stack.Header.BackButton displayMode="minimal">Back</Stack.Header.BackButton>

Props:

• children - Custom back button text
• hidden - Hide the back button
• displayMode - 'default', 'generic', or 'minimal'
• withMenu - Enable long-press menu on iOS

Stack.Header.Left / Stack.Header.Right

Add custom components to the header:

<Stack.Header.Left asChild>
  <MenuButton />
</Stack.Header.Left>

<Stack.Header.Right asChild>
  <SettingsButton />
</Stack.Header.Right>

Props:

• asChild - Required to render custom children
• children - Your custom component

Stack.Header.SearchBar

Add an iOS-style search bar:

<Stack.Header.SearchBar
  placeholder="Search articles..."
  autoCapitalize="none"
  placement="stacked"
/>

Props:

• placeholder - Placeholder text
• autoCapitalize - 'none', 'words', 'sentences', 'characters'
• placement - 'automatic' or 'stacked'
• hideWhenScrolling - Hide when scrolling
• obscureBackground - Obscure background when active

Default Header for All Screens

You can set a default header for all screens by placing Stack.Header directly inside Stack:

<Stack>
  <Stack.Header blurEffect="regular">
    <Stack.Header.BackButton displayMode="minimal" />
  </Stack.Header>

  <Stack.Screen name="index" options={{ title: 'Home' }} />
  <Stack.Screen name="profile" options={{ title: 'Profile' }} />
</Stack>