Merge pull request #2168 from GetStream/develop

Next release

docusaurus/reactnative_versioned_docs/version-4.x.x/guides/push_notifications_v2.mdx

@@ -112,13 +112,6 @@ client.updateAppSettings({
 
 Once you configure the Firebase server key and set it up on the Stream dashboard, a device that is supposed to receive push notifications needs to be registered at the Stream backend. This is usually done by listening for the Firebase device token.
 
-:::caution
-
-Please note that, `client.addDevice` call requires a user token to be set on the client.
-So `client.addDevice` call should be made after `client.connectUser` in code.
-
-:::
-
 ```js
 // Request Push Notification permission from device.
 const requestPermission = async () => {
@@ -203,6 +196,12 @@ const styles = StyleSheet.create({
 });
 ```
 
+:::note
+
+Please note that `client.setLocalDevice` should be made before `client.connectUser` in code.
+
+:::
+
 ## The Push Notification Message Payload
 
 When a message is received by the Chat API, if the [requirements](#requirements) are met, it kicks a job to send a notification message to Firebase.

examples/ExpoMessaging/Readme.md

@@ -35,4 +35,19 @@
 
      ```bash
      yarn android
-     ```
+     ```
+
+**Note:**
+
+If your Android build fails please add the following snippet on the `android/gradle.properties` to make it work.
+
+```
+# Disabled hermes in favour of broken Android build due to the package `react-native-quick-sqlite`:
+# To Fix:
+# A problem occurred evaluating project ':react-native-quick-sqlite'.
+# > Cannot get property 'hermesEnabled' on extra properties extension as it does not exist
+hermesEnabled=true
+# disables the check for multiple instances for gesture handler
+# this is needed for react-native-gesture-handler to be both a devDep of core and be a dep on the expo sample app
+disableMultipleInstancesCheck=true
+```

examples/ExpoMessaging/yarn.lock

@@ -7105,10 +7105,10 @@ [email protected]:
   version "0.0.0"
   uid ""
 
-[email protected].0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.0.tgz#e4d52ca3b492b7a3f2550049fccd85e025bfed2e"
-  integrity sha512-MJf9qV1MZf0r4HTt0afZGxF5/HytbY+Sap/8QTDNE6OucWmxa44kOY7SfHmfdkxOLTUPHMeK7Glc+wCmYZVVLA==
+[email protected].2:
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.2.tgz#26c982907728eb3ad7d3bc34f68764935596c230"
+  integrity sha512-sFH/Ed667lJksHBG1VQjeJdcukWfT8qINhCKEw6WfFbog0XeFmHzs6juuT8mjcJ9SSyo0hYAKNRE34lT8p/t1Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

examples/SampleApp/yarn.lock

@@ -7055,10 +7055,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.0.tgz#e4d52ca3b492b7a3f2550049fccd85e025bfed2e"
-  integrity sha512-MJf9qV1MZf0r4HTt0afZGxF5/HytbY+Sap/8QTDNE6OucWmxa44kOY7SfHmfdkxOLTUPHMeK7Glc+wCmYZVVLA==
+[email protected].2:
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.2.tgz#26c982907728eb3ad7d3bc34f68764935596c230"
+  integrity sha512-sFH/Ed667lJksHBG1VQjeJdcukWfT8qINhCKEw6WfFbog0XeFmHzs6juuT8mjcJ9SSyo0hYAKNRE34lT8p/t1Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

examples/TypeScriptMessaging/Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '>= 2.6.10'
+ruby '>= 2.7.5'
 
-gem 'cocoapods', '>= 1.11.3'
+gem 'cocoapods', '>= 1.12.1'

examples/TypeScriptMessaging/ios/Podfile.lock

@@ -708,7 +708,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 57d2868c099736d80fcd648bf211b4431e51a558
+  boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: a89a0525bc7ca174675045c2b492b5280d5a2470
@@ -729,7 +729,7 @@ SPEC CHECKSUMS:
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
   PromisesSwift: cf9eb58666a43bbe007302226e510b16c1e10959
-  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
+  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
   RCTRequired: 5a4a30ac20c86eeadd6844a9328f78d4168cf9b2
   RCTTypeSafety: 279fc5861a89f0f37db3a585f27f971485b4b734
   React: 88307a9be3bd0e71a6822271cf28b84a587fb97f
@@ -781,4 +781,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: bdd8b333b6b53d6a2a80bcd28a1af34d2155ecca
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1

examples/TypeScriptMessaging/yarn.lock

@@ -7183,10 +7183,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.0.tgz#e4d52ca3b492b7a3f2550049fccd85e025bfed2e"
-  integrity sha512-MJf9qV1MZf0r4HTt0afZGxF5/HytbY+Sap/8QTDNE6OucWmxa44kOY7SfHmfdkxOLTUPHMeK7Glc+wCmYZVVLA==
+[email protected].2:
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.2.tgz#26c982907728eb3ad7d3bc34f68764935596c230"
+  integrity sha512-sFH/Ed667lJksHBG1VQjeJdcukWfT8qINhCKEw6WfFbog0XeFmHzs6juuT8mjcJ9SSyo0hYAKNRE34lT8p/t1Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

package/expo-package/yarn.lock

@@ -3036,10 +3036,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-[email protected].1:
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.1.tgz#a7f8f3a5f2998bdd3f779d3dc82e3a0a8e0fec22"
-  integrity sha512-UnybqEl9nqDrTrvb8CU4gxDamr73Iv0M56rwxhPrTtPiWiVGpG4gddkfJVGpVGYTyCBm9CKKeNmYBktuEbeW8Q==
+[email protected].2:
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.2.tgz#26c982907728eb3ad7d3bc34f68764935596c230"
+  integrity sha512-sFH/Ed667lJksHBG1VQjeJdcukWfT8qINhCKEw6WfFbog0XeFmHzs6juuT8mjcJ9SSyo0hYAKNRE34lT8p/t1Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

package/native-package/yarn.lock

@@ -4381,10 +4381,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].1:
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.1.tgz#a7f8f3a5f2998bdd3f779d3dc82e3a0a8e0fec22"
-  integrity sha512-UnybqEl9nqDrTrvb8CU4gxDamr73Iv0M56rwxhPrTtPiWiVGpG4gddkfJVGpVGYTyCBm9CKKeNmYBktuEbeW8Q==
+[email protected].2:
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.2.tgz#26c982907728eb3ad7d3bc34f68764935596c230"
+  integrity sha512-sFH/Ed667lJksHBG1VQjeJdcukWfT8qINhCKEw6WfFbog0XeFmHzs6juuT8mjcJ9SSyo0hYAKNRE34lT8p/t1Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+import { KeyboardAvoidingViewProps, Platform, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -74,7 +74,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault, pickDocument } from '../../native';
+import { FlatList as FlatListDefault, getLocalAssetUri, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -1295,12 +1295,16 @@ const ChannelWithContext = <
           attachment.image_url &&
           isLocalUrl(attachment.image_url)
         ) {
-          const filename = file.uri.replace(/^(file:\/\/|content:\/\/|assets-library:\/\/)/, '');
+          // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+          const localAssetURI =
+            Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
+          const uri = localAssetURI || file.uri || '';
+          const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
           const contentType = lookup(filename) || 'multipart/form-data';
 
           const uploadResponse = doImageUploadRequest
             ? await doImageUploadRequest(file, channel)
-            : await channel.sendImage(file?.uri, filename, contentType);
+            : await channel.sendImage(uri, filename, contentType);
 
           attachment.image_url = uploadResponse.file;
           delete attachment.originalFile;

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
@@ -17,6 +17,7 @@ import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vw } from '../../utils/utils';
@@ -127,12 +128,21 @@ const ChannelPreviewMessengerWithContext = <
     },
   } = useTheme();
 
+  const { client } = useChatContext<StreamChatGenerics>();
+
   const displayName = useChannelPreviewDisplayName(
     channel,
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
-  const isChannelMuted = channel.muteStatus().muted;
+  const [isChannelMuted, setIsChannelMuted] = useState(() => channel.muteStatus().muted);
+
+  useEffect(() => {
+    const handleEvent = () => setIsChannelMuted(channel.muteStatus().muted);
+
+    client.on('notification.channel_mutes_updated', handleEvent);
+    return () => client.off('notification.channel_mutes_updated', handleEvent);
+  }, [client]);
 
   return (
     <TouchableOpacity

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -7,22 +7,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
-const styles = StyleSheet.create({
-  unreadContainer: {
-    alignItems: 'center',
-    borderRadius: 8,
-    flexShrink: 1,
-    justifyContent: 'center',
-  },
-  unreadText: {
-    color: '#FFFFFF',
-    fontSize: 11,
-    fontWeight: '700',
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-  },
-});
-
 export type ChannelPreviewUnreadCountProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
@@ -43,13 +27,29 @@ export const ChannelPreviewUnreadCount = <
     },
   } = useTheme();
 
+  if (!unread) return null;
+
   return (
     <View style={[styles.unreadContainer, { backgroundColor: accent_red }, unreadContainer]}>
-      {!!unread && (
-        <Text numberOfLines={1} style={[styles.unreadText, unreadText]}>
-          {unread > maxUnreadCount ? `${maxUnreadCount}+` : unread}
-        </Text>
-      )}
+      <Text numberOfLines={1} style={[styles.unreadText, unreadText]}>
+        {unread > maxUnreadCount ? `${maxUnreadCount}+` : unread}
+      </Text>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  unreadContainer: {
+    alignItems: 'center',
+    borderRadius: 8,
+    flexShrink: 1,
+    justifyContent: 'center',
+  },
+  unreadText: {
+    color: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '700',
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+  },
+});

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -178,7 +178,7 @@ export const ImageGalleryHeader = <
           ) : (
             <View style={[styles.centerContainer, centerContainer]}>
               <Text style={[styles.userName, { color: black }, usernameText]}>
-                {photo?.user?.name || t('Unknown User')}
+                {photo?.user?.name || photo?.user?.id || t('Unknown User')}
               </Text>
               {date && <Text style={[styles.date, { color: black }, dateText]}>{date}</Text>}
             </View>

package/src/components/MessageList/MessageList.tsx

@@ -541,7 +541,8 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || (!channel.initialized && !channel.offlineMode)) return null;
+    if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode))
+      return null;
 
     const lastRead = channel.lastRead();
 

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -13,28 +13,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vw } from '../../utils/utils';
 
-const styles = StyleSheet.create({
-  bottomBorder: {
-    borderBottomWidth: 1,
-  },
-  container: {
-    borderRadius: 16,
-    marginTop: 8,
-    maxWidth: 275,
-  },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    minWidth: vw(65),
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-  },
-  titleStyle: {
-    paddingLeft: 20,
-  },
-});
-
 export type MessageActionListPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
@@ -168,3 +146,26 @@ export const MessageActionList = <
 
   return <MemoizedMessageActionList {...{ alignment, messageActions }} {...props} />;
 };
+
+const styles = StyleSheet.create({
+  bottomBorder: {
+    borderBottomWidth: 1,
+  },
+  container: {
+    borderRadius: 16,
+    marginTop: 8,
+    minWidth: vw(65),
+    overflow: 'hidden',
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    minWidth: vw(65),
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  titleStyle: {
+    paddingLeft: 20,
+  },
+});