This is documentation for the release candidate Stream Chat React Native SDK v6. For the latest stable version, see the latest version (v5).

Installation

Installation and usage of our Stream Chat React Native SDK is simple and involves the following steps:

Prerequisites

First things first, make sure you have set up the development environment for React Native. You can find the official guide here.

For Expo, you can follow this guide.

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:

Terminal
yarn add stream-chat-react-native

Stream Chat React Native SDK requires installing some peer dependencies to provide you with a great chat experience. You can run the following command to install them:

Terminal
yarn add @react-native-community/netinfo react-native-gesture-handler react-native-reanimated react-native-svg

So what did we install precisely?

Opt-in features

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.

Terminal
yarn add react-native-video

Voice recording

Record and send voice messages and play them back within the chat.

Terminal
yarn add react-native-audio-recorder-player react-native-blob-util

Configuring permissions

An example AndroidManifest.xml would look like this with permissions:

  <uses-permission android:name="android.permission.RECORD_AUDIO" />

An example Info.plist would look like this with permissions:

<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your microphone for voice recording.</string>

Attachment sharing

Share attachments within the message to others.

Terminal
yarn add react-native-blob-util react-native-share

Haptic feedback

Provide haptic feedback to the user.

Terminal
yarn add react-native-haptic-feedback

Copy message

Copy the text message content to the clipboard.

Terminal
yarn add @react-native-clipboard/clipboard

Share file attachments

Share files from the device within the chat.

Terminal
yarn add react-native-document-picker

Capture image and upload attachment

Capture images from the camera and upload them as attachments in the chat.

Terminal
yarn add react-native-image-picker

Configuring permissions

On Android, an example AndroidManifest.xml would look like this with permissions:

  <uses-permission android:name="android.permission.CAMERA" />

On iOS, An example Info.plist would look like this with permissions:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera to share image in a message.</string>

Pick image using Native Image Picker

Pick gallery image using native image picker and upload them as attachments in the chat.

Terminal
yarn add react-native-image-picker

Configuring permissions

On android, there are no permissions required.

On iOS, An example Info.plist would look like this with permissions:

<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message.</string>

Built-in image media library

Pick image using built-in media library and upload them as attachments in the chat.

Terminal
yarn add @react-native-camera-roll/camera-roll

Configuring permissions

An example AndroidManifest.xml would look like this with permissions:

  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

An example Info.plist would look like this with permissions:

<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message.</string>

Offline support

Enable offline support in the app.

Terminal
yarn add @op-engineering/op-sqlite

The overall installation of the optional dependencies would look like this:

Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application.

Additional Steps

Some dependencies require us to make changes to our application for all functionalities to be available.

The most important steps to get started are:

module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ],
};

react-native-reanimated/plugin has to be listed last.

  • After installation, wrap your entry point with <GestureHandlerRootView> or gestureHandlerRootHOC:
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}

The entry point of your app exists usually either in index.js or App.tsx file. In case of navigation with Expo Router v3.x, the entry point is inside app/_layout.js.

Please also follow the steps mentioned in the links below for corresponding dependencies:

Now you should be able to run the app on simulator by running following command:

Terminal
npx pod-install
yarn ios
© Getstream.io, Inc. All Rights Reserved.