UI broken on Overlay reactions

[rajkapoordev]

Describe the bug When long press on message. Sometimes , Overlay Reactions screen UI is broken. This issue only happen sometimes. When you repeatedly long press on message.

Dev environment info

• "stream-chat-react-native" : 3.10.2
• "react-native" :0. 63.4
• Device/Simulator only iOS

To Reproduce Steps to reproduce the behavior:

Long Press on message repeatedly.

Expected behaviour

• UI should be proper

Screenshots

gz#18245

[madsroskar]

@rajkapoordev are you getting any errors logged to the console when this happens?

[rajkapoordev]

@madsroskar Not get any error or log.

[vishalnarkhede]

Hey @rajkapoordev I would like to request you to test it on v4 of stream-chat-react-native as well. We are still currently in beta version right now, but you can give it a try using this upgrade helper guide - https://getstream.io/chat/docs/sdk/reactnative/4.0.0/basics/upgrading-from-v3/

You can upgrade to v4.0.0-beta.4

[sandergo90]

Hi @vishalnarkhede the layout is also broken on v4 version. We didn't have problems on v3, but v4 is now broken (see screen recording).

https://user-images.githubusercontent.com/1516413/158144459-18e955b3-b43d-460b-9327-27136da8de1b.MP4

[vishalnarkhede]

@sandergo90 by broken UI, do you mean you are not able to see reactions?

Could you please share some code around Channel and OverlayProvider component?

[sandergo90]

I mean that the position of the message in overlay with its actions is not position well and at random so it seems?

[vishalnarkhede]

@sandergo90 the video which you shared, I can see that the message is always in center of the screen (vertically), which is the expected/implemented behaviour.

[sandergo90]

hmm @vishalnarkhede, this solution may have been the right solution when you still used the blur package. But now with the opacity backdrop, it doesn't make sense to just center the overlay, the positioning is very strange IMO.

[sandergo90]

@vishalnarkhede any update on this?

[vishalnarkhede]

Hey @sandergo90 you can customize the overlay background by theming, to choose lower opacity

• https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/themeContext/utils/theme.ts#L25
• https://getstream.io/chat/docs/sdk/reactnative/customization/theming/#dark-mode

For now we don't have any plans for changing this behaviour. But I will give it some thought and add it to roadmap.

[vanGalilea]

This will be solved after implementing this issue I'm going to close this