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

Creating a live chat is an outstanding way to engage the audience. In our previous article, How to Build Chat Functionality into Your App with React Native Part 1, we've covered many of the benefits of this solution as well as why you should opt for React Native. Also, we showed you how to create chat functionality using Twilio. But there's another way to make it happen via Sendbird Chat SDK.

Sendbird Chat SDK: Quick Overview

Before building a simple React Native chat app with Sendbird Chat SDK, let's outline its functionality. For our piece of software, we will develop the following features and functions:

• 'Signup/Login' feature — allows a user to access the application.
• 'Enter the channel' and 'Channels List' feature — allows a user to enter a channel to send and receive messages and handle the list of messaging channels.‍
• 'Chat' feature — allows a user to input characters, send and receive messages in real-time.
  

Now, let's dive deeper into Sendbird's Chat SDK, a solution through which you can efficiently integrate real-time chat into your client app. 

With the help of Sendbird, you can initialize, configure and build a chat with minimal effort. On the server side, Sendbird ensures reliable infra-management services for your chat within the app.

Furthermore, Sendbird features two fundamental APIs: Client APIs (including the React Native one) and a Platform API. The Platform API, which will not be covered in this article, allows you to communicate with the Sendbird back-end from your back-end or server application (server-to-server communication), which is extremely handy if you want to trigger actions from your Rails, Meteor, or Node app based on an event (for example, push notifications is a typical scenario). In this study, we will focus on building a simple chat app with Sendbird JavaScript SDK.

Sendbird Chat SDK Installation and Configuration

Step 1: Creating a New Sendbird Application

The creation of a new application in the Sendbird console is straightforward. First, we login into our Sendbird account, then go to the dashboard and click Create + at the top-right corner. After that, unique app credentials are generated:

Using these credentials, we can go further to the Chat SDK installation.

Step 2: Installing the Sendbird Chat SDK

If you're familiar with using external libraries or SDKs, installing the Chat SDK is simple. You can install the Chat SDK with package manager npm or yarn by entering the command below on the command line.

For NPM (Note: to use npm to install the Chat SDK, Node.js must be first installed on your system):

$ npm install sendbird (request to npm server)

For Yarn:

$ yarn add sendbird

Step 3: Initializing the Sendbird Chat SDK

For using the features of the Chat SDK, a Sendbird instance must be initiated in our app before user authentication with the Sendbird server.

To initialize a Sendbird instance, pass the App_ID of your Sendbird application in the dashboard as an argument to a parameter in the new Sendbird() method. The new SendBird() must be called once across your client app. Typically, initialization is implemented in the user login view.

var sb = new SendBird({appId: APP_ID});

Step 4: Connecting to the Sendbird Server

After initialization using a new SendBird(), our app must always be connected to the Sendbird server before calling any methods. There are two methods of connecting a user to the Sendbird server: through a unique user ID or in combination with an access token.

Connecting a user to Sendbird server using their unique user ID:

