fix: make FlashList component optional

Author: khushal87

examples/SampleApp/ios/Podfile.lock

@@ -1859,7 +1859,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-cameraroll (7.10.2):
+  - react-native-cameraroll (7.10.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -3493,7 +3493,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 8f620d1794c6b59a8c3862c3ae820a2e9e6c9bb0
   React-microtasksnativemodule: dcf5321c9a41659a6718df8a5f202af1577c6825
   react-native-blob-util: a511afccff6511544ebf56928e6afdf837b037a7
-  react-native-cameraroll: 5c5fb716af11f6178dca48271ae065cd786a0a02
+  react-native-cameraroll: 8c3ba9b6f511cf645778de19d5039b61d922fdfb
   react-native-document-picker: b37cf6660ad9087b782faa78a1e67687fac15bfd
   react-native-geolocation: b7f68b8c04e36ee669c630dbc48dd42cf93a0a41
   react-native-image-picker: 9bceb747cd6cde22a3416ffdc819d11b5b11f156

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/package.json

@@ -67,7 +67,6 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.1.8",
-    "@shopify/flash-list": "^2.0.3",
     "@ungap/structured-clone": "^1.3.0",
     "dayjs": "1.11.13",
     "emoji-regex": "^10.4.0",
@@ -86,6 +85,7 @@
     "@emoji-mart/data": ">=1.1.0",
     "@op-engineering/op-sqlite": ">=14.0.0",
     "@react-native-community/netinfo": ">=11.3.1",
+    "@shopify/flash-list": ">=2.0.3",
     "emoji-mart": ">=5.4.0",
     "react-native": ">=0.73.0",
     "react-native-gesture-handler": ">=2.18.0",
@@ -96,6 +96,9 @@
     "@op-engineering/op-sqlite": {
       "optional": true
     },
+    "@shopify/flash-list": {
+      "optional": true
+    },
     "emoji-mart": {
       "optional": true
     },
@@ -107,6 +110,7 @@
     "@babel/core": "^7.27.4",
     "@babel/runtime": "^7.27.6",
     "@op-engineering/op-sqlite": "^14.0.3",
+    "@shopify/flash-list": "^2.0.3",
     "@react-native-community/eslint-config": "3.2.0",
     "@react-native-community/eslint-plugin": "1.3.0",
     "@react-native-community/netinfo": "^11.4.1",

package/src/components/MessageList/MessageFlashList.tsx

@@ -8,7 +8,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import { FlashList, FlashListProps, FlashListRef } from '@shopify/flash-list';
+import { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -46,6 +46,17 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 import { useStableCallback } from '../../hooks';
 import { FileTypes } from '../../types/types';
 
+// @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.',
+  );
+}
+
 const keyExtractor = (item: LocalMessage) => {
   if (item.id) {
     return item.id;
@@ -1113,6 +1124,13 @@ const MessageListFlashListWithContext = (props: MessageListFlashListPropsWithCon
     );
   }
 
+  // @ts-expect-error - FlashList is not defined in the global scope
+  if (!FlashList) {
+    throw new Error(
+      'The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.',
+    );
+  }
+
   return (
     <View
       onLayout={onLayout}