Implement a dynamic bottom sheet in React & React Native with gluestack's bottomsheet component. Learn how to integrate and customize the Bottom Sheet in React Native.

Installation

Run the following command:

npx gluestack-ui add bottomsheet

This command will copies all the code from git repo — excluding the docs and examples folders — into your project’s

components/ui

directory.

API Reference

To use this component in your project, include the following import statement in your file.

import {
  BottomSheet,
  BottomSheetBackdrop,
  BottomSheetContent,
  BottomSheetDragIndicator,
  BottomSheetItem,
  BottomSheetItemText,
  BottomSheetPortal,
  BottomSheetTrigger,
} from '@/components/ui/bottomsheet';

export default () => (
  <BottomSheet>
    <BottomSheetTrigger>
      <Text>Open BottomSheet</Text>
    </BottomSheetTrigger>
    <BottomSheetPortal
      snapPoints={['25%', '50%']}
      backdropComponent={BottomSheetBackdrop}
      handleComponent={BottomSheetDragIndicator}
    >
      <BottomSheetContent>
        <BottomSheetItem>
          <BottomSheetItemText>Item 1</BottomSheetItemText>
        </BottomSheetItem>
        <BottomSheetItem>
          <BottomSheetItemText>Item 2</BottomSheetItemText>
        </BottomSheetItem>
        <BottomSheetItem>
          <BottomSheetItemText>Item 3</BottomSheetItemText>
        </BottomSheetItem>
      </BottomSheetContent>
    </BottomSheetPortal>
  </BottomSheet>
);

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

BottomSheet

It is a context provider for entire bottomsheet api.

Props

Prop	Type	Default	Description
snapToIndex	number	1	index of snapPoints at which bottomsheet initially opens.
onOpen	() => void	-	callback function which trigger when bottomsheet is opened.
onClose	() => void	-	callback function which trigger when bottomsheet is closed.

BottomSheetTrigger

It inherits all the properties of React Native's pressable component.

BottomSheetPortal

it's a gorhom BottomSheet component. inherits all the properties of gorhom BottomSheet.

Prop	Type	Default	Description
snapPoints	Array<string \| number>	-	Points for the bottom sheet to snap to. It accepts array of number, string or mix. String values should be a percentage.

BottomSheetContent

It inherits all the properties of gorhom BottomSheetView.

BottomSheetItem

It inherits all the properties of React Native's Pressable component.

BottomSheetItemText

It inherits all the properties of React Native's Text component.

BottomSheetTextInput

It inherits all the properties of gorhom BottomSheetTextInput.

BottomSheetScrollView

It inherits all the properties of gorhom BottomSheetScrollView.

BottomSheetFlatList

It inherits all the properties of gorhom BottomSheetFlatList.

BottomSheetSectionList

It inherits all the properties of gorhom BottomSheetSectionList.

Edit this page on GitHub