[v4] Bottom sheet is not dismissed if dismiss is called soon after present

[augustebr]

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.

Screen.Recording.2024-09-17.at.11.02.46.mov

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

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

Describe what you expected to happen:

1. 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',
  },
});

[mohamedziadjabbad]

same problem here

[gorhom]

this should be fixed with the next alpha releases of v5

[gorhom]

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-10-02.at.21.50.11.mp4

[yuliahey]

@gorhom when are you planning to release alpha?

[borysenko-oleksandr]

This problem seems to be exacerbated when you are in Reduce Motion mode.
@gorhom Could you please be more specific about which version this will be fixed in, as it affects us?
I can still reproduce it in v5.0.6

[efstathiosntonas]

@borysenko-oleksandr based on the linked commit, this is included in 5.0.6.

I believe this might introduced another bug, when the bottom sheet modal is closed with .close() the bottom sheet re-shows it self.