From 0439f6a2cebce58c866c3435ba7670215e1101a3 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 28 Nov 2025 14:21:50 +0530
Subject: [PATCH 1/2] fix: change message info bottom sheet modal

---
 .../src/components/MessageInfoBottomSheet.tsx | 23 ++++++++--------
 .../SampleApp/src/screens/ChannelScreen.tsx   | 26 ++++++++++++-------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/examples/SampleApp/src/components/MessageInfoBottomSheet.tsx b/examples/SampleApp/src/components/MessageInfoBottomSheet.tsx
index b989c32203..a4ad65728b 100644
--- a/examples/SampleApp/src/components/MessageInfoBottomSheet.tsx
+++ b/examples/SampleApp/src/components/MessageInfoBottomSheet.tsx
@@ -1,15 +1,14 @@
 import React, { useMemo } from 'react';
-import BottomSheet, { BottomSheetFlatList } from '@gorhom/bottom-sheet';
-import { BottomSheetView } from '@gorhom/bottom-sheet';
 import {
   Avatar,
+  BottomSheetModal,
   useChatContext,
   useMessageDeliveredData,
   useMessageReadData,
   useTheme,
 } from 'stream-chat-react-native';
 import { LocalMessage, UserResponse } from 'stream-chat';
-import { StyleSheet, Text, View } from 'react-native';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
 
 const renderUserItem = ({ item }: { item: UserResponse }) => (
   <View style={styles.userItem}>
@@ -24,10 +23,12 @@ const renderEmptyText = ({ text }: { text: string }) => (
 
 export const MessageInfoBottomSheet = ({
   message,
-  ref,
+  visible,
+  onClose,
 }: {
   message?: LocalMessage;
-  ref: React.RefObject<BottomSheet | null>;
+  visible: boolean;
+  onClose: () => void;
 }) => {
   const {
     theme: { colors },
@@ -45,10 +46,10 @@ export const MessageInfoBottomSheet = ({
   }, [readStatus, client?.user?.id]);
 
   return (
-    <BottomSheet enablePanDownToClose ref={ref} index={-1} snapPoints={['50%']}>
-      <BottomSheetView style={[styles.container, { backgroundColor: colors.white_smoke }]}>
+    <BottomSheetModal visible={visible} onClose={onClose}>
+      <View style={[styles.container, { backgroundColor: colors.white_smoke }]}>
         <Text style={styles.title}>Read</Text>
-        <BottomSheetFlatList
+        <FlatList
           data={otherReadUsers}
           renderItem={renderUserItem}
           keyExtractor={(item) => item.id}
@@ -56,15 +57,15 @@ export const MessageInfoBottomSheet = ({
           ListEmptyComponent={renderEmptyText({ text: 'No one has read this message.' })}
         />
         <Text style={styles.title}>Delivered</Text>
-        <BottomSheetFlatList
+        <FlatList
           data={otherDeliveredToUsers}
           renderItem={renderUserItem}
           keyExtractor={(item) => item.id}
           style={styles.flatList}
           ListEmptyComponent={renderEmptyText({ text: 'The message was not delivered to anyone.' })}
         />
-      </BottomSheetView>
-    </BottomSheet>
+      </View>
+    </BottomSheetModal>
   );
 };
 
diff --git a/examples/SampleApp/src/screens/ChannelScreen.tsx b/examples/SampleApp/src/screens/ChannelScreen.tsx
index c978ccfe5a..bd3332257f 100644
--- a/examples/SampleApp/src/screens/ChannelScreen.tsx
+++ b/examples/SampleApp/src/screens/ChannelScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import type { LocalMessage, Channel as StreamChatChannel } from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
@@ -130,6 +130,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
   } = useTheme();
   const { t } = useTranslationContext();
   const { setThread } = useStreamChatContext();
+  const [modalVisible, setModalVisible] = useState(false);
   const [selectedMessage, setSelectedMessage] = useState<LocalMessage | undefined>(undefined);
 
   const [channel, setChannel] = useState<StreamChatChannel | undefined>(channelFromProp);
@@ -186,15 +187,14 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     [channel, navigation, setThread],
   );
 
-  const messageInfoBottomSheetRef = useRef<BottomSheet>(null);
+  const handleMessageInfo = useCallback((message: LocalMessage) => {
+    setSelectedMessage(message);
+    setModalVisible(true);
+  }, []);
 
-  const handleMessageInfo = useCallback(
-    (message: LocalMessage) => {
-      setSelectedMessage(message);
-      messageInfoBottomSheetRef.current?.snapToIndex(1);
-    },
-    [messageInfoBottomSheetRef],
-  );
+  const handleMessageInfoClose = useCallback(() => {
+    setModalVisible(false);
+  }, []);
 
   const messageActions = useCallback(
     (params: MessageActionsParams) => {
@@ -249,7 +249,13 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         )}
         <AITypingIndicatorView channel={channel} />
         <MessageInput />
-        <MessageInfoBottomSheet message={selectedMessage} ref={messageInfoBottomSheetRef} />
+        {modalVisible && (
+          <MessageInfoBottomSheet
+            visible={modalVisible}
+            message={selectedMessage}
+            onClose={handleMessageInfoClose}
+          />
+        )}
       </Channel>
     </View>
   );

From eb789775ccd93458226ea42245dabcde5e84d1dc Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 28 Nov 2025 14:26:03 +0530
Subject: [PATCH 2/2] fix: change message info bottom sheet modal

---
 examples/SampleApp/src/screens/ChannelScreen.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/SampleApp/src/screens/ChannelScreen.tsx b/examples/SampleApp/src/screens/ChannelScreen.tsx
index bd3332257f..406938e40d 100644
--- a/examples/SampleApp/src/screens/ChannelScreen.tsx
+++ b/examples/SampleApp/src/screens/ChannelScreen.tsx
@@ -33,7 +33,6 @@ import { channelMessageActions } from '../utils/messageActions.tsx';
 import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
 import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
-import BottomSheet from '@gorhom/bottom-sheet';
 import { MessageInfoBottomSheet } from '../components/MessageInfoBottomSheet.tsx';
 
 export type ChannelScreenNavigationProp = NativeStackNavigationProp<