Android Live Chat with React Native and PHP


Messaging apps are becoming more and more popular as a means through which to connect with friends and family. They're convenient and provide an easy and affordable means of communication. A recent study by Statista revealed that the current number of smartphone users in the world today is 3.5 billion; this means 45.12% of the world’s population owns a smartphone:

What's more, Android OS takes the lead, as another statistic by StatCounter shows that a whopping 72.26% of mobile phone users own an Android Phone:

With all this in mind, it makes sense to build an Android-based live chat app to support your customers in a platform that they already use and love. This post will explain how to build an Android messaging application with PHP and React Native; we’ll also use Stream Chat to take care of the WebSocket connection and other heavy lifting.

The source code for this Android Live Chat app can be found on GitHub.


In addition to PHP, React Native, and Stream Chat, we'll be using the following tech to build our app:

Setting Up the API

We need to create an API to generate a token to authenticate the users of our Android App. Add the following code to your composer.json file:

Then, to install all the dependencies required for our API, run:

Loading code sample...

This is a very simple API; your API directory should look like this:

├── composer.json
├── composer.lock
└── index.php

Open the index.php file and add the code below:

You’ll need to add your Stream API key and secret to the .env file. So, let’s head over to the Stream website to get one.

Setting Up Your Stream App

You can create an account by clicking the SIGNUP button in the upper right corner of the Stream Home Page:

After creating your account, you'll be directed to your dashboard, where you can get your API credentials:

Now that you have your API credentials, add them to your .env file.


Be sure to replace "your_STREAM_API_KEY" and "your_STREAM_API_SECRET" with the credentials from your Stream Chat Dashboard

You can test the API with Postman by starting the PHP development server with your computer’s IP address and port number:

Loading code sample...

To find your IP addresss, you can google "What's my IP Address"

To get a user's token, send a username to the token route, like so:

If you were successful in running these commands, your API should be up and running!

Setting Up React Native

We will use React Native to build our Android App. One of the advantages of doing so is that we can also build an iOS version using the React Native Framework!

Let’s start by installing the dependencies.

First, we'll install Expo CLI, which we'll use to create our React Native application, globally:

Loading code sample...

Next, run the following to install the rest of the dependencies you need to bootstrap your app development:

After you run the code above, you’ll have a starter React Native application!

Setting Up the Expo Development Tool

In order to use the Expo Development Tool, you'll need to, first, start the Android Emulator.

Starting Android Emulator

To start your Android Emulator, open your Android Studio application and create a project. Then, navigate to Tools > AVD Manager:

From here, you can start the emulator:

If you don’t have Android Studio and don’t wish to install it, you can install the Android Emulator npm package, which gives you a similar functionality.

Jumping into the Expo Development Tool

Now that our emulator has been started, run yarn start to start up the Expo Development Tool; the development tool should open in your browser, as shown below. From the development tool, click Run on Android device/emulator:

You should now see the default React Native home screen!

Building Out the App Files

Now, let’s get into the code!


Replace the contents of the ./App.js file with the code below:


We need to create some components, such as Login, ClientChat, AdminChat, and Routes; first, let’s create a Components directory to house all our components:

Loading code sample...

Now, let’s create the components one by one...

First, create a file for the Login component and add the content below:

From the code above, if a user enters their username, we send the username to the API, get a token back, and use AsyncStorage to save it to the Local Storage for later retrieval. If everything goes well, we then redirect the user to the chat screen.

Be sure to change the axios call URL on line 7 to use your IP address “http://xxx.xx.xx.x:8000/token".

Second, create the ./Components/ClientChat.js component:

Here, we get the user token and id, then add it to the Stream Chat components. It’s also important to note that we created a channel with 2 members; this is because we want to create a one-on-one chat, specifically. One-on-one channels do not have titles and the members are defined.

Third, let’s create the Admin Chat screen ./Components/AdminChat.js component:

This will be the chat screen where the Admin will log in, in order to respond to chats.

Finally, create the Routes.js component and add the code below:


We’ll also need to use the dotenv npm package to access our environment variables. To do this, replace the code in your babel.config.js file with the code below:

Then, create a .env file and add the API credentials you got from your Stream Dashboard.


Be sure to replace "your_STREAM_API_KEY" and "your_STREAM_API_SECRET" with the credentials from your Stream Chat Dashboard

By now, your app directory should look like this:

And everything is all set up!

Running Your App

Return to the Expo Development Tool, and click on the Run in Android emulator/device, again. Your Android live chat application should now be running!

Make sure your PHP development server is also running!

Your finished product:

Wrapping Up

In this tutorial, we built a simple one-to-one chat app. The version we created was for Android, but, because we used React Native, it can easily be adapted for iOS, as well! One of the coolest parts about building this app was the speed with which we were able to do it, by using Stream Chat. We only touched on the basics of building a chat app with Stream; if you'd like to learn more about all of the customization options available, check out the extensive Stream Chat docs!

Thanks for reading, and happy coding!