fix: sample apps crash

Author: khushal87

examples/SampleApp/src/components/DraftsList.tsx

@@ -1,18 +1,16 @@
 import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { DraftsIcon } from '../icons/DraftIcon';
 import {
-  MessagePreview,
   useChatContext,
   useStateStore,
   useTheme,
-  useTranslationContext,
+  useMessagePreviewText,
 } from 'stream-chat-react-native';
 import { DraftManagerState, DraftsManager } from '../utils/DraftsManager';
 import { useCallback, useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat';
-import { getPreviewFromMessage } from '../utils/getPreviewOfMessage';
 
 export type DraftItemProps = {
   type?: 'channel' | 'thread';
@@ -31,7 +29,7 @@ export const DraftItem = ({ type, channel, date, message, thread }: DraftItemPro
   } = useTheme();
   const navigation = useNavigation();
   const { client } = useChatContext();
-  const { t } = useTranslationContext();
+  const messagePreviewText = useMessagePreviewText({ message });
   const channelName = channel?.name ? channel.name : 'Channel';
 
   const onNavigationHandler = async () => {
@@ -50,10 +48,6 @@ export const DraftItem = ({ type, channel, date, message, thread }: DraftItemPro
     }
   };
 
-  const previews = useMemo(() => {
-    return getPreviewFromMessage({ message, t });
-  }, [message, t]);
-
   return (
     <Pressable
       style={({ pressed }) => [styles.itemContainer, { opacity: pressed ? 0.8 : 1 }]}
@@ -69,7 +63,7 @@ export const DraftItem = ({ type, channel, date, message, thread }: DraftItemPro
         <View style={styles.icon}>
           <DraftsIcon />
         </View>
-        <MessagePreview previews={previews} />
+        <Text style={styles.text}>{messagePreviewText}</Text>
       </View>
     </Pressable>
   );

examples/SampleApp/src/components/Reminders/ReminderItem.tsx

@@ -4,14 +4,14 @@ import { Alert, AlertButton, Pressable, StyleSheet, Text, View } from 'react-nat
 import { ReminderResponse } from 'stream-chat';
 import {
   Delete,
-  MessagePreview,
+  useMessagePreviewText,
+  useMessagePreviewIcon,
   useChatContext,
   useTheme,
   useTranslationContext,
 } from 'stream-chat-react-native';
 import { ReminderBanner } from './ReminderBanner';
 import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
-import { getPreviewFromMessage } from '../../utils/getPreviewOfMessage';
 
 export const ReminderItem = (
   item: ReminderResponse & { onDeleteHandler?: (id: string) => void },
@@ -24,8 +24,11 @@ export const ReminderItem = (
   const {
     theme: {
       colors: { accent_red, white_smoke, grey_gainsboro },
+      semantics,
     },
   } = useTheme();
+  const messagePreviewText = useMessagePreviewText({ message });
+  const MessagePreviewIcon = useMessagePreviewIcon({ message });
 
   const onNavigationHandler = async () => {
     if (channel?.type && channel.id) {
@@ -40,10 +43,6 @@ export const ReminderItem = (
     }
   };
 
-  const previews = useMemo(() => {
-    return getPreviewFromMessage({ message: message, t });
-  }, [message, t]);
-
   const onDeleteReminder = useCallback(() => {
     Alert.alert('Remove Reminder', 'Are you sure you want to remove this reminder?', [
       {
@@ -131,7 +130,10 @@ export const ReminderItem = (
           <ReminderBanner {...item} />
         </View>
         <View style={styles.content}>
-          <MessagePreview previews={previews} />
+          {MessagePreviewIcon ? (
+            <MessagePreviewIcon height={20} stroke={semantics.textPrimary} width={20} />
+          ) : null}
+          <Text style={styles.text}>{messagePreviewText}</Text>
         </View>
       </Pressable>
     </Swipeable>
@@ -157,6 +159,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginTop: 8,
+    gap: 4,
   },
   text: {
     fontSize: 16,