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:

Screenshot of Statistics from Statista

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:

Screenshot of Statistics from Statcounter

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.

Prerequisites

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:

https://gist.github.com/BrightnBubbly/e30739221b2107fb0a049a1cb389a2b9

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

$ composer install

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:

https://gist.github.com/BrightnBubbly/55938a127944ae220b5f1a397f48e5b0

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:

Screenshot of Stream Home Page

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

Screenshot of API Credentials in the Stream Dashboard

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

STREAM_API_KEY="your_STREAM_API_KEY"
STREAM_API_SECRET="your_STREAM_API_SECRET"

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:

$ php -S 172.20.10.8:8000 -t .

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:

Screenshot of Postman POST Request to Generate a Token

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:

$ yarn global add expo-cli

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

https://gist.github.com/BrightnBubbly/a56190ba7d1140175d5dea09c9b2502d

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:

Screenshot of Android Studio with Tools Menu Open

From here, you can start the emulator:

Screenshot of Virtual Devices Window in Android Studio

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:

Screenshot of the Expo Development Tool

You should now see the default React Native home screen!

Building Out the App Files

Now, let’s get into the code!

App.js

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

https://gist.github.com/BrightnBubbly/a6715e36a602c1a8cc832188866b71d8

Components

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:

$ mkdir ./Components

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

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

https://gist.github.com/BrightnBubbly/42ff5eea8daf899c75e733b4143c2fb5

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:

https://gist.github.com/BrightnBubbly/b51c23c98dfe8f039d909e118fa0c9f5

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:

https://gist.github.com/BrightnBubbly/329e11436296dda08414502e610d2519

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:

https://gist.github.com/BrightnBubbly/a37de73220131810f2f7167e88a61f6b

.env

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:

https://gist.github.com/BrightnBubbly/c70d140da6f81f14805f8b2a80248773

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

STREAM_API_KEY="your_STREAM_API_KEY"
STREAM_API_SECRET="your_STREAM_API_SECRET"

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:

Screenshot of App Structure

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:

Screenshot of the Login Screen

Screenshot of the Chat Screens

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!

TutorialsChat