BottomSheet

Component to display a modal sheet at the bottom of the page.

Usage

Open BottomSheet

function BottomSheetUsage() {
  const [showBottomSheet, setShowBottomSheet] = useState(false)

  return (
    <View>
      <Button onPress={() => setShowBottomSheet(true)}>Open BottomSheet</Button>
      <BottomSheet
        visible={showBottomSheet}
        onBackdropPress={() => setShowBottomSheet(false)}>
        <ModalContent
          title="Hello world"
          description="Lorem ipsum"
          actionButtons={[
            {
              title: 'Cancel',
              onPress: () => setShowBottomSheet(false),
            },
            {
              title: 'Done',
              onPress: () => setShowBottomSheet(false),
            },
          ]}
        />
      </BottomSheet>
    </View>
  )
}

Usage

Scrollable BottomSheet

function BottomSheetWithScroll() {
  const [showBottomSheet, setShowBottomSheet] = useState(false)

  return (
    <View>
      <Button onPress={() => setShowBottomSheet(true)}>
        Scrollable BottomSheet
      </Button>
      <BottomSheet
        visible={showBottomSheet}
        onBackdropPress={() => setShowBottomSheet(false)}>
        <Spacer />
        <FlatList
          data={Array(100)
            .fill(0)
            .map((_, i) => `Item ${i}`)}
          renderItem={({item}) => (
            <TouchableOpacity accessibilityRole="text" activeOpacity={1}>
              <Text>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </BottomSheet>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	RNModalProps	--	Inherits properties from RNModalProps
backdropStyle	StyleProp<ViewStyle>	--	Style the backdrop of the modal
contentStyle	StyleProp<ViewStyle>	--	content style of the Modal
onBackdropPress	() => void	--	Callback whenever user press on the backdrop or on the android back button press