[v4] | Rerendering screen prevents modal to be redisplayed

[nastarfan]

Bug

BottomSheetModal cannot be shown after performing state update on the screen. It is working fine if there is no state update, thus no rendering, but once the screen is rerendered the modal cannot be shown after dismissed/closed.

When there is no state update, the sheet modal is working fine:

But once we add state update, the sheet modal cannot be displayed:

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.2
react-native	0.65.1
react-native-reanimated	2.2.2
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Use BottomSheetModal
2. Add onChange callback
3. Update state within the callback
4. BottomSheetModal can no longer appear

Describe what you expected to happen:

1. Even if we perform state update on the screen, we can still show the modal

Reproducible sample code

I have created a snack for the code to demonstrate the bug, but somehow it won't run in expo, I am not very familiar with it. If line 39 and 42 (update state code) are commented out, everything works fine.
https://snack.expo.dev/@nastarfan/bottom-sheet-v4-reproducible-issue-template

...
const handlePresentPress = useCallback(() => {
    bottomSheetRef.current?.present();
  }, []);

const handleSheetChanges = useCallback((index: number) => {
    if (index === -1) {
      console.log('closing');
      setBottomSheetState('closed');
    } else {
      console.log('opening');
      setBottomSheetState('opened');
    }
  }, []);

...

 <BottomSheetModal
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}>
        <View style={styles.sheetContainer}>
          <Text>Hello</Text>
          <Text>
            Ullamco veniam minim sint aliquip fugiat sunt occaecat consectetur
            qui commodo.
          </Text>
        </View>
      </BottomSheetModal>
...

This issue only presents for BottomSheetModal. BottomSheet works fine

[sirajtahrawashmen]

+1

[gorhom]

working on fixing this

[gorhom]

this should be fixed with v4.1.3

[nastarfan]

Thanks a lot @gorhom , you rock man

[He1nr1chK]

Still happens in v4.1.5

[dlombardi]

This is still occuring

[portiz-daitan]

This is still occurring in v4.1.5

[portiz-daitan]

I was able to fix this issue with the following code:

const selectOption = (option: PickerOption) => {
    selectedOptionRef.current = option;
    close();
  };

const handleChange = useCallback(
    (index: number) => {
      if (index === -1 && selectedOptionRef.current) {
        onChange(selectedOptionRef.current);

        selectedOptionRef.current = undefined;
      }
    },
    [onChange]
  );

Basically, I stored in a ref the value that needs to be updated and, then, delayed the onChange callback until index becomes -1 (which means modal was closed)

[Kjagd]

I have something that sounds like the same problem. I've found that it's seems to be the opacity which is set to 0 from the fix here: #690 (comment) (I can still press on element and fire listeners for that)

[arjendevos]

Seems like we're still having this problem on

    "@gorhom/bottom-sheet": "^4.4.0",

[arjendevos]

But only on iOS

[arjendevos]

The strange thing is, if we add a console.log to handleSheetChanges it opens but without animation 🤯

  const handleSheetChanges = React.useCallback((index: number) => {
    console.log("....");
  }, []);