Merge pull request #2673 from GetStream/develop

Next Release

docusaurus/docs/reactnative/core-components/chat.mdx

@@ -23,21 +23,45 @@ We recommend using only one instance of `Chat` provider per application unless a
 
 ```tsx
 import { StreamChat } from 'stream-chat';
-import { ChannelList, Chat, OverlayProvider } from 'stream-chat-react-native';
-
-const client = StreamChat.getInstance('api_key');
-
-export const App = () => (
-  <OverlayProvider>
-    // highlight-next-line
-    <Chat client={client}>
-      <ChannelList />
+import { ChannelList, Chat, OverlayProvider, useCreateChatClient } from 'stream-chat-react-native';
+
+// highlight-start
+const chatApiKey = 'REPLACE_WITH_API_KEY';
+const chatUserId = 'REPLACE_WITH_USER_ID';
+const chatUserName = 'REPLACE_WITH_USER_NAME';
+const chatUserToken = 'REPLACE_WITH_USER_TOKEN';
+// highlight-end
+
+const user = {
+  id: chatUserId,
+  name: chatUserName,
+};
+
+export const App = () => {
+  // highlight-start
+  const chatClient = useCreateChatClient({
+    apiKey: chatApiKey,
+    userData: user,
+    tokenOrProvider: chatUserToken,
+  });
+  // highlight-end
+
+  return (
+    <OverlayProvider>
       // highlight-next-line
-    </Chat>
-  </OverlayProvider>
-);
+      <Chat client={chatClient}>
+        <ChannelList />
+        // highlight-next-line
+      </Chat>
+    </OverlayProvider>
+  );
+};
 ```
 
+:::tip
+You can use the `useCreateChatClient` hook from `stream-chat-react-native`/`stream-chat-expo` to create a client instance and automatically connect/disconnect a user as per the example above, for simplicity.
+:::
+
 ## Context Providers
 
 `Chat` contains providers for the `ChatContext`, `ThemeContext`, and `TranslationContext`.

docusaurus/docs/reactnative/guides/custom-message-actions.mdx

