Merge pull request #1693 from GetStream/develop

Next release

Author: vanGalilea

docusaurus/docs/reactnative/assets/guides/debug-mode-using-flipper-plugin/flipper_desktop_guide.png

@@ -57,7 +57,6 @@ Most if not all of the required packages now support auto-linking so setup shoul
 - [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker)
 - [`react-native-image-resizer`](https://github.com/bamlab/react-native-image-resizer)
 - [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated)
-- [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context)
 - [`react-native-share`](https://github.com/react-native-share/react-native-share)
 - [`react-native-svg`](https://github.com/react-native-svg/react-native-svg)
 
@@ -71,14 +70,14 @@ Most if not all of the required packages now support auto-linking so setup shoul
 <TabItem value='yarn'>
 
 ```bash
-yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
+yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-share react-native-svg
 ```
 
 </TabItem>
 <TabItem value='npm'>
 
 ```bash
-npm install @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
+npm install @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-share react-native-svg
 ```
 
 </TabItem>
@@ -218,7 +217,7 @@ Stream Chat for React Native is set up for parity on Expo, expo requires a diffe
 
 ```bash
 expo install stream-chat-expo
-expo install @react-native-community/netinfo expo-document-picker expo-file-system expo-haptics expo-image-manipulator expo-image-picker expo-media-library expo-sharing react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg
+expo install @react-native-community/netinfo expo-document-picker expo-file-system expo-haptics expo-image-manipulator expo-image-picker expo-media-library expo-sharing react-native-gesture-handler react-native-reanimated react-native-svg
 ```
 
 ### Additional Steps

docusaurus/docs/reactnative/assets/guides/debug-mode-using-flipper-plugin/flipper_stream_chat_react_native_banner.png

@@ -8,46 +8,49 @@ React Native Chat SDK provides OOTB support for offline mode, which means user w
 with chat even when the network is off. This is an opt-in feature that needs to be explicitely enabled on application
 level.
 
-> Offline support is currently not supported for Expo package (stream-chat-expo).
+> Offline support is currently not implemented for Expo package (stream-chat-expo).
 
 ## Features
 
-- ✅ Access to channel list and message list without network
-- ✅ Faster loading of chat since chat gets loaded from offline storage first before loading data from network
-- ✅ Syncing the local database using websocket events and sync api (once network is recovered)
-- ❌ Caching of image attachments
-- ❌ Optimistic updates to database on user action in offline mode e.g., send message, add reaction etc
+The offline storage implementation currently offers the following features:
+
+- Access to chat when Internet connection is disabled or low.
+- Faster startup times and loading, since initial data is loaded from offline storage before performing any network requests.
+- Syncing of the offline database using WebSocket events and Sync API.
+
+The following features are currently **NOT** implemented. They will be implemented gradually as part of minor releases in v5.
+
+- Optimistically update offline database during chat interactions, such as send message, add reaction, etc.
+- Access to threads in offline mode.
+- Offline caching of attachment images and profile images.
 
 ## How To Enable Offline Support
 
-- **Upgrade stream-chat dependency (optional)**
+First and foremost make sure to follow all steps from [Migrating to v5](./upgrade_helper.mdx) guide.
+To enable offline support, please follow the given steps:
 
-  If you have installed `stream-chat` dependency explicitely on your application, then upgrade it to v7
+1. **Upgrade stream-chat dependency (optional)**
 
-  ```bash
-  yarn add [email protected]
-  ```
+If you have installed `stream-chat` dependency explicitly on your application, then upgrade it to v7:
+
+```bash
+yarn add [email protected]
+```
 
-- **Add `react-native-quick-sqlite` dependency**
+2. **Add `react-native-quick-sqlite` dependency**
 
-  ```bash
+```bash
   yarn add react-native-quick-sqlite
   npx pod-install
-  ```
-
-- **Ensure unique instance of Chat component**
-
-  Until v4, you could provide separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
-  But from v5, it is necessary that you provide only one instance of `Chat` component within your application.
-  This component needs to be a parent for all the chat related components such as `ChannelList`, `Channel` or `Thread`.
+```
 
-- **Do not wait for `connectUser` call to succeed**
+3. **Do not wait for `connectUser` call to succeed**
 
-  It is important that you call `connectUser` method on chat client, before you render Chat components.
-  But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
+It is important that you call the `connectUser` method on the chat client, before you render Chat components.
+But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
 
-  - Chat components have access to current user information, which is important to store/access offline data.
-  - In case or slow or no network, Chat components will still load the chat data without waiting for connectUser to succeed.
+- Chat components have access to current user information, which is important to store/access offline data.
+- In case of slow or no network access, Chat components will still load the chat data without waiting for `connectUser` to succeed.
 
   ```tsx {7,8,16}
   const chatClient = StreamChat.getInstance('API_KEY');
@@ -75,26 +78,26 @@ level.
   };
   ```
 
-- **Add `enableOfflineSupport` prop on Chat component**
+4. **Add `enableOfflineSupport` prop on Chat component**
 
-  ```tsx
-  import { Chat } from 'stream-chat-react-native';
+```tsx
+import { Chat } from 'stream-chat-react-native';
 
-  <Chat client={chatClient} enableOfflineSupport>
-    ...
-  </Chat>;
-  ```
+<Chat client={chatClient} enableOfflineSupport>
+  ...
+</Chat>;
+```
 
-- **Reset the database when signing out the user**
+-5. **Reset the database when signing out the user**
 
-  Since SDK doesn't handle the app level authentication logic, its application's responsibility
-  to ensure resetting database when user gets logged out. This should be generally done before you
-  call `client.disconnectUser()`
+Since the SDK doesn't handle app-level authentication logic, it's the application's responsibility
+to ensure the database is reset when a user gets logged out. This should generally be done before you
+call `client.disconnectUser()`.
 
-  ```jsx
-  import { QuickSqliteClient } from 'stream-chat-react-native';
+```tsx
+import { QuickSqliteClient } from 'stream-chat-react-native';
 
-  // Sign out logic
-  QuickSqliteClient.resetDB();
-  chatClient.disconnectUser();
-  ```
+// Sign out logic
+QuickSqliteClient.resetDB();
+chatClient.disconnectUser();
+```

docusaurus/docs/reactnative/basics/getting_started.mdx

@@ -174,7 +174,6 @@ allprojects {
     }
 
     google()
-    jcenter()
     maven { url 'https://maven.google.com' }
     maven { url 'https://www.jitpack.io' }
   }

docusaurus/docs/reactnative/basics/offline_support.mdx

@@ -6,9 +6,11 @@ title: Upgrading from V4
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+This guide highlights the changes introduced from v4 to v5.
+
 ## Prop or Context Changes
 
-Following values in [`ImageGalleryContext`](https://getstream.io/chat/docs/sdk/reactnative/v5/contexts/image-gallery-context/#value) have been renamed
+The following values in [`ImageGalleryContext`](https://getstream.io/chat/docs/sdk/reactnative/v5/contexts/image-gallery-context/#value) have been renamed:
 
 - `image` -> `selectedMessage`
 - `setImage` -> `setSelectedMessage`
@@ -17,114 +19,25 @@ Following values in [`ImageGalleryContext`](https://getstream.io/chat/docs/sdk/r
 
 ## Dependency Changes
 
-- If you have installed `stream-chat` dependency explicitly on your application, then upgrade it to v7
+- If you have installed `stream-chat` dependency explicitly in your application, then upgrade it to v7:
 
   ```bash
   yarn add [email protected]
   ```
 
-- Replace [`@react-native-community/cameraroll`](https://github.com/react-native-cameraroll/react-native-cameraroll) dependency with [`@react-native-camera-roll/camera-roll`](https://www.npmjs.com/package/@react-native-camera-roll/camera-roll)
+- Replace [`@react-native-community/cameraroll`](https://github.com/react-native-cameraroll/react-native-cameraroll) dependency with [`@react-native-camera-roll/camera-roll`](https://www.npmjs.com/package/@react-native-camera-roll/camera-roll):
 
   ```bash
   yarn remove @react-native-community/cameraroll
   yarn add @react-native-camera-roll/camera-roll
   ```
 
-## Enable Offline Support
-
-Offline Support is a major opt-in feature introduced in v5 of SDK.
-
-> Offline support is currently not implemented for Expo package (stream-chat-expo).
-
-Offline storage implementation currently offers following features:
-
-- access to chat when internet is disabled
-- faster loading of chat since chat gets loaded from offline storage first before loading data from network
-- syncing of database using websocket events and sync api.
-
-Following features are currently **NOT** implemented. They will be implemented gradually as part of minor releases in v5.
-
-- optimistically update offline database during chat interactions such as send message, add reactions etc.
-- access to threads in offline mode
-- offline caching of attachment images and user images
-
-To enable offline support please follow the given steps:
-
-- **Upgrade stream-chat dependency (optional)**
-
-  If you have installed `stream-chat` dependency explicitly on your application, then upgrade it to v7
-
-  ```bash
-  yarn add [email protected]
-  ```
-
-- **Add `react-native-quick-sqlite` dependency**
-
-  ```bash
-  yarn add react-native-quick-sqlite
-  npx pod-install
-  ```
+## Unique Chat Component Instance
 
-- **Ensure unique instance of Chat component**
+Until v4, you could provide a separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
+But from v5, you must provide only one instance of the `Chat` component within your application.
+This component needs to be a parent for all the chat-related components such as `ChannelList`, `Channel` or `Thread`.
 
-  Until v4, you could provide separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
-  But from v5, it is necessary that you provide only one instance of `Chat` component within your application.
-  This component needs to be a parent for all the chat related components such as `ChannelList`, `Channel` or `Thread`.
-
-- **Do not wait for `connectUser` call to succeed**
-
-  It is important that you call `connectUser` method on chat client, before you render Chat components.
-  But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
-
-  - Chat components have access to current user information, which is important to store/access offline data.
-  - In case of slow or no network, Chat components will still load the chat data without waiting for connectUser to succeed.
-
-  ```tsx {7,8,16}
-  const chatClient = StreamChat.getInstance('API_KEY');
-  const App = () => {
-    const [isClientReady, setIsClientReady] = useState(false);
-
-    useEffect(() => {
-      const startChat = async () => {
-        const connectPromise = chatClient.connectUser(user, tokenOrTokenProvider);
-        setIsClientReady(true); // this allows components to render
-        await connectPromise();
-        // Any other post-connectUser logic you may have goes here.
-      };
-
-      startChat();
-    }, []);
-
-    if (!isClientReady) return null; // or some loading indicator;
-
-    return (
-      <Chat client={chatClient} enableOfflineSupport>
-        ...
-      </Chat>
-    );
-  };
-  ```
-
-- **Add `enableOfflineSupport` prop on Chat component**
-
-  ```tsx
-  import { Chat } from 'stream-chat-react-native';
-
-  <Chat client={chatClient} enableOfflineSupport>
-    ...
-  </Chat>;
-  ```
-
-- **Reset the database when signing out the user**
-
-  Since SDK doesn't handle the app level authentication logic, its application's responsibility
-  to ensure resetting database when user gets logged out. This should be generally done before you
-  call `client.disconnectUser()`
-
-  ```jsx
-  import { QuickSqliteClient } from 'stream-chat-react-native';
+## Enable Offline Support
 
-  // Sign out logic
-  QuickSqliteClient.resetDB();
-  chatClient.disconnectUser();
-  ```
+To enable offline support please check the [Offline Support](./offline_support.mdx) guide.

docusaurus/docs/reactnative/basics/troubleshooting.mdx

@@ -0,0 +1,75 @@
+---
+id: debug-mode-using-flipper-plugin
+sidebar_position: 2
+title: Debug Stream Chat Application using Flipper plugin
+---
+
+import FlipperBanner from '../assets/guides/debug-mode-using-flipper-plugin/flipper_stream_chat_react_native_banner.png';
+import FlipperDesktopGuide from '../assets/guides/debug-mode-using-flipper-plugin/flipper_desktop_guide.png';
+
+## Overview
+
+Flipper is a platform for debugging iOS, Android, and React Native apps. You can debug Stream Chat within your application using our Flipper Desktop app interface. This plugin will help you analyze multiple parameters of your application which are part of the Stream Chat React Native interface.
+
+<img src={FlipperBanner} />
+
+## Features
+
+The plugin supports the following features:
+
+- Viewing the authenticated client in the Chat.
+- Viewing the Channels, Message, and Thread list data as you navigate the app.
+- Copying and visualizing all the data.
+
+These features are part of the 1st version of this plugin; more features will be added in the future. If you have any ideas/suggestions, please reach out via the [SDK's discussions page](https://github.com/GetStream/stream-chat-react-native/discussions).
+
+## Installation Instructions
+
+1. First, install the Flipper plugin within your Desktop client. To do so, follow these steps:
+
+- Download the Flipper Desktop app from [here](https://fbflipper.com/).
+- After downloading the desktop app, move to the **Plugin Manager** section of the app and select the **Install Plugins** tab.
+- Search for **stream-chat-react-native**, and you will find the plugin.
+- Click on **Install** to install it.
+
+{' '}
+
+<img src={FlipperDesktopGuide} />
+
+2. Next, install `stream-chat-react-native-devtools` to your application as a dev dependency. This dependency will make communication possible between the RN Stream Chat SDK and the Flipper plugin.
+
+```
+yarn add --dev stream-chat-react-native-devtools
+```
+
+or
+
+```
+npm install --save-dev stream-chat-react-native-devtools
+```
+
+3. To interact with the Flipper Plugin you need an additional dependency `react-native-flipper`. You can install it as a dev dependency, as:
+
+```
+yarn add --dev react-native-flipper
+```
+
+or
+
+```
+npm install --save-dev react-native-flipper
+```
+
+4. Wrap the root of the component tree with `DebugContextProvider` and pass the `useFlipper` function.
+
+```tsx
+import { DebugContextProvider } from 'stream-chat-react-native';
+import { useFlipper } from 'stream-chat-react-native-devtools';
+...
+
+<DebugContextProvider useFlipper={useFlipper}>
+  {/* All other elements of the App component comes here */}
+</DebugContextProvider>
+```
+
+Kudos 🎉, everything else is handled by our SDK, the package [stream-chat-react-native-devtools](https://www.npmjs.com/package/stream-chat-react-native-devtools), and the [Flipper Plugin](https://www.npmjs.com/package/flipper-plugin-stream-chat-react-native).

docusaurus/docs/reactnative/basics/upgrade_helper.mdx

@@ -59,7 +59,13 @@ Follow the steps below to setup your apps with Firebase:
 
 ### Expo
 
-For bare workflow, all of the installation steps above will suffice. For custom managed workflow, please see [the expo installation docs at React Native Firebase](https://rnfirebase.io/#expo). React Native Firebase cannot be used in the "Expo Go" app because [it is not possible to include custom native code](https://docs.expo.dev/bare/using-expo-client/). If you are using "Expo Go" app and want notifications, you can achieve this using [Webhooks](https://getstream.io/chat/docs/react-native/webhooks_overview/?language=javascript) and a third-party push provider. See [this article](https://support.getstream.io/hc/en-us/articles/1500006478421-How-can-I-use-the-Stream-Webhook-to-send-customers-emails-based-on-Chat-events-) for an example.
+:::note
+
+If you're using Bare Workflow, please follow the installation steps above.
+
+:::
+
+React Native Firebase library is not available in the [Expo Go](https://expo.dev/client) app by default due to including much-needed native code. However, you can get things working via the [expo-dev-client](https://docs.expo.dev/development/getting-started/) library and adding [config plugins](https://docs.expo.dev/guides/config-plugins/). Please follow the [expo installation docs at React Native Firebase](https://rnfirebase.io/#installation-1) for the details.
 
 ## Get Google Service Account Credentials
 

docusaurus/docs/reactnative/guides/debug_mode_using_flipper_plugin.mdx

@@ -24,6 +24,7 @@ List of existing reactions which can be extracted from a message.
 ```tsx
 const reactions = message.latest_reactions.map(reaction => ({
   alignment: clientId && clientId === reaction.user?.id ? 'right' : 'left',
+  id: reaction?.user?.id || '',
   image: reaction?.user?.image,
   name: reaction?.user?.name || reaction.user_id || '',
   type: reaction.type,