[Android][v4] Bottom Sheet randomly appearing

[robrechtme]

Describe the bug
On Android, the bottom sheet from the Attachment picker is sometimes appearing when opening/closing the keyboard or changing between keyboards. This issue occurred since the v4 upgrade.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo): 4.1.0
• react-native or expo version: RN 0.67.2
• Device/Emulator (android/ios) and OS version: Multiple Android devices

To Reproduce
Steps to reproduce the behavior:

1. Wrapp app with OverlayProvider
2. Open/Close the keyboard on multiple types of input fields
3. The issue does not appear every time

Expected behavior
No bottom sheet is shown

Additional context

• We do have android:windowSoftInputMode="adjustResize" in the manifest, maybe this causes the issue.

Screenshots

gz#20206

[mattlennon3]

We are seeing this too, android only, fresh integration of Stream components.

Details
"stream-chat-react-native": "4.3.0",
"react-native": "0.66.4",

Devices:
Pixel 6, Samsung S10.

You can get rid of the drawer by pulling it up and then down, it will then disappear and work as expected for the rest of the app session.

Additional context
We also have android:windowSoftInputMode="adjustResize" set, like @robrechtme has.

[GregAtFramework]

We've been experiencing this too on various Android devices. It's frustratingly intermittent. But when it does occur, it obscures our app's primary navigation (tabs along the bottom of the screen).

"expo": "44.0.0",
"stream-chat-expo": "4.3.1",
"react-native": "0.64.3",

[ertucaglar]

We often see the same problem on the iOS side.
We also migrated from v3 to v4

"stream-chat": "6.5.0",
"stream-chat-react-native": "4.3.1",
"react": "16.13.1",
"react-native": "0.64.2",

[denizmersinlioglu]

@vishalnarkhede this problem happens in iOS too, FYI ✋

[mattlennon3]

@denizmersinlioglu can you provide some basic info about your ios build? 🙄

[vishalnarkhede]

Is it possible for anyone to share a minimal example app with us, where we can reproduce these issue?

[mattlennon3]

Hi @vishalnarkhede, I don't have time to make an example app for you. But I am happy to share my screen and you can take a look at some of the code behind our app if you like?

[vanGalilea]

@mattlennon3 are you still facing this issue?

[mattlennon3]

Hi @vanGalilea, yeah we're still seeing this in our dev & prod apps.
We've not been able to pin down the exact trigger in our day to day use. I most often see it on first launch, but not always!

[santhoshvai]

Hey @GregAtFramework, do you have android:windowSoftInputMode="adjustResize" in the manifest too?

[GregAtFramework]

@santhoshvai Yes we do. Though I'm fairly confident it's not something we've set explicitly ourselves - I believe it's part of Expo's default configuration.

[santhoshvai]

@GregAtFramework Thank you. As you say this is the default input mode in Expo and also in the default RN template.

I believe this is related to the v4 version of the bottom sheet library:
gorhom/react-native-bottom-sheet#761

If you would downgrade to 3.6.6 it might fix the issue. But I haven't been able to verify this as I couldn't reproduce this issue in the android devices we have here.

[vanGalilea]

I could not reproduce this. Can someone please share a repo where this issue occurs in?

[mattlennon3]

Hi @vanGalilea. I attempted to make a repo to replicate this yesterday. Unfortunately I couldn't reproduce the same bug.
We can now pretty reliably replicate this problem by jumping focus from one input to another. I'll attach a video.

This is a basic screen (not within a modal as it might appear) and we are using react-hook-form, which I don't think is part of the problem.
The logic of this page works kind of like this:
"show the title & description inputs and a selection of other properties to set below"
"if one of the below properties is selected, hide the rest of the screen and only show the input for that property, focus the input"
We do see this drawer pop up on launch of the app sometimes. So perhaps there is an input being focused for a split second (e.g login/signup page).
Not sure how helpful that is, but it's all we have on our end!

Screen_Recording_20220517-115308_.Dev.Mana.mp4

[rajkapoordev]

Hello @robrechtme @mattlennon3 @santhoshvai @vishalnarkhede

I have fixed this issue but it is not a proper solution in file "AttachmentPicker".
I have added conditions before BottomSheet to render.
Also added keyExtractor = item.asset.uri+ Date.now() because it throwing same key warning.

{(Platform.OS === 'ios' || selectedPicker === 'images') &&  (
    <BottomSheet
    key={'hello'}
    containerHeight={fullScreenHeight}
    enablePanDownToClose={true}
    handleComponent={
      /**
       * using `null` here instead of `style={{ opacity: photoError ? 0 : 1 }}`
       * as opacity is not an allowed style
       */
      photoError ? null : AttachmentPickerBottomSheetHandle
    }
    handleHeight={handleHeight}
    index={-1}
    onChange={(index: number) => setCurrentIndex(index)}
    ref={ref}
    snapPoints={snapPoints}
  >
    <BottomSheetFlatList
      contentContainerStyle={[
        styles.container,
        { backgroundColor: white },
        bottomSheetContentContainer,
        { opacity: photoError ? 0 : 1 },
      ]}
      data={selectedPhotos}
   keyExtractor={(item) => {
                   return  Platform.OS === 'ios' ?  item.asset.uri : item.asset.uri + Date.now()
                }}
      numColumns={numberOfAttachmentPickerImageColumns ?? 3}
      onEndReached={getMorePhotos}
      renderItem={renderImage}
    />
  </BottomSheet>
)}

[vishalnarkhede]

@mattlennon3 @robrechtme We have published a beta version v4.5.1-beta.1 where this issue should be fixed. Could you please upgrade/test and confirm?

[mattlennon3]

Hey @vishalnarkhede, I had time to give this a go on Monday. It looks like it's fixed to me!
I saw the drawer for a split second but then it disappeared.

