diff --git a/native/bottom-sheet/bottom-sheet.react.js b/native/bottom-sheet/bottom-sheet.react.js --- a/native/bottom-sheet/bottom-sheet.react.js +++ b/native/bottom-sheet/bottom-sheet.react.js @@ -1,6 +1,6 @@ // @flow -import { BottomSheetModal } from '@gorhom/bottom-sheet'; +import GorhomBottomSheet from '@gorhom/bottom-sheet'; import invariant from 'invariant'; import * as React from 'react'; @@ -16,7 +16,7 @@ function ForwardedBottomSheet( props: Props, - ref: React.Ref<typeof BottomSheetModal>, + ref: React.Ref<typeof GorhomBottomSheet>, ): React.Node { const { children, onClosed } = props; @@ -29,17 +29,27 @@ const snapPoints = React.useMemo(() => [contentHeight], [contentHeight]); + const onChange = React.useCallback( + (index: number) => { + if (index === -1) { + onClosed(); + } + }, + [onClosed], + ); + return ( - <BottomSheetModal + <GorhomBottomSheet ref={ref} backgroundStyle={styles.background} snapPoints={snapPoints} handleComponent={BottomSheetHandle} backdropComponent={BottomSheetBackdrop} - onDismiss={onClosed} + onChange={onChange} + enablePanDownToClose={true} > {children} - </BottomSheetModal> + </GorhomBottomSheet> ); } @@ -51,15 +61,15 @@ const BottomSheet: React.AbstractComponent< Props, - React.ElementRef<typeof BottomSheetModal>, -> = React.forwardRef<Props, React.ElementRef<typeof BottomSheetModal>>( + React.ElementRef<typeof GorhomBottomSheet>, +> = React.forwardRef<Props, React.ElementRef<typeof GorhomBottomSheet>>( ForwardedBottomSheet, ); BottomSheet.displayName = 'BottomSheet'; const MemoizedBottomSheet: typeof BottomSheet = React.memo< Props, - React.ElementRef<typeof BottomSheetModal>, + React.ElementRef<typeof GorhomBottomSheet>, >(BottomSheet); export default MemoizedBottomSheet; diff --git a/native/user-profile/user-profile-bottom-sheet.react.js b/native/user-profile/user-profile-bottom-sheet.react.js --- a/native/user-profile/user-profile-bottom-sheet.react.js +++ b/native/user-profile/user-profile-bottom-sheet.react.js @@ -35,14 +35,6 @@ const bottomSheetRef = React.useRef(); - React.useEffect(() => { - if (!bottomSheetRef.current) { - return; - } - - bottomSheetRef.current.present(); - }, []); - const onClosed = React.useCallback(() => { goBackOnce(); }, [goBackOnce]);