import { useCallback } from 'react';
import { useRef } from 'react';
import { BackHandler } from 'react-native';
/**
* hook that dismisses the bottom sheet on the hardware back button press if it is visible
* @param bottomSheetRef ref to the bottom sheet which is going to be closed/dismissed on the back press
*/
const useBottomSheetBackHandler = (bottomSheetRef, indexToVisible = 0) => {
const backHandlerSubscriptionRef = useRef(null);
const handleSheetPositionChange = useCallback(
(index) => {
const isBottomSheetVisible = index >= indexToVisible;
if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
// setup the back handler if the bottom sheet is right in front of the user
backHandlerSubscriptionRef.current = BackHandler.addEventListener(
'hardwareBackPress',
() => {
bottomSheetRef.current?.dismiss?.() ||
bottomSheetRef.current?.collapse?.(indexToVisible - 1);
return true;
},
);
} else if (!isBottomSheetVisible) {
backHandlerSubscriptionRef.current?.remove();
backHandlerSubscriptionRef.current = null;
}
},
[bottomSheetRef, backHandlerSubscriptionRef],
);
return { handleSheetPositionChange };
};
export default useBottomSheetBackHandler;
useBottomSheetBackHandler()
Hook that dismisses the bottom sheet on the hardware back button press if it is visible