Build a Chat App with PubNub's Chat SDK for React Native

When developing an application with chat, React Native allows you to develop for both Android and iOS from a single code base.

This React Native chat app tutorial will walk you through developing a React Native chat app using the PubNub React and Javascript SDKs with the following features:

  • Group chat with everyone in the same room

  • Presence indicators for participants when they join or leave the room

  • Load historical messages sent before you joined the room

  • Customize your name

  • Runs on Android and iOS from the same codebase

The source code for this application can be found on Github at https://github.com/PubNubDevelopers/GettingStarted-ReactNative-SDK-Tutorial 

This is a Getting Started tutorial and only scratches the surface of what you can achieve with the PubNub SDK. See our other tutorials to add features like whiteboards, 1:1 chat, message reactions, push notifications or location tracking.

1

Why Build a React Native Chat App?

More and more PubNub developers are choosing to develop chat apps with React Native. Applying React principles to mobile development, React Native allows developers to create fast, responsive and beautiful applications on both Android and iOS from the same code base.

As React becomes an increasingly popular choice for web developers, so to does React Native become a good choice for those same developers now targeting mobile and PubNub allows you to easily add chat to your React Native app.

Prerequisites

Before running this application, be sure you have the following installed:

To target iOS, pay particular attention to the “Note for Mac M1 users”, if you are running on Apple silicon.

The PubNub SDKs support applications created with the React Native CLI or the Expo CLI however this tutorial will concentrate on the React Native CLI.

Those developers targeting Expo Go should be able to copy and paste the code from this tutorial’s App.js and styles.js, but this is outside of the scope of this tutorial. 

Download Source Application

This tutorial takes a simple but functional chat app written with React Native and shows how it was developed. You are free to follow the React Native chat tutorial however works for you, either browse through the finished code or add the functionality progressively by checking out the tutorial branch.

In a terminal, navigate to an empty folder.  Enter the following command to clone the repository:

And navigate to the application folder:

Install the applications dependencies

To check you have everything set up correctly, you should now be able to build the app for both Android and iOS (remember that iOS development will require a mac).

(optional) The main git branch contains the completed version of this tutorial.  If you would like to add the functionality described in this tutorial progressively into the app then please check out the following tutorial branch: