This is documentation for Stream Chat React Native SDK v5, which is no longer actively maintained. For up-to-date documentation, see the latest version (v8).

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:

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:

yarn add @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-fs react-native-gesture-handler react-native-image-resizer react-native-reanimated react-native-svg

So what did we install precisely?

Optional Dependencies

Starting from v5.35.0 the react-native-image-crop-picker and expo-image-picker is no longer a required dependency. You can use it if you want to capture images to attach them in the message else feel free to uninstall it.

There are a few optional dependencies that can be added to have more features within the SDK.

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

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:

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

<uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <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>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera to share image in a message.</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your microphone for voice recording.</string>

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:

npx pod-install
yarn ios
Previous
Overview
Next
Overview