diff --git a/src/BottomSheet.tsx b/src/BottomSheet.tsx index 5cf83a3..4325aa9 100644 --- a/src/BottomSheet.tsx +++ b/src/BottomSheet.tsx @@ -11,7 +11,6 @@ import { } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import RNBottomSheet, { - WINDOW_HEIGHT, BottomSheetView, BottomSheetScrollView, BottomSheetFlatList, @@ -36,6 +35,11 @@ export type BottomSheetProps = Omit & { */ id: SheetID; + /** + * Content of the `BottomSheet`. + */ + children: React.ReactNode; + /** * When set to `true`, the `BottomSheet` is shown in a `ReactNative.Modal`. * @default false @@ -43,17 +47,17 @@ export type BottomSheetProps = Omit & { useModal?: boolean; /** - * Content of the `BottomSheet`. + * Component of the custom `Modal`. */ - children: React.ReactNode; + modalComponent?: React.ComponentType; /** - * Triggered when `ReactNative.Modal` is shown. + * Triggered when `Modal` is shown. */ onModalShow?: (event: NativeSyntheticEvent) => void; /** - * Triggered when `ReactNative.Modal` is closing. + * Triggered when `Modal` is closing. */ onModalRequestClose?: (event: NativeSyntheticEvent) => void; @@ -63,7 +67,7 @@ export type BottomSheetProps = Omit & { supportedOrientations?: ModalProps['supportedOrientations']; /** - * Component of the `ReactNative.Modal` container. + * Component of the `Modal` container. */ modalContainerComponent?: React.ComponentType; @@ -74,11 +78,6 @@ export type BottomSheetProps = Omit & { hardwareBackPressToClose?: boolean; }; -const defaultSnapPoints: readonly number[] = [ - WINDOW_HEIGHT / 2, - WINDOW_HEIGHT - 200, -]; - interface BottomSheetFC extends React.MemoExoticComponent< React.ForwardRefExoticComponent @@ -100,20 +99,23 @@ interface BottomSheetFC TextInput: typeof BottomSheetTextInput; } +const SNAP_POINTS: readonly string[] = ['50%', '80%']; + const BottomSheetComponent = React.forwardRef< BottomSheetInstance, BottomSheetProps >((props, ref) => { const { id: sheetId, - useModal = false, children, - snapPoints = defaultSnapPoints, + useModal = false, + snapPoints = SNAP_POINTS, onClose, onModalShow, onModalRequestClose, supportedOrientations, hardwareBackPressToClose = true, + modalComponent: ModalComponent = Modal, modalContainerComponent: ModalContainerComponent = React.Fragment, ...other } = props; @@ -139,7 +141,7 @@ const BottomSheetComponent = React.forwardRef< PrivateSheetManager.registerInstance(sheetId, currentCtx, getInstance()); }, }); - const hardwareBackPressEvent = React.useRef(); + const hardwareBackPressSubscription = React.useRef(); const getInstance = React.useCallback( (): BottomSheetInstance => ({ @@ -201,7 +203,7 @@ const BottomSheetComponent = React.forwardRef< EventManager.closeSheet(sheetId, valueRef.current, currentCtx); setVisible(false); valueRef.current = undefined; - hardwareBackPressEvent.current?.remove(); + hardwareBackPressSubscription.current?.remove(); onClose?.(); }, [sheetId, currentCtx, setVisible, onClose]); @@ -225,7 +227,7 @@ const BottomSheetComponent = React.forwardRef< React.useEffect(() => { if (!useModal && Platform.OS === 'android' && hardwareBackPressToClose) { - hardwareBackPressEvent.current = BackHandler.addEventListener( + hardwareBackPressSubscription.current = BackHandler.addEventListener( 'hardwareBackPress', () => { const bottomSheet = bottomSheetRef.current; @@ -239,27 +241,25 @@ const BottomSheetComponent = React.forwardRef< ); } - return () => hardwareBackPressEvent.current?.remove(); + return () => hardwareBackPressSubscription.current?.remove(); }, [useModal, hardwareBackPressToClose]); React.useImperativeHandle(ref, getInstance, [getInstance]); const sheet = ( - - - {children} - - + + {children} + ); return visible ? ( useModal ? ( - {sheet} - + ) : (