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

Terminal

npx expo install stream-chat-expo

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 @stream-io/flat-list-mvcp react-native-fs react-native-gesture-handler react-native-image-resizer react-native-reanimated react-native-svg

Terminal

npx expo install @stream-io/flat-list-mvcp @react-native-community/netinfo expo-file-system expo-image-manipulator react-native-gesture-handler react-native-reanimated react-native-svg

So what did we install precisely?

@react-native-community/netinfo for accessing device gallery.
@stream-io/flat-list-mvcp for bi-directional FlatList support.
react-native-fs to perform file operations like save, delete, etc.
react-native-gesture-handler to handle gestures within the SDK.
react-native-image-resizer to compress image uploads.
react-native-reanimated to compress image uploads.
react-native-svg for SVG support.

@react-native-community/netinfo for accessing device gallery.
@stream-io/flat-list-mvcp for bi-directional FlatList support.
expo-file-system to perform file operations like save, delete, etc.
react-native-gesture-handler to handle gestures within the SDK.
expo-image-manipulator to compress image uploads.
react-native-reanimated to compress image uploads.
react-native-svg for SVG support.

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.

@react-native-camera-roll/camera-roll for accessing device gallery.
react-native-image-crop-picker to capture images to attach them in the message.
react-native-video for Video and Audio playback support.
react-native-audio-recorder-player for Audio recording and async audio messages support.
react-native-share for Attachment sharing support.
react-native-haptic-feedback for user haptics feedback.
@react-native-clipboard/clipboard for Copy message support.
react-native-document-picker to access device media files.
react-native-quick-sqlite to enable Offline support in the app.
react-native-image-picker to use native photo picker.

expo-av for Video and Audio playback, recording and async audio messages support.
expo-media-library for accessing device gallery.
expo-image-picker to capture images to attach them in the message.
expo-sharing for Attachments sharing support.
expo-haptics for user haptics support.
expo-clipboard for Copy message support.
expo-document-picker to access device media files.
react-native-quick-sqlite to enable Offline support in the app.

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:

@react-native-camera-roll/camera-roll for gallery/photo library access.
react-native-image-crop-picker for camera access.
react-native-audio-recorder-player for microphone access for voice recording.

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>

expo-media-library for gallery/photo library access.
expo-image-picker for camera access.
expo-av for microphone access for voice recording.

An example app.json config for expo would look like this to add permissions to the Info.plist on iOS, using the config plugins:

{
  "expo": {
    "plugins": [
      [
        "expo-media-library",
        {
          "photosPermission": "$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.",
          "savePhotosPermission": "$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message."
        }
      ],
      [
        "expo-image-picker",
        {
          "cameraPermission": "$(PRODUCT_NAME) would like to use your camera to share image in a message."
        }
      ],
      [
        "expo-av",
        {
          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
        }
      ]
    ]
  }
}

For Android on Expo, most of the most permissions are added automatically by libraries that you use in your app either with config plugins or with a package-level AndroidManifest.xml. Read more here.

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:

Add the Babel plugin for react-native-reanimated to your babel.config.js file in your application folder:

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:

react-native - additional installation steps
react-native-image-crop-picker - additional installation steps
@react-native-camera-roll/camera-roll - additional installation steps

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

Terminal

npx pod-install
yarn ios

Terminal

yarn android

Terminal

yarn ios

Terminal

yarn android

Overview

Installation

Prerequisites

Add Stream’s Chat SDK and its peer dependencies

Optional Dependencies

Configuring permissions

Additional Steps