Skip to main content

Stacking Sheets

Sometimes you want to stack the sheets one after another. On iOS, this can cause issues. There are two ways to resolve this.

stacking

How?​

1. Dismiss the "parent" sheet first​

const presentSheet2 = async () => {
  await sheet1.current?.dismiss() // Wait for sheet 1 to dismiss ✅
  await sheet2.current?.present() // Sheet 2 will now present 🎉
}

return (
  <>
    <TrueSheet ref={sheet1}>
      <Button onPress={presentSheet2} title="Present Sheet 2" />
      <View />
    </TrueSheet>
    <TrueSheet ref={sheet2}>
      <View />
    </TrueSheet>
  </>
)

2. Define the 2nd sheet within the "parent" sheet.​

IOS handles this automatically by default 😎.

const presentSheet2 = async () => {
  await sheet2.current?.present() // Sheet 2 will now present 🎉
}

return (
  <TrueSheet ref={sheet1}>
    <Button onPress={presentSheet2} title="Present Sheet 2" />
    <TrueSheet ref={sheet2}>
      <View />
    </TrueSheet>
  </TrueSheet>
)
tip

You can do the same with Android for a more consistent user experience.