BottomSheet

BottomSheet created for React Native.

Compatibility

expo-bottom-sheet requires react-native >= 0.73.6

Usage

1import BottomSheet from "expo-bottom-sheet"
2import { useRef } from "react"
3import {
4  Animated,
5  Button,
6  Dimensions,
7  StyleSheet,
8  Text,
9  View,
10} from "react-native"
11
12const { height: DEVICE_HEIGHT } = Dimensions.get("window")
13
14export default function App() {
15  const sheetRef = useRef()
16  return (
17    <View style={styles.container}>
18      <Button
19        title='firstPosition()'
20        onPress={() => sheetRef.current.firstPosition()}
21      />
22      <Button
23        title='secondPosition()'
24        onPress={() => sheetRef.current.secondPosition()}
25      />
26      <Button title='close()' onPress={() => sheetRef.current.close()} />
27      <BottomSheet
28        ref={sheetRef}
29        indexStart={-1}
30        animation={new Animated.Value(DEVICE_HEIGHT)}
31      >
32        <View
33          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
34        >
35          <Text>Hello World!</Text>
36        </View>
37      </BottomSheet>
38    </View>
39  )
40}
41
42const styles = StyleSheet.create({
43  container: {
44    flex: 1,
45    backgroundColor: "#fff",
46    alignItems: "center",
47    justifyContent: "center",
48  },
49})

Props

Name	Type	Default	Note
animation	Animated.Value()		Use the Animated Value of react native, the recommended value that it has to start should be the device height as shown in the example
children	Component		Component to render inside the Bottom Sheet
handleComponent	Function		Has to return a component for it to replace the default handle component
indexStart	Int	0	Number to identify in which position it will start. If you want it to start in a closed state you should assign it to -1
enablePanDownToClose	Boolean	False	It allows to close completely the Bottom Sheet
style	StyleSheet		Style for the content of the Bottom Sheet
handleStyle	StyleSheet		Style for the handle component
disablePanDownChildren	Boolean	False	It disables the pan down responder for the children and it only works for the handle component, it's useful when you have to render a FlatList SectionList ScrollView
bottomInsets	Int	0	Bottom inset to be added to the bottom sheet container, usually it comes from from react-native-safe-area-context hook useSafeAreaInsets.

Methods

Method Name	Arguments	Note
firstPosition		Opens the sheet to the first position
secondPosition	validate: Boolean	Opens the sheet to the second position. Validate argument is so it validates or not to close completly the sheet if it's get executed again
close	validate: Boolean	Closes completly the sheet. Validate argument is so it validates or not to close to firstPosition if it's get executed again