question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Screen Recording 2021-12-10 at 11 54 32

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:12

github_iconTop GitHub Comments

1reaction
elmcappcommented, Mar 14, 2022

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

1reaction
FrancoTanzarellaEviivocommented, Feb 17, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Set state of BottomSheetDialogFragment to expanded
Bottom sheets are set to STATE_COLLAPSED at first. Call BottomSheetBehavior#setState(STATE_EXPANDED) if you want to expand it. Note that you ...
Read more >
BottomSheetBehavior - Android Developers
Sets whether the height of the expanded sheet is determined by the height of its contents, or if it is expanded in two...
Read more >
Sheets: bottom - Material Design
At a smaller size, expanding bottom sheets enable multi-tasking and other uses of screen space.
Read more >
BottomSheetBehavior setState method doesn't work before ...
1. Open the sample app · 2. Click in the "Show view" button. The BottomSheet won't expand and it can't be dragged from...
Read more >
Full Screen Bottom Sheet - Better Programming
A bottom sheet is a good way of representing any kind of user-related info or to place options to get rapid actions from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found