GetStream / stream-chat-react-native

💬 React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream
https://getstream.io/chat/sdk/react-native/
Other
975 stars 325 forks source link

Reactions are pushed offscreen on large messages with images #1734

Open benmechen opened 2 years ago

benmechen commented 2 years ago

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):

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 Screenshot 2022-09-21 at 15 31 55

madsroskar commented 2 years ago

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

vanGalilea commented 2 years ago

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

PhilipHow commented 2 years ago

@vanGalilea Any ETA on this?

atsss commented 2 years ago

@vanGalilea Any updates on it?

vishalnarkhede commented 1 year ago

@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 commented 1 year ago

@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>

image

PhilipHow commented 1 year ago

@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 commented 1 year ago

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

atsss commented 1 year ago

@vishalnarkhede Any updates on it?

vanGalilea commented 1 year ago

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

atsss commented 1 year ago

@vanGalilea @vishalnarkhede Any updates on it?

vanGalilea commented 1 year ago

@vanGalilea @vishalnarkhede Any updates on it?

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

Stofkat commented 1 year ago

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.

Screenshot 2023-09-07 at 17 06 59
vishalnarkhede commented 1 year ago

@Stofkat @benmechen @atsss Could you check the description of the PR, to see if the suggested solution would be fine with you? - https://github.com/GetStream/stream-chat-react-native/pull/2244

vishalnarkhede commented 1 year ago

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

Stofkat commented 1 year ago

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.

Screenshot 2023-10-02 at 14 30 42

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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.

Screenshot 2023-10-12 at 15 44 58
vishalnarkhede commented 1 year ago

@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 commented 11 months ago

@Stofkat ??

khushal87 commented 3 weeks ago

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