[v4] Bottom Sheet gets expanded when parent view display style changes on Android

[wilkuintheair]

Bug

Bottom Sheet with index={-1} changes the index to 0 when parent view gets hidden and then shows up again. Also for couple of milliseconds it covers the full screen. Its state should remain the same as it was before hiding it.

const App = () => {
  const [display, setDisplay] = useState('flex');
  const snapPoints = useMemo(() => [200], []);
  const handleHideAndShowPress = useCallback(() => {
    setDisplay('none');
    setTimeout(() => setDisplay('flex'), 200);
  }, []);

  return (
    <View style={[styles.container, {display}]}>
      <Button onPress={handleHideAndShowPress} title="Hide and show" />
      <BottomSheet
        index={-1}
        snapPoints={snapPoints}>
        <List type="FlatList" />
      </BottomSheet>
    </View>
  );
};

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.5
react-native	0.66.1
react-native-reanimated	2.2.4
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Put a Bottom Sheet inside a view with style={{display: 'flex'}}
2. Make the Bottom Sheet to have index={-1}
3. Hide the parent view by setting the display to none
4. Show it back by setting the display to flex

Describe what you expected to happen:

1. The bottom sheet should remain in the closed state (index should be -1)
2. If we opened the Bottom Sheet before hiding it - it should be shown after showing it back.

Reproducible sample code

https://snack.expo.dev/@wilku/894059

[barmola]

Hi, I am also facing the same issue. Whenever the state is changing. BottomSheet is expanding itself. Any Solution yet?

[barmola]

Steps To Reproduce My Issue

1. When Bottom sheet appears try to change any state from there for eg. call a function like this
   changeStateAndCloseSheet(){ setNum(Math.random()) bottomSheetRef.current.dismiss() }
2. Bottom sheet will close and will reappear again.

[wilkuintheair]

Hi, I am also facing the same issue. Whenever the state is changing. BottomSheet is expanding itself. Any Solution yet?

@barmola I solved my case by using BottomSheetModal instead of a regular BottomSheet. And the BottomSheetModalProvider for this should be placed somewhere above in the view hierarchy just not to be re-rendered during the animation. You can try this approach as well, I think it can work for you.

[barmola]

Hi, I am also facing the same issue. Whenever the state is changing. BottomSheet is expanding itself. Any Solution yet?

@barmola I solved my case by using BottomSheetModal instead of a regular BottomSheet. And the BottomSheetModalProvider for this should be placed somewhere above in the view hierarchy just not to be re-rendered during the animation. You can try this approach as well, I think it can work for you.

@wilkuintheair Fact is that i am already using BottomSheetModal and Placed BottomSheetModalProvider in my App.tsx because BottomSheet didn't worked out for me

[github-actions[bot]]

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.

[FadiAboMsalam]

Same issue occurs with me

[sinxwal]

same here(

[FrancoTanzarellaEviivo]

Same. I navigate from bottom sheet to a new screen and then dismiss it using a ref to bottom sheet I pass to the new screen. When state updates in the new screen, bottom sheet show on top. Also this is only happening for me on Android, iOS seems to not have this problem. I noticed this after updating react-native-gesture-handler to v2.2.0

EDIT: Updating to 4.1.5 fixed my issue

[elmcapp]

When rotating the device from portrait to landscape then back to portrait I get an issue where the bottom sheet show into view finish animating

[github-actions[bot]]

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[bot]]

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

[victorglezcardoso]

Issue continues here!