fix: make flashlist optional

Author: khushal87

examples/TypeScriptMessaging/package.json

@@ -18,7 +18,6 @@
     "@react-native-documents/picker": "^10.1.3",
     "@react-navigation/native": "^7.1.10",
     "@react-navigation/stack": "^7.3.3",
-    "@shopify/flash-list": "^2.0.3",
     "react": "19.1.0",
     "react-native": "0.80.2",
     "react-native-audio-recorder-player": "^3.6.13",

examples/TypeScriptMessaging/yarn.lock

@@ -1904,13 +1904,6 @@
     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"
@@ -7597,16 +7590,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.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.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/src/components/Thread/Thread.tsx

@@ -15,6 +15,18 @@ import {
   MessageInputProps,
 } from '../MessageInput/MessageInput';
 import { MessageListFlashList, MessageListFlashListProps } from '../MessageList/MessageFlashList';
+import { MessageListProps } from '../MessageList/MessageList';
+
+// @ts-expect-error - FlashList is not defined in the global scope
+let FlashList;
+
+try {
+  FlashList = require('@shopify/flash-list').FlashList;
+} catch (e) {
+  console.error(
+    'The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.',
+  );
+}
 
 type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
   Pick<MessagesContextValue, 'MessageList'> &
@@ -36,7 +48,14 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
      * Additional props for underlying MessageList component.
      * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-list/#props
      * */
-    additionalMessageListProps?: Partial<MessageListFlashListProps>;
+    additionalMessageListProps?: Partial<MessageListProps>;
+    /**
+     * @experimental This prop is experimental and is subject to change.
+     *
+     * Additional props for underlying MessageListFlashList component.
+     * Available props - https://shopify.github.io/flash-list/docs/usage
+     */
+    additionalMessageListFlashListProps?: Partial<MessageListFlashListProps>;
     /** Make input focus on mounting thread */
     autoFocus?: boolean;
     /** Closes thread on dismount, defaults to true */
@@ -58,13 +77,14 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
   const {
     additionalMessageInputProps,
     additionalMessageListProps,
+    additionalMessageListFlashListProps,
     autoFocus = true,
     closeThread,
     closeThreadOnDismount = true,
     disabled,
     loadMoreThread,
     MessageInput = DefaultMessageInput,
-    // MessageList,
+    MessageList,
     onThreadDismount,
     parentMessagePreventPress = true,
     thread,
@@ -108,11 +128,20 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
 
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      <MessageListFlashList
-        HeaderComponent={MemoizedThreadFooterComponent}
-        threadList
-        {...additionalMessageListProps}
-      />
+      {/* @ts-expect-error - FlashList is not defined in the global scope */}
+      {FlashList ? (
+        <MessageListFlashList
+          HeaderComponent={MemoizedThreadFooterComponent}
+          threadList
+          {...additionalMessageListFlashListProps}
+        />
+      ) : (
+        <MessageList
+          FooterComponent={MemoizedThreadFooterComponent}
+          threadList
+          {...additionalMessageListProps}
+        />
+      )}
       <MessageInput
         additionalTextInputProps={{
           autoFocus,