Skip to main content
Version: v4 (Reanimated v2)

Detach Modal

To create a detach modal, you will need to pass the prop detach={true} to the BottomSheet or BottomSheetModal, along side with bottomInset to push the sheet from the bottom.

Exampleโ€‹

Here is an example of a simple detach modal:

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

const App = () => {
// ref
const bottomSheetRef = useRef<BottomSheet>(null);

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

// renders
return (
<View style={styles.container}>
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
// add bottom inset to elevate the sheet
bottomInset={46}
// set `detached` to true
detached={true}
style={styles.sheetContainer}
>
<View style={styles.contentContainer}>
<Text>Awesome ๐ŸŽ‰</Text>
</View>
</BottomSheet>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "grey",
},
sheetContainer: {
// add horizontal space
marginHorizontal: 24,
},
contentContainer: {
flex: 1,
alignItems: "center",
},
});

export default App;