feat: optionally use FlashList using MessageFlashList component

[khushal87]

The Goal of the PR is to implement the MessageList using the FlashList v2 component. This comes under the MessageFlashList component which is a drop in replacement of the MessageList component and is experimental in nature. This has some good performance implications for both Android and iOS as per our testing and the memory consumption is also way lesser that the FlatList alternative.

This pull request introduces the new MessageFlashList component, which leverages @shopify/flash-list for improved message list performance in React Native chat apps. It updates both example apps to use MessageFlashList instead of the previous MessageList, adds support for the FlashList library throughout the codebase, and makes related dependency and configuration changes. Additionally, it introduces new props and utility functions to support the FlashList-based message list, and refines some styling and logic for message handling.

Message List Rendering Improvements

• Replaced usage of MessageList with the new MessageFlashList component in both the ExpoMessaging and SampleApp example apps, improving performance and scalability for large message lists. (examples/ExpoMessaging/app/channel/[cid]/index.tsx, examples/SampleApp/src/screens/ChannelScreen.tsx) (examples/ExpoMessaging/app/channel/[cid]/index.tsxL3-R3, examples/ExpoMessaging/app/channel/[cid]/index.tsxL48-R48, [1] [2]
• Updated the Thread component to conditionally render MessageFlashList if @shopify/flash-list is available, and added an experimental prop for passing additional FlashList props. (package/src/components/Thread/Thread.tsx) [1] [2] [3] [4]
• Exported MessageFlashList from the main components index for easier use. (package/src/components/index.ts)

Dependency and Configuration Updates

• Added @shopify/flash-list as a dependency in all relevant package.json files, marked it as optional where appropriate, and updated Jest setup to mock FlashList for tests. (examples/ExpoMessaging/package.json, examples/SampleApp/package.json, package/package.json, package/jest-setup.js) [1] [2] [3] [4] [5] [6]

Message List Logic and Utilities

• Added a new utility function getLastReceivedMessageFlashList to efficiently find the last received or sending message in a list, supporting the FlashList implementation. (package/src/components/MessageList/utils/getLastReceivedMessageFlashList.ts)
• Updated the useMessageList hook to support an isFlashList parameter, adjusting how messages are ordered based on the list implementation. (package/src/components/MessageList/hooks/useMessageList.ts) [1] [2] [3]
• Fixed the logic in useShouldScrollToRecentOnNewOwnMessage to correctly identify the last message for scrolling when using FlashList. (package/src/components/MessageList/hooks/useShouldScrollToRecentOnNewOwnMessage.ts)

Styling and Minor Adjustments

• Adjusted background color in the SampleApp's ChannelScreen and removed an Android-specific inversion style that is no longer needed. (examples/SampleApp/src/screens/ChannelScreen.tsx, package/src/components/MessageList/MessageList.tsx) [1] [2]

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
js_bundle_size	289 KB	289 KB	+290 B	🟡

[isekovanic]

The SecretMenu.tsx component is atrocious. It was initially added in a rush and is now modified in a rush. Even though it's just the SampleApp and it has no impact on anything performance related, it should be rewritten with a detached state whenever time allows it so that we can easily add more things to it in the future.