Reactions are pushed offscreen on large messages with images

[benmechen]

Describe the bug
When the message is large, either due to large amounts of text or due to an image, the reactions list is pushed off the top of the screen, and the message actions are pushed off the bottom, making them both inaccessible.
This predominantly affects smaller screen phones, such as the iPhone SE and 8, however is does also affect larger phones if the message is long enough.

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

• Package version (stream-chat-react-native): 5.2.0
• react-native or expo version: 0.68.2
• Device/Emulator (android/ios) and OS version: iPhone SE, iPhone 8, iPhone 11/13

To Reproduce
Steps to reproduce the behavior:

1. Send a message with a portrait image and a few lines of text
2. Long press on the message
3. Message actions and reactions UI is cut off

Expected behavior
All message UI on the long press should be accessible, either by scroll, scaling down image size, or cutting off long text.

Screenshots

[madsroskar]

Thanks for reporting this @benmechen. I can confirm that this happens on small devices I've tested on on my end as well.

[vanGalilea]

Hey team! Please add your planning poker estimate with Zenhub @khushal87 @madsroskar @vishalnarkhede

[PhilipHow]

@vanGalilea Any ETA on this?

[atsss]

@vanGalilea Any updates on it?

[vishalnarkhede]

@PhilipHow @atsss scaling down the image or adding scroll view have a bit of complexities. This is something we will look into at some point.

We support a prop messageTextNumberOfLines on OverlayProvider component - https://getstream.io/chat/docs/sdk/reactnative/core-components/overlay-provider/#messagetextnumberoflines
One can limit the message text within this overlay to certain number of lines using this prop. Default value is 5, but I think you can bring it down to 1 or 2.

The problem is that, it might not be a good UX for the case of message which has no attachment.

What we can do for now is that we can modify messageTextNumberOfLines prop to accept a function where you can keep the logic for setting number of lines depending on what kind of message it is:

<OverlayProvider messageTextNumberOfLines={(message) => message.attachments.length > 0 ? 1 : 5}>
    ...
</OverlayProvider>

Would that work for you?

[atsss]

@vishalnarkhede Thanks for replying. I've changed the messageTextNumberOfLines props but I don't think it works well. It should display only two lines when I set 2 for messageTextNumberOfLines props, right?

This is my code snipets

      <NativeBaseProvider theme={nativeBaseTheme} colorModeManager={{ get: async () => colorScheme }}>
        <SWRConfig>
          <StreamChatContext.Provider value={{ channel, setChannel, channelInfo, setChannelInfo }}>
            <GestureHandlerRootView style={{ flex: 1 }}>
              <OverlayProvider
                bottomInset={bottom}
                i18nInstance={streami18n}
                translucentStatusBar
                messageTextNumberOfLines={2}
                value={{ style: stremChatTheme }}
              >
                <Navigator/>
              </OverlayProvider>
            </GestureHandlerRootView>
          </StreamChatContext.Provider>
        </SWRConfig>
      </NativeBaseProvider>
    </NavigationContainer>

[PhilipHow]

@PhilipHow @atsss scaling down the image or adding scroll view have a bit of complexities. This is something we will look into at some point.

We support a prop messageTextNumberOfLines on OverlayProvider component - https://getstream.io/chat/docs/sdk/reactnative/core-components/overlay-provider/#messagetextnumberoflines One can limit the message text within this overlay to certain number of lines using this prop. Default value is 5, but I think you can bring it down to 1 or 2.

The problem is that, it might not be a good UX for the case of message which has no attachment.

What we can do for now is that we can modify messageTextNumberOfLines prop to accept a function where you can keep the logic for setting number of lines depending on what kind of message it is:

<OverlayProvider messageTextNumberOfLines={(message) => message.attachments.length > 0 ? 1 : 5}>
    ...
</OverlayProvider>

Would that work for you?

This doesn't work for us, no. Most of the issues are with attachments, including images or web previews.

Scrolling is really the only solution to this unless the message action UX is fundamentally changed.

[vishalnarkhede]

@PhilipHow @atsss thanks for your feedback. Let us give it some thought and get back to you soon.

[atsss]

@vishalnarkhede Any updates on it?

[vanGalilea]

@atsss we have added this to our backlog and will pick it up the upcoming quarter 👍🏻

[atsss]

@vanGalilea @vishalnarkhede Any updates on it?

[vanGalilea]

@vanGalilea @vishalnarkhede Any updates on it?

Still in our backlog for this Q, stay tuned please!

[Stofkat]

Any update on this yet?

We experience a similar issue with a custom e2e encrypted imageview we've added to our message bubble. At first I thought it had to do with our implementation but the issue also appears when we don't render them at all.

It seems as if stream chat automatically determines the height of the message actions view based on the number of attachments. This is just an assumption of course.

[vishalnarkhede]

@Stofkat @benmechen @atsss Could you check the description of the PR, to see if the suggested solution would be fine with you? - #2244

[vishalnarkhede]

5.18.1-beta.1 is published, if you guys wanna test it out and give us some feedback :)

[Stofkat]

Just tested 5.18.1-beta.1 but the issue still exists.
It will automatically determine the height of the message box based on the number of attachments you add (see previous screenshot).

Even if I don't render the attachments at all it will still do this, see new screenshot. I'm rendering no attachments at all and it still increases the size of the message as you can see.

Like I said the size seems to be determined solely by the number of attachments, not their actual rendered size.

Hope this additional screenshot gives some better insight on the problem.

EDIT:
If there's any way for me to manually set the size this would also be a solution.

[vishalnarkhede]

@Stofkat could you please tell me how I can reproduce this issue on our side? Basically what custom components do I need to set.

[Stofkat]

@vishalnarkhede You can reproduce this by adding attachments with an unknown file type. There will be no preview being displayed by the chat at all however the size of the chat balloon is increased anyways.

This is not really a problem because I can decrypt our encrypted attachments and display them with some custom code.

However: when you display the message actions it will still base the height of the window on the size of the original message balloon.

Long story short: it appears as if the containing view size is somehow based on a number of attachments rather than the actual height of the content.

Is there some way I can set the height of the message actions manually?

[Stofkat]

The issue with text also doesn't appear to be fixed by the way. See attached screenshot.
I would expect the actions to be displayed on the bottom of the visible screen, not pushed all the way down.

Setting the messageTextNumberOfLines on the OverlayProvider still seems to do nothing in this regard. The only noticeable change for me is that the whole view is now encapsulated in a ScrollView so that the buttons are reachable, which is a good thing.

[vishalnarkhede]

@Stofkat

@vishalnarkhede You can reproduce this by adding attachments with an unknown file type.

You mean images with unknown type? Since gallery view is only rendered for attackment.type = "image"

[vishalnarkhede]

@Stofkat ??

[khushal87]

This will be fixed with new v6 designs around the message menu.

[khushal87]

We have released version 6.0.0 today, and that has a new design, which is much cleaner and easier to customize. You can upgrade to the version and I think this problem should be indirectly solved.

https://getstream.io/chat/docs/sdk/react-native/basics/upgrading-from-v5/

Do let us know how it goes. Thanks 😄