Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Jul 5, 2024
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
40fed03
feat: use react-native-blob-util instead of the react-native-fs and m…
khushal87 Jul 3, 2024
c0dbf9d
chore: fix peerdeps and add dcos
khushal87 Jul 3, 2024
60cb54e
fix: deps version on package.json
khushal87 Jul 4, 2024
65e3ab3
docs: add migration guide for v5 to v6
khushal87 Jul 4, 2024
7eda89f
docs: add migration guide for v5 to v6
khushal87 Jul 4, 2024
714239e
docs: add migration guide for v5 to v6
khushal87 Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 219 additions & 16 deletions docusaurus/docs/reactnative/basics/installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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>
Expand All @@ -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.
Expand All @@ -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.
Expand All @@ -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'
Expand All @@ -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.
Expand All @@ -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.
Expand All @@ -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:

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading