fix: change message info bottom sheet modal (#3302)

Author: khushal87

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,26 +46,26 @@ 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}
           style={styles.flatList}
           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>
   );
 };
 

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 {
@@ -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<
@@ -130,6 +129,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 +186,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 +248,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>
   );