File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, {useCallback, useRef, useMemo} from 'react';
import {View, StyleSheet} from 'react-native';
import BottomSheet, {BottomSheetBackdrop} from '@gorhom/bottom-sheet';
export default function BottomDrop({
onChange,
children,
}) {
// ref
const bottomSheetRef = useRef(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%', '75%'], []);
// renders
const renderBackdrop = useCallback(
props => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={1}
appearsOnIndex={2}
/>
),
[],
);
return (
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
backdropComponent={renderBackdrop}
onChange={onChange}>
<View style={styles.contentContainer}>{children}</View>
</BottomSheet>
);
}
const styles = StyleSheet.create({
contentContainer: {
padding: 16,
alignItems: 'center',
},
});