How to Build Chat Functionality into Your App with React Native [Part 1]

In this article, we will walk you through how to quickly build a React Native chat app using Twilio-based back-end along with Gifted Chat for styling.

Why Businesses Must Have Chat Functionality in Their Applications

Research shows that the average response time for a customer service request on social media is about 10 hours and up to 12 hours on email responses. As a consequence, such long delays can cost your customers. The solution is live chat apps.

Live chat is software that enables you to have a real-time conversation with potential customers within one platform. There are many options out there for live chat software, each with different functions and features, which you can integrate into your website and in web and mobile applications. Among the commonly used features are authorization, messaging, group chatting, notifications, and file sharing. Businesses can also add some extra features like video calls or voice messages in order to provide clients with extensive functionality.

Live chat software is convenient because users don’t need to switch from platform to platform, and it is quick due to the real-time response. Therefore, businesses, both small and large, use live chat software to serve their customers better and improve response time.

Along with providing quick customer support, the usage of chat software can positively impact your business in some other ways. So what are the additional benefits of implementing live chat functionality for businesses? Let’s have a look.

Building Trust with Customers

A study done on global consumer trends by Oracle shows that a live chat button gives 90% of consumers confidence that they will get help when and if needed. Without a live chat option, you will need to work much harder on building trust with consumers that visit your website.

Understanding Customer Needs Better

You can collect data through live chat about your customers’ behavior, their questions, and issues they have with your website and work on them to eliminate fears and doubts concerning your products and services.

According to the Aberdeen Group report, companies that systematically listen to their customers and use this information to take action enjoy 55% greater customer retention rates and an almost 10-fold increase in the company’s annual revenue from the previous year than all other companies.

Satisfying Customers More Fully

Live chat has the highest satisfaction levels for any customer service channel, with 73%, compared with 61% for email and 44% for phone. The reason for such high customer satisfaction is the efficiency and immediacy of the experience.

Communicating with customers via a channel they prefer the most will help you to improve their experience, and in return, retain more consumers.

Improving Website Experience

Along with helping clients by improving the website experience, businesses get more purchases. Research shows that customers who use live chat on a website are three times more likely to make a purchase, which will positively impact your bottom line.

All types of businesses benefit from using live chat software. For marketplaces, live chats will have the biggest impact. Such real-time interactions through live chat connect your marketplace’s buyers and sellers and help in driving engagement and sales.

Live chat can not only conveniently connect your buyers and sellers and build trust across your marketplace but help drive more opportunities to convert by successfully closing the loop. For example, you may use notifications to keep the conversation moving so users stay connected and never miss a chance to transact.

Live chat gives you a chance to go through the purchase funnel together with a prospect customer, help them overcome objections, and reach a buying decision. It’s like having a sales assistant on standby, live on your website, and it can be crucial for your marketplace.

Why to Choose React Native For Chat App Development

Here are the top reasons why they have considered React Native for their company and why it is becoming a soaring framework for char software projects.

Easy Availability of Talent

Lower Development Cost

Reusable UI Components

Compatibility to Cross-Platform

That is why if you want to build basic chat functionality into your application — whether it is a marketplace, e-learning platform, or telemedicine portal — you must bet on React Native first and foremost.

Building Chat Functionality into Your App with React Native

  • ‘Signup/Login’ feature — allows a user to access the application.
  • ‘Channels List’ feature — allows a user to handle the list of messaging channels to chat in.
  • ‘New Chat’ feature — allows a user to create a new chat or join an existing one.
  • ‘Chat’ feature — allows a user to input characters, send and receive messages in real-time.

Here’s what we will cover in this article:

  • How to start a new chat app project with Expo;
  • How to set up a backend for a chat app;
  • How to build a few chat features with React Native.

Step 1: Starting a New Project with Expo

To start a new project, you must use an Expo CLI, a command-line app that is the main interface between a developer and Expo tools. To begin with the app, you must have to install Expo CLI on your local machine. For a hassle-free installation, a mobile app developer can run the below command in the terminal in order to install the CLI and generate a new project using it.

Installing Expo CLI:

npm install — global expo-cli

Creating a project ChatApp:

expo init ChatApp

Navigating to the project directory:

cd ChatApp

Starting a development server:

expo start

After generating a project, it’s time to run it on our development machine to ensure that everything works smoothly. Expo allows developers to open the project on multiple devices simultaneously or use an iOS simulator or Android emulator.

The next step is to install a dependency called react-native-gifted-chat that offers us a customizable UI for a chat application and ensures seamless Navigation between screens. For navigation between multiple screens, we use React-Navigation, and at last, we can connect with the back-end chat API service (for our project, we used Twilio and Sendbird). Here is the example of a quick short command:

npm install express dotenv twilio axios twilio-chat sendbird redux react-redux @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack react-native-gifted-chat

