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>