Skip to content

Commit ca835fb

Browse files
khushal87khushal87
committed
fix: make flashlist optional
1 parent 213cbd3 commit ca835fb

File tree

7 files changed

+41
-56
lines changed

7 files changed

+41
-56
lines changed

‎examples/SampleApp/ios/Podfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ PODS:
155155
- nanopb/encode (= 3.30910.0)
156156
- nanopb/decode (3.30910.0)
157157
- nanopb/encode (3.30910.0)
158-
- op-sqlite (14.0.4):
158+
- op-sqlite (14.1.4):
159159
- boost
160160
- DoubleConversion
161161
- fast_float
@@ -3455,7 +3455,7 @@ SPEC CHECKSUMS:
34553455
hermes-engine: bbc1152da7d2d40f9e59c28acc6576fcf5d28e2a
34563456
libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
34573457
nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
3458-
op-sqlite: dc2477f170ae9af9117b8543870989572b08280e
3458+
op-sqlite: a7e46cfdaebeef219fd0e939332967af9fe6d406
34593459
PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
34603460
PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
34613461
RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f

‎examples/SampleApp/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
"@react-navigation/drawer": "7.4.1",
3838
"@react-navigation/native": "^7.1.10",
3939
"@react-navigation/stack": "^7.3.3",
40-
"@shopify/flash-list": "^2.0.3",
4140
"emoji-mart": "^5.6.0",
4241
"lodash.mergewith": "^4.6.2",
4342
"react": "19.1.0",

‎examples/SampleApp/src/screens/ChannelScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Channel,
66
ChannelAvatar,
77
MessageInput,
8-
MessageListFlashList,
8+
MessageFlashList,
99
ThreadContextValue,
1010
useAttachmentPickerContext,
1111
useChannelPreviewDisplayName,
@@ -216,7 +216,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
216216
thread={selectedThread}
217217
>
218218
<ChannelHeader channel={channel} />
219-
<MessageListFlashList onThreadSelect={onThreadSelect} />
219+
<MessageFlashList onThreadSelect={onThreadSelect} />
220220
<AITypingIndicatorView channel={channel} />
221221
<MessageInput />
222222
</Channel>

‎examples/SampleApp/yarn.lock‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2084,9 +2084,9 @@
20842084
integrity sha512-Az/dueoPerJsbbjRxu8a558wKY+gONUrfoy3Hs++5OqbeMsR0dYe6P+4oN6twrLFyzAhEA1tEoZRvQTFDRmvQg==
20852085

20862086
"@op-engineering/op-sqlite@^14.0.4":
2087-
version "14.0.4"
2088-
resolved "https://registry.yarnpkg.com/@op-engineering/op-sqlite/-/op-sqlite-14.0.4.tgz#a86951f98e65be2f66d3f17d5bc27796d614e023"
2089-
integrity sha512-WNWsEY+ZLbOUJ6EuhB4vGqE+99NTJJkdwW+7XKdg8lN7QMnbsM7z7LGWQ9Cqp5JKvWwItBpjaxlHB2wbywsSJA==
2087+
version "14.1.4"
2088+
resolved "https://registry.yarnpkg.com/@op-engineering/op-sqlite/-/op-sqlite-14.1.4.tgz#3f0c60b0c577842406a2637850c69d67bbe6652e"
2089+
integrity sha512-ZIZAqfHUKIjSxhaxWovEz4kCp6Gtoi8RPnJ36lPwTr73c7pEFNidE2vFm0dMBEj2ikm9wfYkab1/boW98SkVKA==
20902090

20912091
"@pkgjs/parseargs@^0.11.0":
20922092
version "0.11.0"
@@ -2620,13 +2620,6 @@
26202620
read-yaml-file "^2.1.0"
26212621
strip-json-comments "^3.1.1"
26222622

2623-
"@shopify/flash-list@^2.0.3":
2624-
version "2.0.3"
2625-
resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-2.0.3.tgz#222427d1e09bf5cdd8a219d0a5a80f6f1d20465d"
2626-
integrity sha512-jUlHuZFoPdqRCDvOqsb2YkTttRPyV8Tb/EjCx3gE2wjr4UTM+fE0Ltv9bwBg0K7yo/SxRNXaW7xu5utusRb0xA==
2627-
dependencies:
2628-
tslib "2.8.1"
2629-
26302623
"@sideway/address@^4.1.5":
26312624
version "4.1.5"
26322625
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"
@@ -8450,16 +8443,16 @@ ts-api-utils@^2.1.0:
84508443
resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91"
84518444
integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==
84528445

8453-
[email protected], tslib@^2.1.0, tslib@^2.4.0:
8454-
version "2.8.1"
8455-
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
8456-
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
8457-
84588446
tslib@^1.8.1:
84598447
version "1.14.1"
84608448
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
84618449
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
84628450

8451+
tslib@^2.1.0, tslib@^2.4.0:
8452+
version "2.8.1"
8453+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
8454+
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
8455+
84638456
tsutils@^3.21.0:
84648457
version "3.21.0"
84658458
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"

‎package/src/components/MessageList/MessageFlashList.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
ViewToken,
99
} from 'react-native';
1010

11-
import { FlashListProps, FlashListRef } from '@shopify/flash-list';
11+
import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
1212
import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
1313

1414
import { useMessageList } from './hooks/useMessageList';
@@ -44,19 +44,9 @@ import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContex
4444
import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
4545

4646
import { useStableCallback } from '../../hooks';
47+
import { getFlashList } from '../../native';
4748
import { FileTypes } from '../../types/types';
4849

