[v4] Bottom Sheet gets expanded when parent view display style changes on Android
See original GitHub issueBug
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
- Put a Bottom Sheet inside a view with
style={{display: 'flex'}}
- Make the Bottom Sheet to have
index={-1}
- Hide the parent view by setting the display to
none
- Show it back by setting the display to
flex
Describe what you expected to happen:
- The bottom sheet should remain in the closed state (index should be -1)
- If we opened the Bottom Sheet before hiding it - it should be shown after showing it back.
Reproducible sample code
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:12
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
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