---
title: Stacking Sheets
description: Guide on how to present bottom sheet on top of an existing sheet.
keywords: [bottom sheet stacking, multiple bottom sheets, parent bottom sheet, child bottom sheet]
---

import stacking from './stacking.gif'

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

<img alt="stacking" src={stacking} width="300"/>

## How?

### 1. Dismiss the "parent" sheet first

```tsx {2-3,9-9}
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 😎.

```tsx {2-2,7-7}
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.
:::
