react-native-bottom-sheet: [v4] | [v2] Bottomsheet background/backdrop shown, but modal does not show up
Bug
I am using : React-native 0.69.1 Reanimated: 3.3.0 Gorhom bottomsheet: 4.4.7
There is an intermittent issue that I have been facing on Android, ever since we upgraded our library versions to the above mentioned ones. Sometimes (on some devices) the Gorhom bottomsheets dont show up, meaning the fullscreen transparent overlay behind the actual modal is visible but the actual bottomsheet content is not. It does not come up. The app behaves like the bottomsheet would open, renders the backdrop but does not render the bottomsheet content.
Why is this happening? Any ideas? How do I fix this?
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 4.4.7 |
react-native | 0.69.1 |
react-native-reanimated | 3.3.0 |
react-native-gesture-handler | 2.7.1 |
Steps To Reproduce
- On an android device (was testing on Android 11 and above), press any button to open a Gorhom bottomsheet
- Sometimes, the backdrop is rendered, screen goes grey, but the modal does not show up.
- Back button click dismisses the backdrop (like when you dismiss the bottomsheet) as expected
- This is intermittent. Happened 6/10 times on OnePlus devices - 9pro/11R
##Describe what you expected to happen:
- The bottomsheet content should have shown up, not just its backdrop
Reproducible sample code
<BottomSheet
handleComponent={null}
backdropComponent={null}
snapPoints={[290]}
onChange={onChange}>
<View style={styles.container}>
<Pressable onPress={props.onReject} style={styles.crossIcon}>
<SvgCross height={16} width={16} />
</Pressable>
<Image
style={styles.image}
height={76}
width={80}
source={props.image}
/>
<Text style={[styles.title, styles.lineHeight24]}>{props.title}</Text>
</View>
<View style={styles.flexRow}>
<TouchableNativeFeedback onPress={onReject}>
<View style={[styles.reject, styles.buttons]}>
<Text style={styles.rejectText}>{props.rejectText}</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={onAccept}>
<View style={[styles.accept, styles.buttons]}>
<Text style={styles.acceptText}>{props.acceptText}</Text>
</View>
</TouchableNativeFeedback>
</View>
</BottomSheet>
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 2
- Comments: 26 (1 by maintainers)
I was able to fix this issue on my end by simply using only a
string
typesnapPoint
value. Initially, myprops
was taking in a type ofstring | number
reverting this back tostring
seemed to have solved the issue for me.This might not work for everyone, but worked for me. A tip would be to check the props of your
BottomSheet
and use a trial and error method to see if any of the props might be causing some misbehaviours.i had the same problem and it was fixed by adding enableDismissOnClose={true}
I have same issue and fix it by remove
handleComponent={null}
.Thank you for the quick response! 🙏 Unfortunately the issue still comes up in my project with reanimated 3.6. I will open a new ticket.
Edit: Anybody else still facing this issue: I was able to resolve the error using the provided patch from this issue => #1674
Still having the issue:
Tested with:
react-native-reanimated: 3.4.0-nightly-20230720-8a40f9715
Can only replicate this issue with our Samsung A53 test phone. On any other Android phone (and iOS) the component works perfectly.
The issue seems to occur when for some reason animation starts / flickers briefly when component is mounting. And gets resolved when initiating any other bottomSheet in the screen and attempting to open the initial BottomSheet that failed.
I assume this has something to do with the component and animation lifecycle and starts to work after a state reset.
Great! Thanks for the feedback @Nodonisko . I was not aware of the 3.4.0 release, so that helps! We also ran nightly automations on our whole app and also did manual sanities… this issue did not recur after the patch was applied. Maybe you could reconsider the delay!