<Slot />

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.

This is the simplest option for rendering children, it does not create a Stack, Drawer, or Tab view, instead it just renders the children directly.

import { Slot } from 'one'

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

NamedSlot

For intercepting routes, layouts render one <NamedSlot> per parallel @slotName directory. It renders the intercepted route when an intercept is active, and its children (or the slot’s default.tsx) otherwise:

import { NamedSlot } from 'one'

export default function Layout({ children, modal }) {
  return (
    <>
      {children}
      <NamedSlot name="modal">{modal}</NamedSlot>
    </>
  )
}

name matches the @modal directory name. Pass layoutContextKey to scope slot state to one layout so duplicate modals do not render across layouts.

Close an intercepted modal with closeIntercept() instead of router.back(). It restores the pre-intercept URL and returns true when an intercept was active, false otherwise:

import { closeIntercept } from 'one'

function CloseButton() {
  return <button onClick={() => closeIntercept()}>Close</button>
}

Use isInterceptedNavigation() to check whether the current history entry came from an interception.

See NamedSlot above for the full file conventions.