---
title: Props
description: True Native Bottom Sheet component props.
keywords: [bottom sheet props, bottom sheet configuration, bottom sheet preferences]
---

Props available for `TrueSheet`. Extends `ViewProps`.

## Configuration

```tsx {2-5}
<TrueSheet
  ref={sheet}
  sizes={['auto', '80%', 'large']}
  backgroundColor="#696969"
  // ...
>
  <View />
</TrueSheet>
```

### `ref`

We use `ref` to reference our sheet and call the [component methods](/reference/methods). Learn more about refs [here](https://react.dev/learn/referencing-values-with-refs).

### `sizes`

Array of sizes you want the sheet to support. See [this guide](/guides/resizing) for example.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| [`SheetSize[]`](/reference/types#sheetsize) | `["medium", "large"]` | ✅ | ✅ |

:::info
A sheet can only support up to **3** sizes only! AKA **_collapsed_**, **_half-expanded_**, and **_expanded_**.
:::

### `name`

The name to reference this sheet. It has to be **_unique_**. You can then present this sheet globally using its name. See [this guide](/guides/global-methods) for example.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `string` | | ✅ | ✅ |

### `backgroundColor`

The sheet's background color.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `ColorValue` | `"white"` | ✅ | ✅ |

### `cornerRadius`

The sheet corner radius.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `number` | | ✅ | ✅ |

### `maxHeight`

Overrides `"large"` or `"100%"` height.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `number` | | ✅ | ✅ |

### `dismissible`

If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `boolean` | `true` | ✅ | ✅ |

### `dimmed`

Specify whether the sheet background is dimmed. Set to `false` to allow interaction with the background components.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `boolean` | `true` | ✅ | ✅ |

:::info
This property is only used during the initial mount.
:::

### `dimmedIndex`

The size index that the sheet should start to dim the background.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `number` | `0` | ✅ | ✅ |

:::info
This is ignored if `dimmed` is set to `false`.
:::

### `initialIndex`

Initially present the sheet, after mounting, at a given size index.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `number` | `-1` | ✅ | ✅ |

### `initialIndexAnimated`

Specify whether the sheet should animate after mounting.
Used with `initialIndex`.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `boolean` | `true` | ✅ | ✅ |

### `keyboardMode`

Determines how the software keyboard will impact the layout of the sheet.
Set to `pan` if you're working with `FlatList` with a `TextInput`.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `"resize", "pan"` | `"resize"` |  | ✅ |

### `grabber`

Shows a grabber (or handle). Native on IOS and styled `View` on Android.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `boolean` | `true` | ✅ | ✅ |

### `grabberProps`

Overrides the grabber props for android.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| [`TrueSheetGrabberProps`](/reference/types#truesheetgrabberprops) | `true` |  | ✅ |

### `FooterComponent`

A component that floats at the bottom of the sheet. Accepts a functional `Component` or `ReactElement`.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `ComponentType<...> \| ReactElement` | | ✅ | ✅ |

### `blurTint`

The blur effect style on IOS. Overrides [`backgroundColor`](#backgroundcolor) if set. Example: `"light"`, `"dark"`, etc.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| [`BlurTint`](/reference/types#blurtint) | | ✅ | |

### `scrollRef`

The main scrollable ref that the sheet should handle on IOS. See [this guide](/guides/scrolling) for example.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `RefObject<...>` | | ✅ | |

### `style`

The sheet's container style override.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `StyleProp<ViewStyle>` | | ✅ | ✅ |

### `contentContainerStyle`

The sheet's content container style.

| Type | Default | 🍎 | 🤖 |
| - | - | - | - |
| `StyleProp<ViewStyle>` | | ✅ | ✅ |

## Events

```tsx {20-22}
const App = () => {
  const handleDismiss = () => {
    console.log('Bye bye 👋')
  }

  const handleOnPresent = (sizeInfo: SizeInfo) => {
    console.log(sizeInfo) // { index: 0, value: 69 }
  }

  const handleSizeChange = (sizeInfo: SizeInfo) => {
    console.log(sizeInfo) // { index: 1, value: 247 }
  }

  return (
    <View>
      <Button title="Present" onPress={() => sheet.current?.present()} />
      <TrueSheet
        ref={sheet}
        sizes={[69, 247]}
        onPresent={handleOnPresent}
        onSizeChange={handleSizeChange}
        onDismiss={handleDismiss}
      >
        <Button title="Resize" onPress={() => sheet.current?.resize(1)} />
        <Button title="Dismiss" onPress={() => sheet.current?.dismiss(1)} />
      </TrueSheet>
    </View>
  )
}
```

### `onMount`

This is called when the sheet has been mounted and is ready to present.

### `onPresent`

Comes with [`SizeInfo`](/reference/types#sizeinfo).

This is called when the sheet has been presented, providing the size `index` and `value`.

### `onDismiss`

This is called when the sheet has been dismissed.

### `onSizeChange`

Comes with [`SizeInfo`](/reference/types#sizeinfo).

This is called when the size of the sheet has changed, either by dragging or by programmatically [resizing](/reference/methods#resize) it. It provides the size `index` and `value`.
