[🐛] Heavy re-rendering of MessageList

[arekkubaczkowski]

In our app, the MessageList is rendered within a bottom sheet (by Gorhom). To display it properly, we need to calculate the available height within the bottom sheet content and apply this to the list's container. This is necessary because by default, the bottom sheet renders its children without limiting their height, causing them to extend out of the viewport.

The issue arises when resizing the bottom sheet containing multiple messages. This action triggers numerous re-renders, which are not optimized effectively on Getstream's end. Consequently, after a few snap point movements, the app becomes unresponsive and hangs. A quick investigation revealed that the MessageList component and the renderItem method do not adhere to optimization principles, causing unnecessary re-renders.

        // animated height
        <Animated.View style={list.styles}>
          <MessageList
            {...messageListProps}
            additionalFlatListProps={{
              getItemLayout(_, index) {
                return {
                  index,
                  length: 62,
                  offset: 62 * index,
                };
              },
            }}
          />
        </Animated.View>
        <KeyboardStickyView
          style={keyboardView.styles}
          offset={keyboardView.offset}
        >
          <MessageInput
            ShowThreadMessageInChannelButton={() => null}
            Input={props => <GetStreamInput {...props} />}
          />
        </KeyboardStickyView>

Expected behavior

I would find it very helpful to get the MessageList and Message components more optimized so it doesn't affect smooth re-rendering.

Project Related Information

Environment

Click To Expand

package.json:

"stream-chat": "8.31.0", "stream-chat-expo": "^5.31.1",

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • [x] iOS
  • [x] Android
  • [ ] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • [x] I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---

[arekkubaczkowski]

is this library actively maintained? I have created bunch of issues already and I got no response so far... 🤔

[arekkubaczkowski]

Fixes by avoiding resizing the list in favour of calculating proper position and animating translateY value.

[khushal87]

Hey @arekkubaczkowski, so is it something that you have patched on your end?

[khushal87]

is this library actively maintained? I have created bunch of issues already and I got no response so far... 🤔

Hey, you can let us know about your pending issues, and we can try to solve them in the best way possible. If there's a closed issue you are struggling with please feel free to reopen it and we can have a look. Thanks :)

[arekkubaczkowski]

it is not about the patch, I just took a different way to solve it. The message list still is relatively heavy so instead of resizing it to fit within bottom sheet content, I am positioning it to be sticked to the bottom of BS content by manipulating translateY. In a spare time I can share some gist if someone would also wonder how to approach it.

[khushal87]

We would love to check that @arekkubaczkowski. Thanks 😄