Overview
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-native
for RN CLI applications.stream-chat-expo
for 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:
- RN CLI
- Expo
@react-native-camera-roll/camera-roll
for accessing device gallery.@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-crop-picker
to capture images to attach them in the message.react-native-image-resizer
to compress image uploads.react-native-reanimated
to compress image uploads.react-native-svg
for SVG support.stream-chat
for Chat Client.
expo-media-library
for accessing device gallery.@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-picker
to capture images to attach them in the message.expo-image-manipulator
to compress image uploads.react-native-reanimated
to compress image uploads.react-native-svg
for SVG support.stream-chat
for Chat Client.
Optional Dependencies
There are a few optional dependencies that can be added by our users to have more features within the SDK.
- RN CLI
- Expo
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.
expo-av
for Video and Audio playback, recording and async audio messages support.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.
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.