Using @gorhom/react-native-bottom-sheet library
Requirements:
- TypeScript
- *Install dependency* react-native-gesture-handler
- *Install dependency* @gorhom/bottom-sheet
Text example | Bottom sheet modal | Demo |
---|---|---|
STEPS:
- Hooks and callbacks
const InfoBottomModal = () => {
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const [isOpen, setIsOpen] = useState(false);
const snapPoints = useMemo(() => ["25%", "50%"], []);
// callbacks
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
setIsOpen(true);
}, []);
return (
- Structure
return (
<GestureHandlerRootView>
<View style={{ backgroundColor: isOpen ? "#00000090" : "white" }}>
<TouchableOpacity onPress={handlePresentModalPress}>
<Text>ejemplo</Text>
</TouchableOpacity>
<BottomSheetModalProvider>
<BottomSheetModal
ref={bottomSheetModalRef}
index={1}
snapPoints={snapPoints}
onDismiss={() => setIsOpen(false)}
>
<View style={styles.contentContainer}>
<Text>ejemplo</Text>
</View>
</BottomSheetModal>
</BottomSheetModalProvider>
</View>
</GestureHandlerRootView>
);
};