Step 2: Choosing a Back-end for a Chat App

There are plenty of such platforms available in the market. We prefer using off-the-shelf messaging SDK solutions because it’s the best way to reduce time-consuming efforts, increase performance and focus on the core content. For our project, we decided to opt for Twilio and Sendbird, which we believe are among the best messaging SDKs for React Native applications. In this chapter, we will focus on adding chat features into your app using Twilio Programmable Chat. The creation of chat app functionality via Sendbird SDK will be considered in detail in the second part of the article.

Twilio Programmable Chat makes it easy for you to add chat features into your web and mobile apps without building or scaling a real-time chat backend. Chat has all of the necessary APIs and features to integrate with your business logic to ensure you’re in control.

Step 3: Setting up a Twilio-Powered Server

To set up our backend for Chat, we need four values from our Twilio account. They will be stored in our .env file:

  • Service instance SID — a service instance where all the data for our application is stored and scoped;
  • Account SID — a primary Twilio account identifier;
  • API key — used to authenticate;
  • API secret — used to authenticate.

To take your Twilio account SID go to the Twilio Console and then copy and paste it as the value TWILIO_ACCOUNT_SID to the .env file.

Next, we need to generate an API key and API secret. After creating them, copy and paste the SID and the secret as the values TWILIO_API_KEY and TWILIO_API_SECRET.

Furtherly, we need to create a new Chat Service by navigating to All Products & Services > Programmable Chat > Services > Chat Services.

Let’s copy and paste the service SID as the value TWILIO_CHAT_SERVICE_SID.

Finally, our .env file should look like this:

TWILIO_ACCOUNT_SID=your_account_sidTWILIO_API_KEY=your_api_keyTWILIO_API_SECRET=your_api_secretTWILIO_CHAT_SERVICE_SID=your_chat_service_sid

When our .env is ready, we can create a simple server with a single GET request from — /token/:identity. This route will request and return a token from TWILIO. Let’s install dependencies for our server:

yarn add express dotenv twilio

Then we can begin configuring our Twilio server and service. Here is the configuration of our Twilio-based server that will receive and process the requests:

And here is the configuration of service that will be used for getting users’ data, their tokens, channels, chats list, and their messages:

At last, we can run the server with the following command:

node server.js

Step 4: Developing Chat App Functionality with Twilio

‘Signup/Login’ feature development

Let’s start with the signup/login feature that will allow a user to access the application.

Like any other messenger, our chat needs to authenticate a user firstly. In Twilio, all chat SDK clients need a valid Access Token to be able to authenticate and interact with the chat service. As we authenticate a user, the Token is generated on the server and then is utilized by the Chat SDK client to authorize with the Chat Service. Have a look at how it’s done in our sample chat app:

‘Channels List’ feature development

This feature allows a user to handle the list of messaging channels to chat in. On the ‘Channels List’ screen, we output a list of channels joined by a user and the time of the last message received. While this screen loads up, we are loading all existing channel data using the Token we generated during the user authentication. The channels are sorted by the time the last message was added. Also, Twilio allows implementing many options of sorting the channels: for example, display one-to-one chats at the top and group channels after them. For more information, read the documentation.

So, we made the ‘Channel List’ feature with the following code:

‘New Chat’ feature development

This feature allows a user to create a new chat or join an existing one. On this screen, the user must enter the name of a new chat in the special field and then click on the ‘Create or Join’ button. On the server, we must decide, based on the token request sent to us, who the user is and if he has access to this chat. Depending on this, the user is either added to the existing chat or creates a new one and is automatically added there. If the user has joined the chat before, the app informs the user about that via a service message. That’s how it works in our sample chat app:

‘Chat’ feature development

This feature allows a user to send and receive messages in real-time and displays those messages inside a chat room. For this feature development, we used an open-source library called react-native-gifted-chat.

Upon the ‘Chat’ screen initialization, we subscribe to the ‘events.’ They are functions working during the period the screen is displayed and track the changes in the channel (for example, when a new message is sent. By subscribing to the ‘events,’ we can fetch the messages sent in that channel and listen for updates for when a new message is sent. Also, at this step, we get the channel ID, load up all its messages and send them to the react-native-gifted-chat for displaying. That’s how it works in our sample chat app:

Here is the first part of the article ‘How to Build Chat Functionality into Your App with React Native’. In it, we talked about the main benefits chat apps can give your business, why React Native is the best choice for chat app development, what Expo is, and showed our experience in building chat apps with Twilio SDK. In the second part, we will look at the development process using Sendbird SDK and make a comparison of these two platforms.

The second part is about to come. Subscribe to UpsilonIT on Medium in order not to miss the second part and other helpful content!

We help startups and small & medium businesses build software that matters.