fix: expo sample app message flash list improvement

Author: khushal87

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -1,6 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import type { Channel as StreamChatChannel } from 'stream-chat';
-import { Channel, MessageInput, MessageFlashList, useChatContext } from 'stream-chat-expo';
+import {
+  Channel,
+  MessageInput,
+  useChatContext,
+  MessageFlashList,
+  ThreadContextValue,
+} from 'stream-chat-expo';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
 import { AuthProgressLoader } from '../../../components/AuthProgressLoader';
 import { AppContext } from '../../../context/AppContext';
@@ -45,7 +51,7 @@ export default function ChannelScreen() {
     payload,
   ) => {
     const { message, defaultHandler, emitter } = payload;
-    const { shared_location } = message;
+    const { shared_location } = message ?? {};
     if (emitter === 'messageContent' && shared_location) {
       // Create url params from shared_location
       const params = Object.entries(shared_location)
@@ -61,26 +67,26 @@ export default function ChannelScreen() {
   }
 
   return (
-    <Channel
-      audioRecordingEnabled={true}
-      channel={channel}
-      onPressMessage={onPressMessage}
-      keyboardVerticalOffset={headerHeight}
-      MessageLocation={MessageLocation}
-      thread={thread}
-    >
-      <Stack.Screen options={{ title: 'Channel Screen' }} />
+    <SafeAreaView edges={['bottom']} style={styles.container}>
+      <Channel
+        audioRecordingEnabled={true}
+        channel={channel}
+        onPressMessage={onPressMessage}
+        keyboardVerticalOffset={headerHeight}
+        MessageLocation={MessageLocation}
+        thread={thread}
+      >
+        <Stack.Screen options={{ title: 'Channel Screen' }} />
 
-      <SafeAreaView edges={['bottom']} style={styles.container}>
         <MessageFlashList
-          onThreadSelect={(thread) => {
+          onThreadSelect={(thread: ThreadContextValue['thread']) => {
             setThread(thread);
-            router.push(`/channel/${channel.cid}/thread/${thread.cid}`);
+            router.push(`/channel/${channel.cid}/thread/${thread?.cid ?? ''}`);
           }}
         />
         <MessageInput InputButtons={InputButtons} />
-      </SafeAreaView>
-    </Channel>
+      </Channel>
+    </SafeAreaView>
   );
 }
 

examples/ExpoMessaging/package.json

@@ -18,7 +18,7 @@
     "@react-native-firebase/messaging": "^23.4.0",
     "@react-navigation/elements": "^2.6.4",
     "@react-navigation/native": "^7.1.8",
-    "@shopify/flash-list": "2.0.2",
+    "@shopify/flash-list": "^2.1.0",
     "expo": "54.0.13",
     "expo-audio": "~1.0.13",
     "expo-build-properties": "~1.0.9",

examples/ExpoMessaging/yarn.lock

@@ -2248,12 +2248,10 @@
     read-yaml-file "^2.1.0"
     strip-json-comments "^3.1.1"
 
-"@shopify/[email protected]":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-2.0.2.tgz#644748f883fccf8cf2e0ca251e0ef88673b89120"
-  integrity sha512-zhlrhA9eiuEzja4wxVvotgXHtqd3qsYbXkQ3rsBfOgbFA9BVeErpDE/yEwtlIviRGEqpuFj/oU5owD6ByaNX+w==
-  dependencies:
-    tslib "2.8.1"
+"@shopify/flash-list@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-2.1.0.tgz#b1eefcf9fbd01ca04a5f24a6003cda3b46a59f64"
+  integrity sha512-/EIQlptG456yM5o9qNmNsmaZEFEOGvG3WGyb6GUAxSLlcKUGlPUkPI2NLW5wQSDEY4xSRa5zocUI+9xwmsM4Kg==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
@@ -6079,7 +6077,22 @@ [email protected]:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.17.0, stream-chat@^9.9.0:
+stream-chat@^9.23.0:
+  version "9.23.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.23.0.tgz#e7e5cf729861597e7198907c1cab22a57d68a2fc"
+  integrity sha512-UW112HYsLnYb4RMIXBtAouNQCCe0weVzNivjezsw+JKK1b/TX0JLBi+wK25mBUEO+coOGKfXiye6IB3gao8ipw==
+  dependencies:
+    "@types/jsonwebtoken" "^9.0.8"
+    "@types/ws" "^8.5.14"
+    axios "^1.12.2"
+    base64-js "^1.5.1"
+    form-data "^4.0.4"
+    isomorphic-ws "^5.0.0"
+    jsonwebtoken "^9.0.2"
+    linkifyjs "^4.3.2"
+    ws "^8.18.1"
+
+stream-chat@^9.9.0:
   version "9.20.3"
   resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.20.3.tgz#5f47d6f46d146202c743282f5fb7350f4a640922"
   integrity sha512-206Lea0ZAVWbfYZkIwLG5m+++ELD3f8EAEL/YzbMDL++E2vU2WhQ2d1HNb1ROXURZUF0Sy845htTw1rwnahomw==
@@ -6310,7 +6323,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@2.8.1, tslib@^2.0.0, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.1.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -220,9 +220,15 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       >
         <ChannelHeader channel={channel} />
         {messageListImplementation === 'flashlist' ? (
-          <MessageFlashList onThreadSelect={onThreadSelect} isLiveStreaming={messageListMode === 'livestream'} />
+          <MessageFlashList
+            onThreadSelect={onThreadSelect}
+            isLiveStreaming={messageListMode === 'livestream'}
+          />
         ) : (
-          <MessageList onThreadSelect={onThreadSelect} isLiveStreaming={messageListMode === 'livestream'} />
+          <MessageList
+            onThreadSelect={onThreadSelect}
+            isLiveStreaming={messageListMode === 'livestream'}
+          />
         )}
         <AITypingIndicatorView channel={channel} />
         <MessageInput />