React Native Chat App Tutorial

Build a mobile chat application similar to Facebook Messenger or Telegram using Stream’s React Native Chat SDK library. By the end of this tutorial, you will have a fully functioning mobile app with support rich messages, reactions, threads, image uploads and videos.

We are also going to show how easy it is to make customizations to the React Native Chat components that ship with this library and their styling.

Example chat conversation with attachments
Example chat
In-app messaging options

Create App And Install Dependencies

To get started with this tutorial, make sure you have set up your development environment for React Native. The Stream Chat React Native SDK supports apps created with the React Native CLI as well as apps created with Expo.

To get started, create an application with either the React Native CLI, or the Expo CLI and install the necessary dependencies:

When prompted, select one of the blank templates.

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.

Some dependencies require us to make changes to our application for all functionalities to be available. Please follow the steps highlighted in our Getting Started guide.

The most important steps to get started are:

  • Import react-native-gesture-handler at the top of your index.js file. It should look as follows:

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

Setup Basic Navigation Stack

The Stream Chat SDK does not handle navigation, but libraries like React Navigation makes it easy for us to set up a stack navigator, and the three screens we need for our application.

Please install the following packages to get started with React Navigation, as mentioned in their documentation

We'll set up a simple Navigation stack to hold the necessary screens for navigation in our app, and start with a basic HomeScreen, which we will replace later with Chat related screens.

You can simply copy-paste following code in App.js file.

Step 2

As mentioned in RNGH documentation, we also need to configure GestureHandlerRootView component. Although react-navigation library already use GestureHandlerRootView as a wrapper to enable gesture interactions. So for this tutorial, you don't need this step. But if you are using a native navigation library like wix/react-native-navigation you need to make sure that every screen is wrapped with GestureHandlerRootView.

Setup up Test Channels and Test Users (Optional)

If you have created a new app via GetStream dashboard, you will need to create few test channels and test users to see chat in action. You can easily do so from Chat Explorer. We would recommend you to create at least two three channels and three test users for nice tutorial experience.

NOTE: Don't forget to add the users as members to the channels you created.

If you prefer to create channels and users programatically, please check the documentation around Creating Channels and Creating Users.

Add Stream Chat to the application

The first thing we need to set up is the chat client, which is the low level JavaScript client used by the SDK to communicate with the Stream Chat service. The chat client is a JavaScript class object that we for the sake of simplicity in this tutorial will keep as a globally accessible variable. getInstance is a static method that takes apiKey as parameter and returns a singleton instance of the chat client. You can find apiKey on an GetStream dashboard for your app.

Let's create a separate file chatConfig.js to store all the config values. Generally you will want to store them in environment variables.

To keep things clean, let's create a separate react hook useChatClient.js. This hook will be responsible for connecting the user to chat and returning a boolean flag to indicate whether the client is connected.

Now we can add the logic for connecting the user. We'll use the connectUser method of the chat client to connect the user. When we say "connect", we are basically establishing a WebSocket connection with Stream backend so that user will start receiving WebSocket events for messages, reactions etc

connectUser function required two parameters:

  • User object: Must have an id field. User Ids can only contain characters a-z, 0-9, and special characters @, _ and -. It can have as many custom fields as you want, as long as the total size of the object is less than 5KB
  • User Token: The user authentication token. See Tokens & Authentication for details

In real applications, you will want to store user id in local storage and fetch the token from your backend.

But for the sake of tutorial, we will just add the userId and user token to chatConfig.js file.

And now we can use these configs to connect the user to chat as follows:

Now useChatClient hook is ready to be integrated with our navigation stack. We will use the clientIsReady flag to determine whether to render the chat components or not.

Configure OverlayProvider Component

The OverlayProvider is the highest level of the Stream Chat components and must be used near the root of your application (outside of any navigation stack). The OverlayProvider allows users to interact with messages on long press above the underlying views, use the full screen image viewer, and use the AttachmentPicker as a keyboard-esk view. The OverlayProvider can be used with no props provided but there are a plethora of props for customizing the components in the overlay.

If you are seeing some error at this point, please refer to our troubleshooting guide

Configure Chat Component

Chat component mainly acts as provider of chatClient to the rest of the underlying components. It also takes care of the network connectivity, AppState handling etc.

You can choose to wrap your entire application in Chat similar to what is required for the OverlayProvider, or you can implement Chat at the screen level. Chat has one required prop - client, which is the instance of StreamChat you created.

Configure Channel List Component

Stream Chat for React Native provides a ChannelList component out of the box for displaying a list of channels.

Before we configure this component, let's first set up a screen for the channel list within the existing navigation stack. We will simply rename HomeScreen to ChannelListScreen.

Step 2

Now we can render ChannelList component within ChannelListScreen.

ChannelList can be used with no props and will return all of the channels the set user has access to. Although in practical applications, you will probably want to only show the channels that current user is member of. For such filtering purpose, you can provide a filters prop to ChannelList which will filter the channels.

If your application does not have any channels yet, you can create them via Chat Explorer on dashboard.

Additionally ChannelList component also takes sort prop for sorting the channels, and options props to provide additional query options. Please check the documentation for Querying Channels. For more information and various use cases of filters, sort and options.

Step 2

You can add the press handler for the list item within the ChannelList component using a prop - onSelect. And this is where you can add the logic for navigating to the channel screen, where we will render the channel header, message list, input box etc. Let's implement the basic ChannelScreen component and logic for navigating from ChannelList to Channel Screen.

Configure Channel Component

