Skip to main content

BottomSheet

The BottomSheet component provides a bottom sheet implementation using the overlay system. It combines the benefits of bottom sheet presentation with the flexibility of the overlay architecture.

Usage​

Display a bottom sheet using the overlay system. This provides consistent behavior with other overlay components while maintaining the bottom sheet presentation style.

Show BottomSheet
function BottomSheetOverlayUsage() {
  const [visible, setVisible] = useState(false)
  return (
    <View>
      <Button onPress={() => setVisible(true)}>Show BottomSheet</Button>
      <BottomSheet visible={visible} onDismiss={() => setVisible(false)}>
        <View>
          <Text typography="b1">This is a BottomSheet overlay</Text>
          <Text typography="l3">
            You can add any content here, and it will appear as a bottom sheet
            overlay. Tap outside the sheet or press the button below to dismiss
            it.
          </Text>

          <Button
            style={{
              marginVertical: 16,
              justifyContent: 'flex-end',
            }}
            onPress={() => setVisible(false)}>
            Close
          </Button>
        </View>
      </BottomSheet>
    </View>
  )
}

Props​

PropData TypeDefault ValueDescription
Extends------
visibleboolean--Whether the BottomSheet is visible or not.
childrenReactNode--The content to be displayed inside the BottomSheet.
onDismiss() => void--Callback function that is called when the BottomSheet requests to be dismissed.This can happen when the user taps on the backdrop (if `backdropBehavior` is set to 'dismiss') or when the `duration` expires.
backdropBehavior"interactive" | "block" | "dismiss"interactiveControl the behavior of the backdrop when the BottomSheet is visible.- 'interactive': The backdrop will be rendered and will allow interactions with it. Tapping on the backdrop will trigger the `onDismiss` callback. - 'block': The backdrop will be rendered and will block interactions with it. Tapping on the backdrop will not do anything. - 'dismiss': The backdrop will be rendered and tapping on it will trigger the `onDismiss` callback, but it will not allow any interactions with the backdrop itself.
styleStyleProp<ViewStyle>--style for the container of the BottomSheet
backdropStyleStyleProp<ViewStyle>--style for the backdrop of the BottomSheet