fix: client side notification for offline uploads

Author: khushal87

examples/SampleApp/src/components/ToastComponent/Toast.tsx

@@ -2,7 +2,7 @@ import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-nati
 import Animated, { Easing, SlideInDown, SlideOutDown } from 'react-native-reanimated';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useInAppNotificationsState, useTheme } from 'stream-chat-react-native';
-import type { Notification } from 'stream-chat';
+import type { Notification, NotificationState } from 'stream-chat';
 
 const { width } = Dimensions.get('window');
 
@@ -15,16 +15,22 @@ const severityIconMap: Record<Notification['severity'], string> = {
 
 export const Toast = () => {
   const { closeInAppNotification, notifications } = useInAppNotificationsState();
+
   const { top } = useSafeAreaInsets();
   const {
     theme: {
       colors: { overlay, white_smoke },
     },
   } = useTheme();
 
+  // When offline, we upload pending attachments by cleaning up the previous upload, this results in a cancelled/aborted error from the server, so we filter out those notifications.
+  const filteredNotifications = notifications.filter(
+    (notification: NotificationState) => notification.metadata?.reason !== 'canceled',
+  );
+
   return (
     <SafeAreaView style={[styles.container, { top }]} pointerEvents='box-none'>
-      {notifications.map((notification) => (
+      {filteredNotifications.map((notification) => (
         <Animated.View
           key={notification.id}
           entering={SlideInDown.easing(Easing.bezierFn(0.25, 0.1, 0.25, 1.0))}