Skip to main content
Version: v4 (Reanimated v2)

BottomSheetView

A pre-integrated React Native View with BottomSheet gestures.

Propsโ€‹

Inherits ViewProps from react-native.

focusHookโ€‹

This needed when bottom sheet used with multiple scrollables to allow bottom sheet detect the current scrollable ref, especially when used with React Navigation. You will need to provide useFocusEffect from @react-navigation/native.

typedefaultrequired
functionReact.useEffectNO

Exampleโ€‹

import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";

const App = () => {
// hooks
const sheetRef = useRef<BottomSheet>(null);

// variables
const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);

// callbacks
const handleSheetChange = useCallback((index) => {
console.log("handleSheetChange", index);
}, []);
const handleSnapPress = useCallback((index) => {
sheetRef.current?.snapToIndex(index);
}, []);
const handleClosePress = useCallback(() => {
sheetRef.current?.close();
}, []);

// render
return (
<View style={styles.container}>
<Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
<Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
<Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
<Button title="Close" onPress={() => handleClosePress()} />
<BottomSheet
ref={sheetRef}
snapPoints={snapPoints}
onChange={handleSheetChange}
>
<BottomSheetView>
<Text>Awesome ๐Ÿ”ฅ</Text>
</BottomSheetView>
</BottomSheet>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 200,
},
});

export default App;