React Native Introduction

This section will help you to build any type of chat or messaging experience for a react-native application. There are two important building blocks for react-native integration, we have made them available as npm packages:

• Chat API client - this is the interface between Chat rest APIs and your chat components, built using plain javascript. It makes it very easy to communicate with chat APIs e.g., sending a message, connecting to chat, creating channels etc.

  • Source - https://github.com/GetStream/stream-chat-js

  • npm - https://www.npmjs.com/package/stream-chat

• React Native Component SDK - This provides ready-made UI components that can simply be plugged into your app without building your own UI components. We provide two separate packages to support both react-native and Expo. Both packages rely on the JS client under the hood.

  • React Native SDK - https://github.com/GetStream/stream-chat-react-native

  • Expo SDK - https://github.com/GetStream/stream-chat-expo

We recommend you use one of our component SDKs, react-native or expo, depending on your stack. Chat applications have a lot of moving parts and the Chat Component SDK handles all the stateful chat logic for you to make integration easy. Furthermore, the components offered are highly customisable allowing you to seamlessly incorporate your chat application into your existing application experience. That being said, for various reasons you may choose to build all of your chat UI components yourself, in which case you can simply use the Chat API client and not the Chat Component SDK.

Before reviewing the Chat API docs, we recommend having a look at the tutorials and sample apps.

This guide quickly brings you up to speed on using Stream’s Chat API before you move on and get started. The API is flexible and allows you to build any type of chat or messaging application.

The Stream Chat API client is available as an npm package and also available via yarn.

After installing the package, import the StreamChat module into your project, and you're ready to go:

Let's get started by initialising the client and setting the current user:

The above snippet is for an in-browser or mobile integration. Server-side API calls are a little different, but this is covered in detail server side client documentation.

NOTE: Usage of StreamChat.getInstance() available since stream-chat-js@2.12.0. This new Singleton pattern allows you to instantiate a unique StreamChat client, i.e create a StreamChat instance and retrieve it wherever you need it on your app to perform API calls. After calling it once, any following getInstance( call will return the initial StreamChat instance. This will prevent you from accidentally creating multiple StreamChat instances, opening multiple WebSockets, and driving up your concurrent connections unnecessarily.

Let’s continue by initialising your first channel. A channel contains messages, a list of people that are watching the channel, and optionally a list of members (for private conversations). The example below shows how to set up a channel to support chat for a group conversation:

As shown in code-snippet above, you can initialise a channel either by providing

• ID for channel

• OR list of members for channel. In this case, id will be auto-generated on backend for the channel. Please note that, you can't add or remove members from channel created using members list .

The channel type controls the settings we’re using for this channel.

There are 5 default types of channels:

• livestream
• messaging
• team
• gaming
• commerce

These five options above provide you with sensible defaults for those use cases. You can also define custom channel types if Stream Chat defaults don’t work for your use-case.

The third argument is an object containing the channel data. You can add as many custom fields as you would like as long as the total size of the object is less than 5KB.

Please read more about channel operations at Channel docs.

Now that we have the channel set up, let's send our first chat message:

Similar to users and channels, the sendMessage method allows you to add custom fields. When you send a message to a channel, Stream Chat automatically broadcasts to all the people that are watching this channel and updates in real-time. You can also add attachments to the message, please check our Messages docs for details.

This is how you can listen to events on the client-side and update the UI for a channel dynamically:

Please read more about events at Event docs.

Now that you have basic understanding of the building blocks of our chat API, you can move on to react-native integration. Following resources should help you get started:

• React native chat tutorial

• Getting Started Guide

We would also recommend you to take a deep dive into our Chat API, by following next steps in navigation on left side.