Skip to main content

Props

Props available for TrueSheet. Extends ViewProps.

Configuration​

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

ref​

We use ref to reference our sheet and call the component methods. Learn more about refs here.

sizes​

Array of sizes you want the sheet to support. See this guide for example.

TypeDefault🍎🤖
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 for example.

TypeDefault🍎🤖
string✅✅

backgroundColor​

The sheet's background color.

TypeDefault🍎🤖
ColorValue"white"✅✅

cornerRadius​

The sheet corner radius.

TypeDefault🍎🤖
number✅✅

maxHeight​

Overrides "large" or "100%" height.

TypeDefault🍎🤖
number✅✅

dismissible​

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

TypeDefault🍎🤖
booleantrue✅✅

dimmed​

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

TypeDefault🍎🤖
booleantrue✅✅

dimmedIndex​

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

TypeDefault🍎🤖
number0✅✅
info

This is ignored if dimmed is set to false.

grabber​

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

TypeDefault🍎🤖
booleantrue✅✅

grabberProps​

Overrides the grabber props for android.

TypeDefault🍎🤖
TrueSheetGrabberPropstrue✅

FooterComponent​

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

TypeDefault🍎🤖
ComponentType<...> | ReactElement✅✅

blurTint​

The blur effect style on IOS. Overrides backgroundColor if set. Example: "light", "dark", etc.

TypeDefault🍎🤖
BlurTint✅

scrollRef​

The main scrollable ref that the sheet should handle on IOS. See this guide for example.

TypeDefault🍎🤖
RefObject<...>✅

style​

The sheet's container style override.

TypeDefault🍎🤖
StyleProp<ViewStyle>✅✅

contentContainerStyle​

The sheet's content container style.

TypeDefault🍎🤖
StyleProp<ViewStyle>✅✅

Events​

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>
  )
}

onPresent​

Comes with 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.

This is called when the size of the sheet has changed, either by dragging or by programmatically resizing it. It provides the size index and value.