Building a React Native Chat App with PubNub and Gifted Chat

 
 

🔎 Selecting a Chat Platform

When it comes to selecting a chat platform for your React Native app, there are several factors to consider, such as ease of integration, scalability, reliability, and cost. Here are some of the main candidates for chat platforms in React Native:

• Sendbird
• Stream Chat
• Applozic
• CometChat
• QuickBlox
• PubNub

While all of these chat platforms offer similar features, the choice ultimately depends on your specific needs and requirements.

 
 

✍️ Getting Started with PubNub

1. To get started with PubNub, you need to register for an account on the PubNub website. Once you have an account, you can access the PubNub dashboard, which is where you can manage your apps and keys for chat integration.

2. To create a new app in PubNub, you need to go to the dashboard and click on the "Create New App" button, which will prompt you to enter an app name. After entering the name, click on the "Create" button to create the app.

 
 

👀 Selecting a UI Library

Choosing the right UI library is essential for building a chat interface that delivers a great user experience. This section will discuss the key factors to consider when evaluating UI libraries, such as customization, performance, and ease of use. We'll also compare some of the most popular UI libraries for React Native chat interfaces.

 
 

🪛 Setting Up the React Native App

• To set up the React Native app for chat integration, you will need to first set up authentication using Firebase Authentication. This will enable users to log in and register for the chat app.

• To use Firebase Authentication, you will need to create a Firebase project and add the necessary configuration to your React Native app. This will involve installing the necessary dependencies, creating a Firebase project, and setting up the Firebase Authentication service.

• Once authentication is set up, you can use Firebase Firestore to store user information such as usernames. Firestore is a NoSQL document database that makes it easy to store and manage user data.

 
 

🛠 Integrating PubNub

To integrate PubNub into our chat app, we’ll be using two libraries provided by PubNub: PubNub and PubNub-React. The PubNub-React library provides us with convenient methods for:

• querying chat lists

• creating or deleting chats

• subscribing to new chat messages

• sending messages to chats.

1. Let's take a look at how to query the list of chats in our chat list screen. Here is the code for this:

 
 

🦉 Integrating Gifted Chat UI Library

All that is left is to convert messages returned from PubNub subscriptions to a format that Gisted chat understands. One issue that can arise here is that the PubNub message does not have a proper ID.

However, we can master something similar to the ID by joining message creation time and author id. Another inconvenience is that PubNub messages have much more precise timestamps. We can easily convert it to UNIX timestamp by dividing it by 1000.

Here is a listing of PubNum messages to Gifted Chat messages converter:

Customization of chat components. Almost everything in Gifted Chat can be customized. From chat bubbles and chat backgrounds to new message input. If you chose to integrate images into messages is pretty easy but is out of the scope of this article.

In conclusion, by converting PubNub messages to Gifted Chat messages and utilizing PubNub's paging capabilities, we can seamlessly integrate PubNub and Gifted Chat to create a fully functional chat system.

 
 

👓 Takeaways

In this article, we learned about how you can add chat functionality to a React Native app using PubNub and Gifted Chat. We compared different chat platforms for React Native and recommended PubNub due to its generous free tier and React library. We also explored how to set up Firebase Authentication for authorization and navigation, and how to customize Gifted Chat components to our liking.

Get ready to build your own React Native chat app with PubNub and Gifted Chat! Follow our step-by-step guide and learn how to create a real-time messaging platform for your mobile app. Start building today and see how easy it is to integrate PubNub's powerful APIs and Gifted Chat's customizable UI into your project.