Are there any other changes to the beta version? We're keen to get a release out this week and I'll update to this version if so.

Thanks!

[GregAtFramework]

We've upgraded to stream-chat-expo 4.7.2 and unfortunately both myself and a teammate have seen the bottom sheet issue reoccur on Android. (Sorry, I'm afraid I don't have more details on the reproduction steps.)

[mattlennon3]

Yeah we've been on 4.3.1 since my last comment. The drawer isn't totally fixed but it's usable now.
I've just seen how many releases there have been since then! I'll have to update and report back.

[santhoshvai]

I have reopened this, as it seems to be not fully fixed but still happening according to the replies above

[vanGalilea]

@GregAtFramework and @mattlennon3 Thanks for reaching out!
This one is super difficult to pinpoint. We would like to ask you to share a minimalistic repo where the problem is reproduced.
The fastest way to achieve this is with the following command to create a new RN project with Stream chat in it:

npx react-native init MyApp --template stream-chat-react-native-template

Please then share a Github repo with us, where we can explore the issue ourselves.

[harry-isaac]

I'm also seeing this on iOS with version 4.7.3

[mattlennon3]

Hi @vanGalilea. As I mentioned here, I am happy to screen share and demo the issue.

I really can't get the time during work hours to setup a new repo, add stream then also try to recreate the general structure of our app 😞.

It might be a good stream dev exercise to do the first time setup 😉. Get a view on the clients experience!
Thanks

[harry-isaac]

@vanGalilea I went deep on this one today because in our app this sheet was appearing every single time you put the app in the background. It took a few hours but I was able to pin it down! It's because of this issue noted in the BottomSheet package: gorhom/react-native-bottom-sheet#919. If you update to a newer version after this PR was merged it's fixed.

For now I used patch-package cc @mattlennon3

[santhoshvai]

Hey @isaac-computer, many thanks for investigating this and finding the possible PR that fixes this. The version in which the fix has been released was v4.1.6 of the bottom sheet package.

@mattlennon3 Could you please update the bottom sheet package to v4.1.6 or later and update us if you can still get the issue. We are not able to reproduce this on our end due to it being a race condition.

[santhoshvai]

I am closing this issue, as we believe that this should be fixed in version 4.1.6 or later of the react-native-bottom-sheet library.

[GregAtFramework]

@santhoshvai Currently stream-chat-react-native-core depends on "@gorhom/bottom-sheet": 4.1.5. Could you update that dependency please?

[santhoshvai]

@GregAtFramework Thanks a lot. Good point. I will do in the upcoming release

[GregAtFramework]

We upgraded to 4.10.0 (and bottom-sheet 4.4.2) and unfortunately my colleague and I are still seeing the Android issue. (Perhaps unsurprisingly, as the bottom-sheet issue specifically references iOS).

I would love to try to create a minimalistic repo, but I don't know when I will find the time to try to put that together.

[codingwaysarg]

Still happening on:

"expo": "46.0.6",
"stream-chat-expo": "4.14.0",
"react-native": "0.69.4",
"@gorhom/bottom-sheet": "4.4.3"

I've tried many things without success. Any thoughts?

Thanks.

[GregAtFramework]

I've given this fix a go: #1283 (comment) - a patch-package change to AttachmentPicker.tsx.

Only suitable if you're not using attachments, or not using the default UI for attachments.

It's early days, but we haven't seen the issue since doing that.

UPDATE: Another couple of weeks have passed, and this workaround has resolved the issue for us.

[santhoshvai]

Hi @GregAtFramework @codingwaysarg @mattlennon3 @isaac-computer @denizmersinlioglu @robrechtme

We have published a new beta version v5.4.2-beta.2 that aims to fix this issue. Could you please upgrade to this version and remove the patch package to AttachmentPicker.tsx (if any) and see if it's fixed?

I believe that this happens due to a race condition in the bottom sheet library. I was able to create a reproducible scenario and fix it there. But we want your feedback to confirm if this bug has been squashed out finally. It would be immensely helpful if you could test and report to us.

[neopit]

On our side, we have tested this beta version with the fix and it fixes the bug. We are not seeing this white bottom sheet.
Maybe you are waiting for more feedback for other developers but do you have an idea when this fix can be available in the main branch?

[santhoshvai]

Hey @neopit, many thanks for testing it and the feedback; very happy to hear that this seems to fix it. It should be available in the main branch and released in about 5 days if there is no negative feedback in the meantime.

[neopit]

@santhoshvai Is the fix merged?

[mrwatts88]

Still seeing the the issue in v5.4.2-beta.2

[neopit]

We've bumped our app with the 5.4.1, tested, and run our E2E. We did not see the bug anymore.

But seeing this message above from, mrwatts88, .... hmmmm, I am stressed now :-)

[sraut1]

This isue still exist on 5.34.0 @santhoshvai

[sraut1]

@santhoshvai @vanGalilea This issue occurs on intermittently on keyboard hide and also regularly when app is switched from portrait to landscape. here is the video

To Reproduce
Steps to reproduce the behavior:

Play a YouTube video using the YouTubePlayer component (react-native-youtube-iframe).
Switch the video to fullscreen mode.
Rotate the device to landscape orientation while in fullscreen mode.
Rotate back to portrait mode
Exit fullscreen mode.

355995836-ec9180e8-8623-4b58-8ee6-2d58b2538684.mov

if I remove stream-chat-react-native library then issue disappears.

• Device: iPhone 15 Pro
• OS + version: iOS 17.4
• Expo verison 51.0.24
• stream-chat-expo: 5.34.0
• stream-chat-react-native: 5.34.0
• gorhom/bottom-sheet: 4.4.8 via stream-chat-react-native-core