Getting Started
The Basics section of this documentation introduces the fundamentals of Stream Chat for React Native. It will cover installing Stream Chat within your project, give you some troubleshooting tips, and provide an overview of what is possible using the library. This should be considered a primer before delving into the UI and Core Components or Customization sections. We support creating apps both using RN CLI and Expo CLI.
#
InstallationYour environment should be setup and a project created prior to beginning the installation.
#
Add Required dependenciesInstall the required packages in your React Native project.
- RN CLI
- Expo
yarn add stream-chat-react-native
# or
npm install stream-chat-react-native
npx expo install stream-chat-expo
Stream Chat has a number of peer dependencies that are required to take advantage of all of the out of the box features. It is suggested you follow the install instructions for each package to ensure it is properly setup. Most if not all of the required packages now support auto-linking so setup should be minimal. Those with known additional steps have been noted.
- RN CLI
- Expo
- RN CLI
- Expo
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 react-native-image-resizer react-native-reanimated react-native-svg
# or
npm install @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 react-native-image-resizer react-native-reanimated react-native-svg
npx expo install @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
For RNCLI, on iOS on a Mac install the pods npx pod-install ios
.
#
Version compatibilitiesTo be able to use the Stream Chat React Native SDK, a few dependencies must meet the following version requirements:
react-native | stream-chat-react-native/stream-chat-expo (min required) | react-native-reanimated (min required) | react-native-quick-sqlite (min required) |
---|---|---|---|
0.71 | 5.14.0 | 2.13.0 | 8.0.2 |
0.70 | 5.6.1 | 2.10.0 | 5.1.0 |
0.70 | 5.3.1 | 2.10.0 | 4.0.0 |
0.69 | 4.13.0 | 2.9.1 | N/A |
0.68 | 4.11.0 | 2.7.0 | N/A |
0.67 | 4.2.0 | 2.4.0 | N/A |
0.66 | 3.9.0 | 2.2.3 | N/A |
0.65 | 3.9.0 | 2.2.1 | N/A |
0.64 | 3.6.2 | 2.2.0 | N/A |
0.63 | 3.0.0 | 2.2.0 | N/A |
#
Platform compatibilitiesWe only support Android and iOS as platforms for the React Native SDK. We do not support Web currently, but this is in our backlog, and we plan to take this up in the future. As an alternative, you can use Stream's React SDK for Web. The React SDK follows the same API and Component convention and is very similar to the React Native SDK.
#
Additional StepsFor some of the packages listed below, there are additional steps required to setup the package:
react-native-reanimated
- additional installation stepsAdd the Reanimated babel plugin to your babel.config.js:
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin',
],
};react-native-gesture-handler
- additional installation stepsRNGH requires the package to be imported at the top of the entry file before anything else, this is usually your
App.tsx
orindex.js
file.import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);Also wrap your entry point with
<GestureHandlerRootView>
orgestureHandlerRootHO
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { OverlayProvider } from 'stream-chat-react-native';
export default function App() {
return (
<GestureHandlerRootView>
<OverlayProvider>{/* Your app code goes here */}</OverlayProvider>
</GestureHandlerRootView>
);
}Please take a look at our Example Application for reference.
react-native
- additional installation stepsreact-native-image-crop-picker
- additional installation stepsreact-native-camera-roll
- additional installation steps
note
If you are planning to use file picker functionality, make sure you enable iCloud capability in your app - Enable iCloud capability
#
Add Optional Dependencies#
Video playing supportInstall react-native-video
for RN CLI or expo-av
for Expo CLI in your React Native project.
Available in stream-chat-react-native >= v4.7.0
Installing this package allows you to play the video and audio files/attachments in the chat. Otherwise by default, video and audio files will be opened and downloaded through the default browser of the device.
- RN CLI
- Expo
yarn add react-native-video
# or
npm install react-native-video
npx expo install expo-av
We require ExoPlayer to be the media player on Android. To make react-native-video
use ExoPlayer, add the following in android/settings.gradle
:
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
#
Sharing attachmentsInstall react-native-share
for RN CLI or expo-sharing
in your React Native project.
Installing this package will allow your users to share attachments from the gallery using the native sharing interface on their devices.
- RN CLI
- Expo
yarn add react-native-share
# or
npm install react-native-share
npx expo install expo-sharing
#
Haptic feedbackInstall react-native-haptic-feedback
for RN CLI or expo-haptics
for Expo CLI in your React Native project.
Installing this package will enable haptic feedback when scaling images in the image gallery if the scaling hits the higher or lower limits for its value.
- RN CLI
- Expo
yarn add react-native-haptic-feedback
# or
npm install react-native-haptic-feedback
npx expo install expo-haptics
#
Copying messagesInstall @react-native-clipboard/clipboard
for RN CLI or expo-clipboard
for Expo ClI to be able to copy messages to the clipboard.
- RN CLI
- Expo
yarn add @react-native-clipboard/clipboard
# or
npm install @react-native-clipboard/clipboard
npx expo install expo-clipboard
#
File Uploads through file pickerInstall react-native-document-picker
for RN CLI or expo-document-picker
for Expo CLI to access the file picker and upload the file.
- RN CLI
- Expo
yarn add react-native-document-picker
# or
npm install react-native-document-picker
npx expo install expo-document-picker
#
AndroidX SupportAndroidX is a major step forward in the Android ecosystem, and the old support library artifacts are being deprecated. For 0.60, React Native has been migrated over to AndroidX. This is a breaking change, and your native code and dependencies will need to be migrated as well.
(Reference: https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support)
Dependencies such as react-native-document-picker
, react-native-gesture-handler
, and react-native-reanimated
don't have AndroidX support.
But an awesome tool named jetifier is quite useful to patch these dependencies with AndroidX support.