[v4] | [v2] Bottomsheet background/backdrop shown, but modal does not show up

[gnair03]

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

1. On an android device (was testing on Android 11 and above), press any button to open a Gorhom bottomsheet
2. Sometimes, the backdrop is rendered, screen goes grey, but the modal does not show up.
3. Back button click dismisses the backdrop (like when you dismiss the bottomsheet) as expected
4. This is intermittent. Happened 6/10 times on OnePlus devices - 9pro/11R

##Describe what you expected to happen:

1. 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>

[gnair03]

@gorhom : Pls help me with this issue.

[nghiatv]

I have same issue and fix it by remove handleComponent={null}.

[gnair03]

@nghiatv - Thanks for the response. But handleComponent={null} does not solve my problem. Any other insights on this?
@gorhom - Pls let me know the resolution here ?

[longnc100500]

i had the same problem and it was fixed by adding enableDismissOnClose={true}

[gnair03]

@longnc100500 : But the default value of this prop itself is true. How would this fix?

[gnair03]

@gorhom - Is gorhom bottomsheet compatible with reanimated 3.x versions? pls respond.

[gorhom]

check #1125

[gnair03]

@gorhom Thanks for the response. Can you pls also respond to my original query? Bottomsheet also does not open up on calling expand(). There are such intermittent issues.

[jdbarrera]

I am getting this same issue on Android with the following:
React-native 0.71.8
Reanimated: 3.3.0
Gorhom bottomsheet: 5.0.0-alpha.2 and 4.4.5

It happens about 8/10 times on a Samsung A51 Device.

[gnair03]

software-mansion/react-native-reanimated#4419
I have tried this patch on the oneplus device and it seems to work. You guys can try this too and check at your end.
@jdbarrera

[Nodonisko]

@gnair03 I don't see any patch in issue you linked, can you share your patch?

[gnair03]

@Nodonisko : Pls use this commit as a patch:
software-mansion/react-native-reanimated#4579

[Nodonisko]

Used latest nightly build of 3.4.0 of reanimated which should include suggested patch and also added some delay after app start before showing bottom sheet. Not sure which one helped but it seems to work now. I am also using v5 alpha of BottomSheet.

[gnair03]

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!

[LeeviKopakkala]

Used latest nightly build of 3.4.0 of reanimated which should include suggested patch and also added some delay after app start before showing bottom sheet. Not sure which one helped but it seems to work now. I am also using v5 alpha of BottomSheet.

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.

[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.

[LahmerMohammed]

I have same issue and fix it by remove handleComponent={null}.

Thanks @nghiatv, it also worked for me, also I added
handleStyle={{ display: 'none', }}

[LucasTrombim]

Same issue here. Cant resolve

[aubert-creation]

Used latest nightly build of 3.4.0 of reanimated which should include suggested patch and also added some delay after app start before showing bottom sheet. Not sure which one helped but it seems to work now. I am also using v5 alpha of BottomSheet.

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.

Same issue on the samsung remotetestlab.
Can you check if this samsung option is disabled: Remove animations ?

I can reproduce only when a user disable animations on the phone.

[gldkru]

@aubert-creation do you know how to fix it?

[fiizzy]

Any fix yet? this is incredibly frustrating.

[fiizzy]

I was able to fix this issue on my end by simply using only a string type snapPoint value. Initially, my props was taking in a type of string | number reverting this back to string 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.

[FabianTrain]

@gnair03 have you ever solved this issue?

[gnair03]

Hi @FabianTrain -
I had resolved this issue as mentioned here - #1405 (comment)
Also, with reanimated 3.4.0, we have not encountered this issue later on.

[FabianTrain]

Hi @FabianTrain - I had resolved this issue as mentioned here - #1405 (comment) Also, with reanimated 3.4.0, we have not encountered this issue later on.

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

[coldSeattle]

so any solution is here @gorhom ? i use "@gorhom/bottom-sheet": "4.6.0", and "react-native-reanimated": "3.2.0",

[ErMapsh]

I have same issue and fix it by remove handleComponent={null}.

thanks a lot man,