Merge pull request #1702 from GetStream/docs/fix-grammar-and-editing

docs: fix grammar and formatting

Author: vanGalilea

docusaurus/docs/reactnative/basics/offline_support.mdx

@@ -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/upgrade_helper.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,27 +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
   ```
 
-## Offline Support
-
-Offline Support is a major opt-in feature introduced in v5 of SDK.
+## Unique Chat Component Instance
 
-This feature allows users to:
+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`.
 
-- 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.
+## Enable Offline Support
 
 To enable offline support please check the [Offline Support](./offline_support.mdx) guide.

docusaurus/docs/reactnative/guides/debug_mode_using_flipper_plugin.mdx

@@ -9,63 +9,67 @@ import FlipperDesktopGuide from '../assets/guides/debug-mode-using-flipper-plugi
 
 ## Overview
 
-Flipper is a platform for debugging iOS, Android and React Native apps. You can debug Stream Chat within your application by using our interface within the Flipper Desktop app. This will help you analyze multiple parameters of the application which are a part of Stream Chat React Native interface.
+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:
+## Features
+
+The plugin supports the following features:
 
 - Viewing the authenticated client in the Chat.
-- Viewing the Channels, Message and Thread list data as we navigate through the screen.
+- 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, may you have any ideas/suggestions, please reach out via the [SDK's discussions page](https://github.com/GetStream/stream-chat-react-native/discussions)
+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
 
-## How to do so?
+1. First, install the Flipper plugin within your Desktop client. To do so, follow these steps:
 
-- Firstly, you would need to 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.
 
-  - Download the Flipper Desktop app from [here](https://fbflipper.com/).
-  - After downloading the desktop app, move to **Plugin Manager** section of the app and then select the **Install Plugins** tab.
-  - Search for **stream-chat-react-native** and you will find this plugin.
-  - Click on Install to install it.
+{' '}
 
-  <img src={FlipperDesktopGuide} />
+<img src={FlipperDesktopGuide} />
 
-- Next, we will need to 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.
+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
-  ```
+```
+yarn add --dev stream-chat-react-native-devtools
+```
 
-  or
+or
 
-  ```
-  npm install --save-dev stream-chat-react-native-devtools
-  ```
+```
+npm install --save-dev stream-chat-react-native-devtools
+```
 
-- To interact with the Flipper Plugin you need an additional dependency `react-native-flipper`. You can install it as a dev dependency, as:
+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
-  ```
+```
+yarn add --dev react-native-flipper
+```
 
-  or
+or
 
-  ```
-  npm install --save-dev react-native-flipper
-  ```
+```
+npm install --save-dev react-native-flipper
+```
 
-- Wrap `DebugContextProvider` to the root of the component tree to the App component and pass the `useFlipper` function.
+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';
-  ...
+```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>
-  ```
+<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).