fix: long message content overflowing issue in overlay

[vishalnarkhede]

🎯 Goal

This PR fixes two UX issues:

• Reactions are pushed offscreen on large messages with images #1734
• [🐛] The messageTextNumberOfLines works only for single paragraph and not for multiple paragraphs #2188

🛠 Implementation details

Issue 1

There are two types of message overlay. One where we show message actions and another one where we show reactions from all the users. The overflowing content can only be resolved by adding ScrollView on message overlay. At some point we decided to remove ScrollView because we already have a FlatList in OverlayReactions component (as shown in 2nd screenshot below). FlatList inside ScrollView results into red warning from RN

Solution

• Add the ScrollView on the message overlay, but only when we show message actions.
• For this screen, there won't be any text truncation
• Text truncation only works when we show reactions within message overlay. Message will be truncated to number of lines provided by messageTextNumberOfLines prop.

Screen.Recording.2023-09-28.at.16.47.33.mov

Issue 2

First issue is about messageTextNumberOfLines not working as expected. The reason being, this prop was added to every paragraph's Text node, which would result in each paragraph being truncated to given number of lines.

Solution

There is no perfect solution for this at the moment. But we can improve this, by adding this prop only to the first paragraph. But keep in mind that this would also mean that if first paragraph only contains 2 lines and messageTextNumberOfLines is set to 3 - we will show the first paragraph completely and hide rest of the paragraphs without any truncation suffix (...). But I think its a worthy tradeoff.

🎨 UI Changes

iOS

Before	After

Android

Before	After

🧪 Testing

☑️ Checklist

• I have signed the Stream CLA (required)
• PR targets the develop branch
• Documentation is updated
• New code is tested in main example apps, including all possible scenarios
  • SampleApp iOS and Android
  • Expo iOS and Android

[stream-ci-bot]

🎉 This PR is included in version 5.18.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