augustebr commented 2 months ago

Bug

The bottom-sheet is not dismissed when dismiss() is called soon after present(). This happens when these two are called in quick succession. The code in the example demonstrates the issue and here's also a short video of that code in action.

https://github.com/user-attachments/assets/18991be9-47e5-4278-a900-2603d82605a9

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.4
react-native	0.74.5
react-native-reanimated	3.10.1
react-native-gesture-handler	2.16.2

Steps To Reproduce

Install app: npm install
Run the app: npx expo start
Press twice on the button in quick succession
Observe the bottom sheet remain open, when it should be dismissed

Describe what you expected to happen:

After double press, the sheet should be dismissed.

Reproducible sample code

import React, { useMemo, useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = React.useRef<BottomSheetModal>(null);

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

  useEffect(() => {
    if (isOpen) {
      ref.current?.present();
    } else {
      ref.current?.dismiss();
    }
  }, [isOpen]);

  const toggleSheet = () => {
    setIsOpen(prevState => !prevState);
  };

  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheetModalProvider>
        <View style={styles.container}>
          <Button 
            title={isOpen ? "Close Sheet" : "Open Sheet"} 
            onPress={toggleSheet} 
          />
          <BottomSheetModal
            ref={ref}
            index={1}
            snapPoints={snapPoints}
            enablePanDownToClose={true}
            onDismiss={() => setIsOpen(false)}
          >
            <View style={styles.contentContainer}>
              <Text>Bottom Sheet Modal Content</Text>
            </View>
          </BottomSheetModal>
        </View>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'black',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});