@@ -58,10 +58,10 @@ messageActions={({
   editMessage, // MessageAction | null;
   error, // boolean;
   flagMessage, // MessageAction | null;
+  isMessageActionsVisible, // boolean;
   isMyMessage, // boolean;
   isThreadMessage, // boolean;
   message, // MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-  messageReactions, // boolean;
   reply, // MessageAction | null;
   retry, // MessageAction | null;
   threadReply, // MessageAction | null;

docusaurus/docs/reactnative/ui-components/overview.mdx

@@ -67,6 +67,10 @@ To disconnect a user you can call `disconnectUser` on the client.
 await client.disconnectUser();
 ```
 
+:::tip
+Alternatively, you can also use the `useCreateChatClient` hook from `stream-chat-react-native`/`stream-chat-expo` to create a client instance and automatically connect/disconnect a user.
+:::
+
 ## Creating a Channel
 
 Channels are at the core of Stream Chat, they are where messages are contained, sent, and interacted with.

examples/ExpoMessaging/components/ChatWrapper.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Chat, OverlayProvider, Streami18n } from 'stream-chat-expo';
-import { useChatClient } from '../hooks/useChatClient';
+import { Chat, OverlayProvider, Streami18n, useCreateChatClient } from 'stream-chat-expo';
 import { AuthProgressLoader } from './AuthProgressLoader';
 import { StreamChatGenerics } from '../types';
 import { STREAM_API_KEY, user, userToken } from '../constants';
@@ -12,7 +11,7 @@ const streami18n = new Streami18n({
 
 export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
   const { bottom } = useSafeAreaInsets();
-  const chatClient = useChatClient({
+  const chatClient = useCreateChatClient({
     apiKey: STREAM_API_KEY,
     userData: user,
     tokenOrProvider: userToken,
@@ -24,7 +23,7 @@ export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <OverlayProvider<StreamChatGenerics> bottomInset={bottom} i18nInstance={streami18n}>
-      <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport={true}>
+      <Chat client={chatClient} i18nInstance={streami18n}>
         {children}
       </Chat>
     </OverlayProvider>

examples/SampleApp/Gemfile.lock

@@ -163,7 +163,7 @@ GEM
       google-apis-firebaseappdistribution_v1 (~> 0.3.0)
       google-apis-firebaseappdistribution_v1alpha (~> 0.2.0)
     fastlane-plugin-load_json (0.0.1)
-    fastlane-plugin-stream_actions (0.3.67)
+    fastlane-plugin-stream_actions (0.3.69)
       xctest_list (= 1.2.1)
     ffi (1.17.0)
     fourflusher (2.3.1)
@@ -320,7 +320,7 @@ DEPENDENCIES
   fastlane
   fastlane-plugin-firebase_app_distribution
   fastlane-plugin-load_json
-  fastlane-plugin-stream_actions (= 0.3.67)
+  fastlane-plugin-stream_actions (= 0.3.69)
   rubocop-performance
   rubocop-require_tools
 

examples/SampleApp/fastlane/Pluginfile

@@ -4,4 +4,4 @@
 
 gem 'fastlane-plugin-firebase_app_distribution'
 gem 'fastlane-plugin-load_json'
-gem 'fastlane-plugin-stream_actions', '0.3.67'
+gem 'fastlane-plugin-stream_actions', '0.3.69'

examples/SampleApp/ios/Podfile.lock

@@ -1637,4 +1637,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 751ee2c534898a790da0a7dba7d623f1f21ae757
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

examples/SampleApp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sampleapp",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "private": true,
   "repository": {
     "type": "git",

examples/SampleApp/src/hooks/usePaginatedUsers.ts

@@ -121,9 +121,6 @@ export const usePaginatedUsers = (): PaginatedUsers => {
     try {
       queryInProgress.current = true;
       const filter: UserFilters = {
-        id: {
-          $nin: [chatClient?.userID],
-        },
         role: 'user',
       };
 
@@ -143,7 +140,7 @@ export const usePaginatedUsers = (): PaginatedUsers => {
         return;
       }
 
-      const res = await chatClient?.queryUsers(
+      const { users } = await chatClient?.queryUsers(
         filter,
         { name: 1 },
         {
@@ -153,33 +150,25 @@ export const usePaginatedUsers = (): PaginatedUsers => {
         },
       );
 
-      if (!res?.users) {
-        queryInProgress.current = false;
-        return;
-      }
-
-      // Dumb check to avoid duplicates
-      if (query === searchText && results.findIndex((r) => res?.users[0].id === r.id) > -1) {
-        queryInProgress.current = false;
-        return;
-      }
+      const usersWithoutClientUserId = users.filter((user) => user.id !== chatClient.userID);
 
       setResults((r) => {
         if (query !== searchText) {
-          return res?.users;
+          return usersWithoutClientUserId;
         }
-        return r.concat(res?.users || []);
+        return r.concat(usersWithoutClientUserId);
       });
 
-      if (res?.users.length < 10 && (offset.current === 0 || query === searchText)) {
+      if (usersWithoutClientUserId.length < 10 && (offset.current === 0 || query === searchText)) {
         hasMoreResults.current = false;
       }
 
       if (!query && offset.current === 0) {
-        setInitialResults(res?.users || []);
+        setInitialResults(usersWithoutClientUserId);
       }
     } catch (e) {
       // do nothing;
+      console.log('Error fetching users', e);
     }
     queryInProgress.current = false;
     setLoading(false);

examples/SampleApp/yarn.lock

@@ -6837,10 +6837,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.36.1:
-  version "5.36.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.36.1.tgz#4d3fd3354916a783b77a37c684dd8c126dfd7e10"
-  integrity sha512-5r2zIOsKE+jXkId/V0BnnO/6HY0/HSjjhS1gDrij1vTGBiTXijlDu0SD+L0fNpEsy7k5qoJMSXoyRZKlrEAAZQ==
+stream-chat-react-native-core@5.37.0:
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.37.0.tgz#39bc4c1f702bb80af2a0fdc7e6ea7fdd12a05368"
+  integrity sha512-Z/yRDVAD1e/flDnCjQG1XpNNY+YMaFLzThAeQUYfdHgFna8nrfiTOuA4/6BIharjAtWCcQ7SqTztHY0pkhRv8g==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"