useStack

useStack returns the full state of the nearest <Stack> navigator on web, for building a completely custom stack layout - your own header, transitions, back button, anything.

<Stack> already renders headless on web by default (just the focused screen); reach for useStack when you want to render something yourself instead. See the headless web navigators guide for the full picture.

Usage

Place your component as a child of <Stack>. It replaces the headless default on web and is ignored on native, so the same layout file works everywhere:

// app/_layout.tsx, works on both platforms
import { Stack, useRouter, useStack } from 'one'

function WebStackLayout() {
  const { screens, focused } = useStack()
  const router = useRouter()

  return (
    <>
      {screens.length > 1 && <button onClick={router.back}>← Back</button>}
      <h1>{focused.options.title}</h1>
      {focused.element}
    </>
  )
}

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Feed' }} />
      <Stack.Screen name="[id]" options={{ title: 'Post' }} />
      <WebStackLayout />
    </Stack>
  )
}

Return value

useStack is a state reader. To navigate, use useRouter / router and Link as you would anywhere else in the app - every entry carries an href.

Presentation screens

Screens with a presentation option (sheet, modal, formSheet, …) still show up in screens alongside regular pushed screens - useStack doesn’t separate them out. If your custom layout needs to treat them differently, check focused.options.presentation. Most apps handle presentation screens with Presentations instead, which is scoped specifically to them.

Related

• Stack
• Presentations
• Headless web navigators