[v4] | [v2] Bottom Sheet flickering after fast click

[brunomourabastos]

Bug

bug.-.bottom.sheet.mov

When i'm using the bottom sheet, if the bottomsheet is opened and i click fast to close and reopen, the screen is flickering.
After the flicker, if i click again, the bottom sheet opens normally.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.7
react-native	0.72.3
react-native-reanimated	3.4.1
react-native-gesture-handler	2.7.1

Steps To Reproduce

1. With the bottom sheet opened
2. Click to close the bottom sheet
3. Click fast to open the same bottom sheet again

Describe what you expected to happen:

1. Was expected the bottom sheet to open
2. The bottom sheet flickers

Reproducible sample code

const challengeBottomSheet = ({ parentRef }) => {
const { template } = useSelector(({ global, user }) => ({ template: global.template, user: user.user }));

const sheetRef = useRef(null);

const [challengeData, setchallengeData] = useState({});
const [currIndex, setCurrIndex] = useState(-1);
const [isVisible, setIsVisible] = useState(false);
const [enablePanDownToClose, setEnablePanDownToClose] = useState(false);

const snapPoints = useMemo(() => ['100%'], []);

const styles = useMemo(() => styles_template(template), [template]);

const handleCloseModal = useCallback(() => {
  setIsVisible(false);
  setEnablePanDownToClose(false);
  setTimeout(() => setEnablePanDownToClose(true), 1000);
}, [sheetRef.current]);

const handleSheetChange = useCallback((index) => {
  setCurrIndex(index);
  if (index === -1) {
    setIsVisible(false);
    setEnablePanDownToClose(false);
  }
}, [sheetRef.current]);

useImperativeHandle(parentRef, () => ({
  openBottomSheet(data) {
    setchallengeData(data);
    setIsVisible(true);
    setEnablePanDownToClose(false);
  },
}), [sheetRef.current]);

useEffect(() => {
  if (isVisible && currIndex === -1) {
    sheetRef.current?.expand();
  } else {
    sheetRef.current?.close();
  }
}, [isVisible]);

return (
  <>
    {isVisible && <View style={styles.vwBackground} />}
    <BottomSheet
      ref={sheetRef}
      index={currIndex}
      snapPoints={snapPoints}
      backgroundComponent={null}
      handleComponent={null}
      onChange={handleSheetChange}
      keyboardBehavior='interactive'
      enablePanDownToClose={enablePanDownToClose}>
      <BottomSheetScrollView contentContainerStyle={styles.flexGrowOne}>
        <Pressable style={styles.btnBackground} onPress={handleCloseModal} />
        <View style={styles.modalContainer}>
          <View style={styles.vwIndicationBottomSheet} />
          <View style={styles.vwContent}>
            <View style={styles.vwContentHeaderInfos}>
              <View style={styles.vwContentInfos}>
                <Text style={styles.txtName}>{challengeData.Name}</Text>
                <Text style={styles.txtShortDescription}>{challengeData.ShortDescription__c}</Text>
              </View>
            </View>
            <View style={styles.vwDescription}>
              <Text style={styles.txtDescription}>{challengeData.Description}</Text>
            </View>
            <View style={styles.vwTotalPoints}>
              <Text style={styles.txtTotalPoints}>{`Complete o desafio e ganhe`}</Text>
              <AvaPoints points={challengeData.points} avaText />
            </View>
          </View>
        </View>
      </BottomSheetScrollView>
    </BottomSheet>
  </>
);
};