[v4] | [v2] Index log -1 on small snapPoints from portrait to landscape

[emendo-web]

Bug

When you change orientation of device (portrait to landscape ONLY) the bug will be appear.
On small snapPoints we can see log with -1 as value.
If you change orientation with a big snapPoints. index will be not pass to -1

Environment info

Library	Version
@gorhom/bottom-sheet	^4.5.1
expo	~49.0.15
expo-status-bar	~1.6.0
react	18.2.0
react-native	0.72.6
react-native-reanimated	~3.3.0
react-native-gesture-handler"	~2.12.0

Steps To Reproduce

• Clone the repository below on Reproducible sample code

1. Install expo app
2. Clone the repository below
3. Install dependencies
4. npm run android -- -c

Describe what you expected to happen:
On small snapPoints and when the orientation changes, the index should not pass to -1

1. Start the app in portrait
2. Set the snapPoints at index 0
3. Change orientation to landscape. You will see in log "handleSheetChanges -1"
4. Come back to portrait. Log work correctly.
5. If you trying to repeat the same step but with index 1. The bug will be not appear

Reproducible sample code

Reproducible repo: https://github.com/emendo-web/bs-orientation.git

[joeporpeglia]

This is causing the active bottom sheet to close when users change device orientation on iOS. In my case, I'm passing enabledDynamicSizing with a BottomSheetScrollView and no snapPoints.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[cyrilmarceau]

Same problem

[hraschan]

@joeporpeglia Did you find a workaround?

Getting the following logs:

LOG handleSheetChanges 0
LOG handleSheetChanges -1
LOG handleSheetChanges 0

But the modal still disappears when changing to landscape mode

[joeporpeglia]

No unfortunately I haven't been able to fix

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[eithe]

Also seeing the same.

I had to put in place a quite hackish workaround where I wait 100ms before doing my onDrop-logic (which is cancelled if there is a another sheet change before 100ms has passed).

import { debounce } from 'lodash';
...
  const debouncedOnDrop = useRef(debounce(onDrop, 100)); // https://github.com/gorhom/react-native-bottom-sheet/issues/1589
  const snapPointsCached = useMemo(() => snapPoints, [snapPoints]);

  const onChange = useCallback(
    (index: number) => {
      if (index === -1) {
        debouncedOnDrop.current();
      } else {
        if (debouncedOnDrop?.current?.cancel) {
          debouncedOnDrop.current.cancel();
        }
        onSheetChanged(index);
      }
    },
    [onSheetChanged],
  );