Skip to main content

Side Sheets

By default, the sheet is centered horizontally. You can anchor it to the left or right edge of the screen using the anchor prop.

side-sheet

How?​

Set anchor to "left" or "right" to position the sheet along that edge.

export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 1]}
      anchor="left"
      maxContentWidth={400}
    >
      <View />
    </TrueSheet>
  )
}
tip

Combine with maxContentWidth to control the sheet width when anchored.

Adjusting the Edge Offset​

On Android and Web, you can control the margin from the screen edge using anchorOffset. The default is 16.

export const App = () => {
  return (
    <TrueSheet
      anchor="left"
      anchorOffset={24}
      detents={['auto', 1]}
      maxContentWidth={400}
    >
      <View />
    </TrueSheet>
  )
}
info

On iOS, the system controls edge margins via UISheetPresentationController's sourceView. The sheet will always float slightly from the edge due to system-defined margins.

note

anchor and maxContentWidth are ignored on phones in portrait orientation — the sheet always spans the full width.