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:
Messaging and chat bubbles: Group chat with everyone in the same room
Presence indicators for participants when they join or leave the room
Load historical messages sent or received before you joined the room
Customize your name
Messages are timestamped
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
More and more PubNub developers are choosing to develop live 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.
Before running this application, be sure you have the following installed:
React Native environment setup, including:
A code editor such as Visual Studio Code
Xcode (for the build step)
Android Studio (for the build step)
If you are using Apple silicon, pay particular attention to any text that mentions "M1". If you already have a development environment setup, ensure it aligns with the versions given in the React Native setup guide, especially JDK and Node.JS.
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 can refer to our separate React Native getting started application, but that is outside of the scope of this tutorial.
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. This code is available for free and released under MIT license.
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: