ActionSheet automatically closes on setState

[ajimae]

Hi,

Thanks for this wonderful library.

ActionSheets automatically closes whenever I have a component with a pressable that sets the state.

Take the below code example.

import ActionSheet from "react-native-actions-sheet";
import DateTimePicker from '@react-native-community/datetimepicker';

function App() {
  const actionSheetRef = useRef<ActionSheetRef>(null);
  const [date, setDate] = useState<Date>(new Date())
 
  return (
    <ActionSheet ref={actionSheetRef}>
      <DatePicker
        value={date}
        mode="datetime"
        display="inline"
        onChange={(e, selectedDate) => setDate(selectedDate)}
        minDate={new Date()}
      />
    </ActionSheet>
  )
}

Once a date is selected (onPress) the onChange callback is invoked and then setDate() is called once the state is set, the ActionSheet closes.

I think this is bug, we should have a way to make the ActionSheet persist during component state refresh.

Note:
If the onChange is commented off then everything works just fine.

...
    <ActionSheet ref={actionSheetRef}>
      <DatePicker
        value={date}
        mode="datetime"
        display="inline"
        // onChange={(e, selectedDate) => setDate(selectedDate)}
        minDate={new Date()}
      />
    </ActionSheet>
...

Thanks

[alieldab3]

Same Problem here

[zhangze-github]

I have same problem

[eisodev]

Same problem.

have an controlled accordion inside a component i use which uses a setState to toggle expanded or not. When this is set on Android it closes the sheet but not iOS.

Also, which I think is related even without the use of setStates, is when I click an unoccupied space in any sheet I use it triggers close if I didn't scroll the sheet before or in any other way triggered gestures movement. This only happens on Android on 0.9.2 (havn't tested other 0.9.x) when isModal={false}. We use isModal false so that our snackbar will be shown on top of the sheet, because he have API operations that gets triggered from the sheet and we want to be able to notify users with a snackbar.

1. Open sheet on Android with gestureEnabled={true} AND isModal={false}, isModal={true} does not trigger this behavior.
2. Click directly somewhere without moving the sheet, the sheet closes.
3. Open sheet again, use your finger and hold the sheet and move up/down a few millimeters just to trigger gestures.
4. Click on the same areas, the sheet now stays open as expected.

This problem can be worked around with setting isModal={true}, but then gestures stops working even with gestureEnabled={true}. These two combined probably makes us need to switch to the other bottom sheet package. Cause this makes the sheet unusable for Android.