React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTOverview
Built on top of the Stream Chat API, the Stream Chat React Native SDK components include everything you need to build feature-rich and high-functioning chat user experiences out of the box.
We have component libraries available for both RN CLI and Expo. Each approach includes an extensive set of fast performing and customizable UI components and support which allow you to get started quickly with little to no plumbing required. The libraries support:
- Rich media messages
- Reactions
- Threads and quoted replies
- Text input commands (ex: Giphy, emojis and @mentions)
- Image and file uploads
- Video playback
- Read state and typing indicators.
- Channel and message lists
- Push (APN or Firebase)
- Offline storage
- and a lot more.
Before getting started with our docs, we recommend going through our tutorials for our React Native SDK.
Architecture
Stream Chat React Native SDK primarily uses the Stream Chat client to connect to and communicate with the Stream API.
The full JavaScript client docs should be referenced for detailed information on directly using the client.
Do not install the stream-chat dependency externally. This may lead to problems while using our SDK. Our SDK has it as a development dependency, so you need not install it externally.
The Stream Chat React Native SDK is segregated into two separate packages:
stream-chat-react-nativefor RN CLI applications.stream-chat-expofor Expo CLI applications.
We recommend using the corresponding package for the respective CLI that the application uses.
Our SDK components are highly customizable for both the interfaces. Unless your UI is completely different from the common industry standard, you should be able to customize the built-in components to match your needs.
The UI SDKs provide both ready-made components that you can directly integrate (and customize) in your apps, or you can build your own, by reacting to the state we expose and re-using our components as building blocks, if needed.
Dependencies
The SDK tries to keep the list of external dependencies to a minimum, these are the dependencies currently used:
@react-native-community/netinfofor accessing device gallery.@stream-io/flat-list-mvcpfor bi-directional FlatList support.react-native-fsto perform file operations like save, delete, etc.react-native-gesture-handlerto handle gestures within the SDK.react-native-image-crop-pickerto capture images to attach them in the message.react-native-image-resizerto compress image uploads.react-native-reanimatedto compress image uploads.react-native-svgfor SVG support.stream-chatfor Chat Client.
@react-native-community/netinfofor accessing device gallery.@stream-io/flat-list-mvcpfor bi-directional FlatList support.expo-file-systemto perform file operations like save, delete, etc.react-native-gesture-handlerto handle gestures within the SDK.expo-image-pickerto capture images to attach them in the message.expo-image-manipulatorto compress image uploads.react-native-reanimatedto compress image uploads.react-native-svgfor SVG support.stream-chatfor Chat Client.
Optional Dependencies
There are a few optional dependencies that can be added by our users to have more features within the SDK.
@react-native-camera-roll/camera-rollfor accessing device gallery.react-native-videofor Video and Audio playback support.react-native-audio-recorder-playerfor Audio recording and async audio messages support.react-native-sharefor Attachment sharing support.react-native-haptic-feedbackfor user haptics feedback.@react-native-clipboard/clipboardfor Copy message support.react-native-document-pickerto access device media files.react-native-quick-sqliteto enable Offline support in the app.react-native-image-pickerto use native photo picker.
expo-avfor Video and Audio playback, recording and async audio messages support.expo-media-libraryfor accessing device gallery.expo-sharingfor Attachments sharing support.expo-hapticsfor user haptics support.expo-clipboardfor Copy message support.expo-document-pickerto access device media files.react-native-quick-sqliteto 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.
Choosing the Right SDK
When integrating with our chat platform, you get to choose which SDK you would like to integrate with.
Our best options are either the RN CLI or Expo SDKs. We suggest you choose what is closest to your current App.
All the components exported by both the platforms are same across both the SDKs.
Upgrading and Versioning Strategy
The Stream Chat React Native SDK adheres to the semantic versioning rules.
- Bug fixes and behavior improvements cause patch version bump.
- New features are shipped with an increased minor version.
- Incompatible changes in the API will cause a major version increase.
Occasionally, the SDK can include visual changes (whitespace, color changes, sizing, etc) in minor versions, as we are continuously improving the default look of our UI components. Bumping the major version for such changes would not be practical.
Platform Compatibilities
We 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.
Sample Apps
We have created some of the sample apps to help understand the usage of the Stream Chat React Native SDK. They can be found in the examples directory of the main repository. Apart from the samples we use for internal development, we also provide some small clone projects like a Slack clone and an iMessage clone. You can check out the code in our repository and even run the apps yourself.