<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 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" /> ) }, }} >
<Stack.Screen name="index" options={{ title: 'Feed' }} />
<Stack.Screen name="[id]" options={{ title: 'Post' }} />
</Stack>
)
}

Note that you can include Stack.Screen components inside Stack to configure children of the current directory. In this example we are setting index and [id] screens, which would correspond to index.tsx and [id].tsx pages in the same directory. While this is a convenient way to configure settings for each page up front, 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.

Edit this page on GitHub.