49-
// @ts-expect-error - FlashList is not defined in the global scope
50-
let FlashList;
51-
52-
try {
53-
FlashList = require('@shopify/flash-list').FlashList;
54-
} catch (e) {
55-
console.error(
56-
'The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.',
57-
);
58-
}
59-
6050
const keyExtractor = (item: LocalMessage) => {
6151
if (item.id) {
6252
return item.id;
@@ -92,7 +82,7 @@ const getPreviousLastMessage = (messages: LocalMessage[], newMessage?: MessageRe
9282
return previousLastMessage;
9383
};
9484

95-
type MessageListFlashListPropsWithContext = Pick<
85+
type MessageFlashListPropsWithContext = Pick<
9686
AttachmentPickerContextValue,
9787
'closePicker' | 'selectedPicker' | 'setSelectedPicker'
9888
> &
@@ -251,7 +241,7 @@ const getItemTypeInternal = (message: LocalMessage) => {
251241
return 'unresolvable-type';
252242
};
253243

254-
const MessageListFlashListWithContext = (props: MessageListFlashListPropsWithContext) => {
244+
const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) => {
255245
const LoadingMoreRecentIndicator = props.threadList
256246
? InlineLoadingMoreRecentThreadIndicator
257247
: InlineLoadingMoreRecentIndicator;
@@ -1124,7 +1114,8 @@ const MessageListFlashListWithContext = (props: MessageListFlashListPropsWithCon
11241114
);
11251115
}
11261116

1127-
// @ts-expect-error - FlashList is not defined in the global scope
1117+
const FlashList = getFlashList();
1118+
11281119
if (!FlashList) {
11291120
throw new Error(
11301121
'The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.',
@@ -1190,9 +1181,9 @@ const MessageListFlashListWithContext = (props: MessageListFlashListPropsWithCon
11901181
);
11911182
};
11921183

1193-
export type MessageListFlashListProps = Partial<MessageListFlashListPropsWithContext>;
1184+
export type MessageFlashListProps = Partial<MessageFlashListPropsWithContext>;
11941185

1195-
export const MessageListFlashList = (props: MessageListFlashListProps) => {
1186+
export const MessageFlashList = (props: MessageFlashListProps) => {
11961187
const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
11971188
const {
11981189
channel,
@@ -1239,7 +1230,7 @@ export const MessageListFlashList = (props: MessageListFlashListProps) => {
12391230
const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
12401231

12411232
return (
1242-
<MessageListFlashListWithContext
1233+
<MessageFlashListWithContext
12431234
{...{
12441235
channel,
12451236
channelUnreadState,

‎package/src/components/Thread/Thread.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,14 @@ import {
1010
} from '../../contexts/messagesContext/MessagesContext';
1111
import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
1212

13+
import { isFlashListAvailable } from '../../native';
1314
import {
1415
MessageInput as DefaultMessageInput,
1516
MessageInputProps,
1617
} from '../MessageInput/MessageInput';
17-
import { MessageListFlashList, MessageListFlashListProps } from '../MessageList/MessageFlashList';
18+
import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
1819
import { MessageListProps } from '../MessageList/MessageList';
1920

20-
// @ts-expect-error - FlashList is not defined in the global scope
21-
let FlashList;
22-
23-
try {
24-
FlashList = require('@shopify/flash-list').FlashList;
25-
} catch (e) {
26-
console.error(
27-
'The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.',
28-
);
29-
}
30-
3121
type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
3222
Pick<MessagesContextValue, 'MessageList'> &
3323
Pick<
@@ -55,7 +45,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
5545
* Additional props for underlying MessageListFlashList component.
5646
* Available props - https://shopify.github.io/flash-list/docs/usage
5747
*/
58-
additionalMessageListFlashListProps?: Partial<MessageListFlashListProps>;
48+
additionalMessageFlashListProps?: Partial<MessageFlashListProps>;
5949
/** Make input focus on mounting thread */
6050
autoFocus?: boolean;
6151
/** Closes thread on dismount, defaults to true */
@@ -77,7 +67,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
7767
const {
7868
additionalMessageInputProps,
7969
additionalMessageListProps,
80-
additionalMessageListFlashListProps,
70+
additionalMessageFlashListProps,
8171
autoFocus = true,
8272
closeThread,
8373
closeThreadOnDismount = true,
@@ -128,12 +118,11 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
128118

129119
return (
130120
<React.Fragment key={`thread-${thread.id}`}>
131-
{/* @ts-expect-error - FlashList is not defined in the global scope */}
132-
{FlashList ? (
133-
<MessageListFlashList
121+
{isFlashListAvailable() ? (
122+
<MessageFlashList
134123
HeaderComponent={MemoizedThreadFooterComponent}
135124
threadList
136-
{...additionalMessageListFlashListProps}
125+
{...additionalMessageFlashListProps}
137126
/>
138127
) : (
139128
<MessageList

‎package/src/native.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -440,3 +440,16 @@ export const isImageMediaLibraryAvailable = () =>
440440
!!NativeHandlers.iOS14RefreshGallerySelection &&
441441
!!NativeHandlers.oniOS14GalleryLibrarySelectionChange &&
442442
!!NativeHandlers.getLocalAssetUri;
443+
444+
// Use this function to get the FlashList component from the @shopify/flash-list package
445+
export function getFlashList() {
446+
try {
447+
return require('@shopify/flash-list').FlashList;
448+
} catch {
449+
console.log(
450+
'You can also use the MessageFlashList component by installing the @shopify/flash-list package to optimize the performance of the MessageList component.',
451+
);
452+
}
453+
}
454+
455+
export const isFlashListAvailable = () => !!getFlashList();

0 commit comments

Comments
 (0)