The channel screen will comprise three main components:

  • MessageList component used to render the list of messages sent in a channel.
  • MessageInput component used to render the input box needed to send messages, images, files, and commands to a channel.
  • Channel component that holds all data related to a channel. It also acts as a bridge between MessageList and MessageInput component.

The Channel component takes the channel as a prop. The MessageList and MessageInput components don't need any props to be set, and we'll use the defaults set for these components.

At this point, you should be able to make use of various chat features like sending messages, uploading files, sending images, sending commands etc. as shown below.

Threads are a feature that allows you to start a conversation on a particular message in a message list, similar to what Slack offers.

Let's first setup a separate screen for thread within our navigation stack.

As explained in the previous section, when a user long presses on a message, it opens an overlay where the user can add a reaction and also can see a bunch of actions for the message. MessageList component accepts a prop function onThreadSelect which gets called when a user selects "Thread Reply" action on the message overlay.

You can now long press on a message and select "Thread Reply" action to open thread screen, which we will configure in the next step.

Configure Thread Screen

React Native Chat SDK provides a Thread component to easily configure thread screen for a message. This component needs to be wrapped inside Channel component with a boolean prop threadList set to true. This way, the Channel component is aware that it is being rendered within a thread screen and can avoid concurrency issues.

Thread Screen

How Can You Customize Chat UI

Until now we have concluded the basic setup of chat within the application.

Although every application has a different UI and UX requirements, and the default designs are not always suitable for your application. Stream's React Native Chat is designed to be flexible and easily customizable.

Every underlying component within the chat SDK can be customized by passing a custom component as a prop to one of the core components, such as ChannelList, Channel or OverlayProvider depending on who the parent of that UI component is. This way, you can either fully customize the necessary UI component or wrap the default component with a custom view. You will have access to necessary data within your custom component via props and context.

You can check which contexts are available in the documentation for each core component.

Additionally you can also style the default component by simply providing a theme object containing custom styles.

We have demonstrated the power of Stream Chat React Native SDK by building open source clones of some popular chat applications such as Whatsapp, Slack and iMessage. Source code for all these projects is available under react-native-samples repository.

Chat Clones

In the following sections, we will walk through some examples that will cover the basics around customizations and theming.

Customize ChannelList

ChannelList is a FlatList of channels. To customize the channel list item, you can pass a prop Preview to ChannelList component. Default value of the Preview prop is ChannelPreviewMessenger component, basically the default UI component.

Objective: Add a light blue background for unread channels.

Let's start by creating a custom component for the list item, which simply returns the default UI component ChannelPreviewMessenger.

Unread count on channel can be accessed via unread prop. We will use this count to conditionally add a light blue background for unread channels.

You won't see any background color change for unread channels yet, since ChannelPreviewMessenger has a white background by default. Thus, we will need to first override the default background color to transparent to make the wrapped view background visible. To achieve this, we will use the theming system provided by the stream-chat-react-native library. You can find all the themeable properties in theme.ts file.

Step 2

Similarly, along with of customizing the entire list item component, you can also customize the individual components within the list item. E.g., PreviewStatus, PreviewAvatar, PreviewMessage etc. You can use the visual guide to find out which components you can customize.

Customize Message List

Every component within MessageList and MessageInput can be customized by passing a custom component as a prop to Channel component.

Objective: Replace default message UI with custom component

The most common use case of customizing the MessageList is to have a custom UI for the message. You can do so by providing a prop MessageSimple to Channel component as shown below.

Now that we have configured the component, let's render the text of the message on the UI. You can access the message object from the MessageContext context. MessageContext also gives you access to a boolean isMyMessage which we can use to style the message UI conditionally.

You can also access plenty of other useful properties and default call to action handlers from this context such as handleDeleteMessage, handleResendMessage, onLongPress etc. Please check the API documentation for MessageContext for the full list.

Step 1

This is a really simplified version of custom message UI which only displays text. You can obviously add required functionality such as onPress, onLongPress handlers etc according to your needs. But generally, you wouldn't need to customize the entire message UI, but only the required parts such as MessageStatus, MessageAvatar etc. For this purpose, you can check the visual guide to decide which prop to pass to the Channel component. You can access MessageContext at every message level component.

Also, we would recommend you to check the following guides for a bit more advanced customizations:

Conclusion

That concludes the customization section for React Native Chat SDK. Now you should have a good overview of how to do a basic setup around chat components, and customize them as per your design/UX requirements. We have covered only the basic things, but the possibilities are endless.

Final Thoughts

In this chat app tutorial we built a fully functioning React Native messaging app with our React Native SDK component library. We also showed how easy it is to customize the behavior and the style of the React Native chat app components with minimal code changes.

Both the chat SDK for React Native and the API have plenty more features available to support more advanced use-cases such as push notifications, content moderation, rich messages and more. Please check out our Android tutorial too. If you want some inspiration for your app, download our free chat interface UI kit.

Give us Feedback!

Did you find this tutorial helpful in getting you up and running with React Native for adding chat to your project? Either good or bad, we’re looking for your honest feedback so we can improve.

Kiddom logo

We’ve been going at lightspeed to build more communication functionality into Kiddom. The only way to achieve this in four months was to do a chat integration with Stream because we needed to do it reliably and at scale.

Head of Product, Kiddom profile picture

Nick Chen

Head of Product, Kiddom

Next Steps

Start your 30-Day Chat trial to try out all our Chat product has to offer. No commitment or credit card required. If you want a custom plan or have questions, we are eager to talk with you.

Activity Feeds

Build any kind of feed without the headache of scalability or reliability of your feeds.

Learn more →
Enterprise

99.999% Uptime SLA, Industry leading compliance and security best practices.

Learn more →