feat: use react-native-blob-util instead of the react-native-fs and make it optional dependency (#2578)

* feat: use react-native-blob-util instead of the react-native-fs and make it optional dependency

* chore: fix peerdeps and add dcos

* fix: deps version on package.json

* docs: add migration guide for v5 to v6

* docs: add migration guide for v5 to v6

* docs: add migration guide for v5 to v6

Author: khushal87

docusaurus/docs/reactnative/basics/installation.mdx

@@ -8,13 +8,13 @@ import TabItem from '@theme/TabItem';
 
 Installation and usage of our Stream Chat React Native SDK is simple and involves the following steps:
 
-### Prerequisites
+## Prerequisites
 
 First things first, make sure you have set up the development environment for React Native. You can find the official guide [here](https://reactnative.dev/docs/environment-setup).
 
 For Expo, you can follow [this guide](https://docs.expo.dev/get-started/installation/).
 
-### Add Stream's Chat SDK and its peer dependencies
+## Add Stream's Chat SDK and its peer dependencies
 
 In order to install the Stream Chat React Native SDK, run the following command in your terminal of choice:
 
@@ -56,15 +56,15 @@ Stream Chat React Native SDK requires installing some peer dependencies to provi
 <TabItem value='rncli'>
 
 ```bash title="Terminal"
-yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-fs react-native-gesture-handler react-native-image-crop-picker @bam.tech/react-native-image-resizer react-native-reanimated react-native-svg
+yarn add @react-native-camera-roll/camera-roll @react-native-community/netinfo react-native-gesture-handler react-native-image-crop-picker @bam.tech/react-native-image-resizer react-native-reanimated react-native-svg
 ```
 
 </TabItem>
 
 <TabItem value='expo'>
 
 ```bash title="Terminal"
-npx expo install @stream-io/flat-list-mvcp @react-native-community/netinfo expo-file-system expo-image-manipulator expo-image-picker expo-media-library react-native-gesture-handler react-native-reanimated react-native-svg
+npx expo install @react-native-community/netinfo expo-image-manipulator expo-image-picker expo-media-library react-native-gesture-handler react-native-reanimated react-native-svg
 ```
 
 </TabItem>
@@ -83,9 +83,7 @@ values={[
 <TabItem value='rncli'>
 
 - [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll) for accessing device gallery.
-- [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery.
-- [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support.
-- [`react-native-fs`](https://github.com/itinance/react-native-fs) to perform file operations like save, delete, etc.
+- [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for SDK to respond to network changes.
 - [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to handle gestures within the SDK.
 - [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) to capture images to attach them in the message.
 - [`@bam.tech/react-native-image-resizer`](https://github.com/bamlab/react-native-image-resizer) to compress image uploads.
@@ -96,9 +94,7 @@ values={[
 <TabItem value="expo">
 
 - [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/) for accessing device gallery.
-- [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery.
-- [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support.
-- [`expo-file-system`](https://docs.expo.dev/versions/latest/sdk/filesystem/) to perform file operations like save, delete, etc.
+- [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for SDK to respond to network changes.
 - [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to handle gestures within the SDK.
 - [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/) to capture images to attach them in the message.
 - [`expo-image-manipulator`](https://docs.expo.dev/versions/latest/sdk/imagemanipulator/) to compress image uploads.
@@ -108,9 +104,214 @@ values={[
 </TabItem>
 </Tabs>
 
-### Optional Dependencies
+## Opt-in features
 
-There are a few optional dependencies that can be added to have more features within the SDK.
+There are a few features that can be optionally added within the SDK, which would need additional dependencies to be installed. These features are:
+
+### Video playing
+
+Play video and audio attachments within messages in the chat.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add react-native-video
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install expo-av
+```
+
+</TabItem>
+
+</Tabs>
+
+### Voice recording
+
+Record and send voice messages and play them back within the chat.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add react-native-audio-recorder-player react-native-blob-util
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install expo-av
+```
+
+</TabItem>
+
+</Tabs>
+
+### Attachment sharing
+
+Share attachments within the message to others.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add react-native-blob-util react-native-share
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install expo-sharing
+```
+
+</TabItem>
+
+</Tabs>
+
+### Haptic feedback
+
+Provide haptic feedback to the user.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add react-native-haptic-feedback
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install expo-haptics
+```
+
+</TabItem>
+
+</Tabs>
+
+### Copy message
+
+Copy the text message content to the clipboard.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add @react-native-clipboard/clipboard
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install expo-clipboard
+```
+
+</TabItem>
+
+</Tabs>
+
+### Share file attachments
+
+Share files from the device within the chat.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add react-native-document-picker
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install expo-document-picker
+```
+
+</TabItem>
+
+</Tabs>
+
+### Offline support
+
+Enable offline support in the app.
+
+<Tabs
+  defaultValue='rncli'
+  groupId='rn-platform'
+  values={[
+    { label: 'RN CLI', value: 'rncli' },
+    { label: 'Expo', value: 'expo' },
+  ]}
+>
+<TabItem value='rncli'>
+
+```bash title="Terminal"
+yarn add @op-engineering/op-sqlite
+```
+
+</TabItem>
+<TabItem value='expo'>
+
+```bash title="Terminal"
+npx expo install @op-engineering/op-sqlite
+```
+
+</TabItem>
+
+</Tabs>
+
+The overall installation of the optional dependencies would look like this:
 
 <Tabs
 defaultValue='rncli'
@@ -124,6 +325,7 @@ values={[
 
 - [`react-native-video`](https://github.com/react-native-video/react-native-video) for Video and Audio playback support.
 - [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and async audio messages support.
+- [`react-native-blob-util`](https://github.com/RonRadtke/react-native-blob-util) to perform file operations like save, delete, while sharing or access the cache directory while audio recording.
 - [`react-native-share`](https://github.com/react-native-share/react-native-share) for Attachment sharing support.
 - [`react-native-haptic-feedback`](https://github.com/junina-de/react-native-haptic-feedback) for user haptics feedback.
 - [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard) for Copy message support.
@@ -134,6 +336,7 @@ values={[
 <TabItem value="expo">
 
 - [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback, recording and async audio messages support.
+- [`expo-file-system`](https://docs.expo.dev/versions/latest/sdk/filesystem/) to perform file operations like save, delete, while sharing or access the cache directory while audio recording.
 - [`expo-sharing`](https://docs.expo.dev/versions/latest/sdk/sharing/) for Attachments sharing support.
 - [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) for user haptics support.
 - [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/) for Copy message support.
@@ -147,7 +350,7 @@ values={[
 Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application.
 :::
 
-### Configuring permissions
+## Configuring permissions
 
 Some dependencies(if you are using them on your application), require you to add additional permissions to the `Info.plist` file in iOS and `AndroidManifest.xml` file in Android. Please follow the steps mentioned in the links below for corresponding dependencies:
 
@@ -232,7 +435,7 @@ For Android on Expo, most of the most permissions are added automatically by lib
 </TabItem>
 </Tabs>
 
-### Additional Steps
+## Additional Steps
 
 Some dependencies require us to make changes to our application for all functionalities to be available.
 
@@ -327,15 +530,15 @@ values={[
 <TabItem value="iOS">
 
 ```bash title="Terminal"
-yarn ios
+yarn run ios
 ```
 
 </TabItem>
 
 <TabItem value="android">
 
 ```bash title="Terminal"
-yarn android
+yarn run android
 ```
 
 </TabItem>