fix: handle messgaeflash list in thread

Author: khushal87

examples/SampleApp/package.json

@@ -37,6 +37,7 @@
     "@react-navigation/drawer": "7.4.1",
     "@react-navigation/native": "^7.1.10",
     "@react-navigation/stack": "^7.3.3",
+    "@shopify/flash-list": "^2.0.3",
     "emoji-mart": "^5.6.0",
     "lodash.mergewith": "^4.6.2",
     "react": "19.1.0",

examples/SampleApp/yarn.lock

@@ -2620,6 +2620,13 @@
     read-yaml-file "^2.1.0"
     strip-json-comments "^3.1.1"
 
+"@shopify/flash-list@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-2.0.3.tgz#222427d1e09bf5cdd8a219d0a5a80f6f1d20465d"
+  integrity sha512-jUlHuZFoPdqRCDvOqsb2YkTttRPyV8Tb/EjCx3gE2wjr4UTM+fE0Ltv9bwBg0K7yo/SxRNXaW7xu5utusRb0xA==
+  dependencies:
+    tslib "2.8.1"
+
 "@sideway/address@^4.1.5":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"
@@ -8443,16 +8450,16 @@ ts-api-utils@^2.1.0:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91"
   integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==
 
+[email protected], tslib@^2.1.0, tslib@^2.4.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0, tslib@^2.4.0:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
-  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
-
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"

package/jest-setup.js

@@ -61,3 +61,7 @@ jest.mock('react-native/Libraries/Components/RefreshControl/RefreshControl', ()
   __esModule: true,
   default: require('./__mocks__/RefreshControlMock'),
 }));
+
+jest.mock('@shopify/flash-list', () => ({
+  FlashList: undefined,
+}));

package/src/components/MessageList/MessageFlashList.tsx

@@ -44,9 +44,16 @@ import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContex
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback } from '../../hooks';
-import { getFlashList } from '../../native';
 import { FileTypes } from '../../types/types';
 
+let FlashList;
+
+try {
+  FlashList = require('@shopify/flash-list').FlashList;
+} catch {
+  FlashList = undefined;
+}
+
 const keyExtractor = (item: LocalMessage) => {
   if (item.id) {
     return item.id;
@@ -1114,8 +1121,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     );
   }
 
-  const FlashList = getFlashList();
-
   if (!FlashList) {
     throw new Error(
       'The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.',

package/src/components/Thread/Thread.tsx

@@ -10,14 +10,21 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
-import { isFlashListAvailable } from '../../native';
 import {
   MessageInput as DefaultMessageInput,
   MessageInputProps,
 } from '../MessageInput/MessageInput';
 import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
 import { MessageListProps } from '../MessageList/MessageList';
 
+let FlashList;
+
+try {
+  FlashList = require('@shopify/flash-list').FlashList;
+} catch {
+  FlashList = undefined;
+}
+
 type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
   Pick<MessagesContextValue, 'MessageList'> &
   Pick<
@@ -118,7 +125,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
 
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      {isFlashListAvailable() ? (
+      {FlashList ? (
         <MessageFlashList
           HeaderComponent={MemoizedThreadFooterComponent}
           threadList

package/src/native.ts

@@ -440,16 +440,3 @@ export const isImageMediaLibraryAvailable = () =>
   !!NativeHandlers.iOS14RefreshGallerySelection &&
   !!NativeHandlers.oniOS14GalleryLibrarySelectionChange &&
   !!NativeHandlers.getLocalAssetUri;
-
-// Use this function to get the FlashList component from the @shopify/flash-list package
-export function getFlashList() {
-  try {
-    return require('@shopify/flash-list').FlashList;
-  } catch {
-    console.log(
-      'You can also use the MessageFlashList component by installing the @shopify/flash-list package to optimize the performance of the MessageList component.',
-    );
-  }
-}
-
-export const isFlashListAvailable = () => !!getFlashList();