sb.connect(USER_ID, function(user, error) {
    if (error) {
        // Handle error.
    }

Using Chat Platform API, you can create a user along with their own access token or issue an access token for an existing user. Once an access token is issued, a user must provide the access token in the sb.connect() method used for logging in.

Connecting a user to Sendbird server using a combination of a user ID and access token ID:

sb.connect(USER_ID, ACCESS_TOKEN, function(user, error) {
    if (error) {
        // Handle error.    
    }

After installing and configuring the Sendbird Chat SDK and connecting our app to the Sendbird server, we can start working with basic chat functionality.

Feature Development with Sendbird Chat SDK

'Signup/Login' Feature Development

Let's discover the signup/login feature that will allow a user to access the application. In our project, we used authentication through a unique user ID.  

For authentication, we send a request for connection with a user's data to the server. Then the server queries the database to check for a match upon the connection request. If no matching user ID is found, the server creates a new user account with the user ID. If an existing user ID is found, it is allowed to log in directly. So, the Sendbird SDK "remembers" the user ID, and for further requests, there is no need to log in until the user logs out from his account. Have a look at how it's implemented in our sample chat app:

Note that the ID should be unique within a Sendbird application to be distinguished from others, such as a hashed email address or phone number in your service.

'Enter the channel' and 'Channels List' Feature Development

Sendbird's SDKs and API provide two basic types of channels:

• Open channels — a Twitch-style public chat. Anyone may join and participate in the conversation without permission. 
• Group channels —  a chat that allows close interactions among a limited number of users. A public group channel can be joined by any user without an invitation. Users can freely enter the channel if they want to. On the other hand, a private group channel can let a user join the chat through an invitation by another user who is already a member of the chat room. 
  

To start receiving and sending messages, a user must enter an open channel. The user can enter up to 10 open channels at once, which are valid only within a current connection.

A group channel can consist of 1 to 100 members by default setting. This default number of members can increase per request. A user can view and handle a list of channels that they are a member of.

Here is how this feature works in our sample chat app:

'Chat' Feature

‍‍Finally, let's send our first message. The 'Chat' feature allows users to send and receive messages in real-time in entered chat rooms. There are three types: a user message, which is a plain text; a file message, which is a binary file (for example, an image or PDF); and an admin message, which is a plain text sent through the dashboard or Chat Platform API.

As a first step, we need to create a chat UI component. For this purpose, we used react-native-gifted-chat, an extensible open-source library with plenty of customizable components that saves tons of time and development effort when building chat UIs.

Then, we can start messaging in real-time in entered chat rooms. Have a look at how it's done in our sample chat app:

For storing and processing messages and managing shared data across many screens, we used the Redux library. Here are several lines of code of our reducer (Redux state holder):

Twilio vs. Sendbird: Key Features Comparison

Till now, we have gone through all the main steps of building a sample React Native chat app using two real-time chat and messaging platforms: Twilio and Sendbird. Both of them allow configuring, building, and then integrating chat functionality into any client web or mobile app with minimum effort. But to clarify what solution can suit your business needs better, let's compare Twilio and Sendbird by key features for better exposure.

So What's the Best Alternative for Building and Implementing Chat Functionality?

Twilio is the leading cloud communication platform working on Platform-as-a-service (PaaS) model principles. Twilio provides a software-based platform, and still, it's not into in-app chat applications as others. It is also considered a developers' platform; therefore, it cannot be used by marketers or non-developers. The provider mainly targets programmable chat API, allowing users to make and receive phone calls and send and receive text messages instantly.

Sendbird is a chat API and messaging SDK platform with a SaaS (Software-as-a-service) model. Since it is a SaaS model, its customers can simply use the application with the available features without making any changes. They don't have to buy, install, maintain, or update any software to use Sendbird.

What's the verdict? The answer may seem trivial, but the dilemma of choosing between Twilio and Sendbird lies in your business goals, the tech skills available, and the chat features your client application demands.

Concluding Thoughts

If you have finally decided to build chat functionality into your client app, then undoubtedly, React Native is one of the most popular mobile app development frameworks. The reason here is its effectiveness in presenting the combined benefits of different types of mobile applications, including hybrid and native apps, together under one roof. 

As a back-end for a chat app, we decided to opt for Twilio and Sendbird, which we believe are among the best messaging SDKs for React Native applications. They both allow you to configure, build, and integrate chat functionality into any web or mobile app, but still they have different capabilities. We compared the key features that Twilio and Sendbird offer, and the main objective here while deciding which one to choose is your business goals and the chat app functionality you are looking for. There are numerous alternatives to Sendbird and Twilio for integrating chat functionality into React Native applications, each with their own unique features and functionalities, so it's important to carefully consider your specific business objectives and desired chat app capabilities when making a decision.

We have tried to keep each and every step of development very simple and sorted while explaining the customization, navigation, and configuration of the chat app with pieces of code. If you still have any questions concerning how to build chat app functionality into your app, contact our business development specialists for consultation. We'll be happy to provide you with our React Native development services and share expertise!