Building chat apps with QuickBlox React Native SDK

Oleksandr Shvetsov
Oleksandr Shvetsov
10 Dec 2019
building-chat-apps-with-quickblox-flutter-sdk

Using the React Native framework, you can build cross-platform apps and save your money. It allows you to create real native apps using JavaScript and React. React Native has built-in components which compile to native UI ones. At the same time, your JavaScript code is executed through a virtual machine.

In this article, you will learn how to create a messaging app with QuickBlox React Native SDK.

Required For Setup

Building any application with QuickBlox SDK starts from creating QuickBlox application. To create an application you will need an account – you can register at https://admin.quickblox.com/signup or login if you already have an account. Then create your QuickBlox app and get app credentials. You will need them to identify your app.

All users of your QuickBlox message app can communicate by text or video chat. The app sill run across all platforms – iOS, Android, Web, etc.

Set Up

Creating React Native application starts from creating a new project: react-native init AwesomeChatApp

To manage the application state we will use redux (with react-redux – react bindings for redux). To keep application state persistent after reloads / restart we will use redux-persist. And to make it work we should specify which storage engine we want to use, we will need async-storage also. And of course navigation – we will use quite popular and easy library react-navigation. Navigation library comes with a set of its dependencies, so we will need to install these as well:

To install Quickblox React Native SDK you should run

To install iOS dependencies we should enter ios folder (in terminal) and run pod install

Once you have QuickBlox application credentials (Application ID, Authorization key, Authorization secret, and Account key) you can initialize QuickBlox React Native SDK:

If SDK initialized – it is ready to work. In order to perform some operations using QuickBlox SDK, we should be signed in. To sign in we should run:

Now we are able to get dialogs, users, etc. But in order to send and receive messages in real-time, we should be connected over XMPP. To connect to chat call:

So now we are ready to chat.

Ready to Send your First Message?

You can make sure if you are connected to chat at any moment by calling:

But in order to receive notifications about new messages, we should instruct SDK to notify us about new messages and assign an event handler to process events accordingly. SDK contains several modules and some of them can emit events.

TIP: You can check if the module can emit events – it should contain property “EVENT_TYPE” with a list of the available events for this module.

To assign an event handler that will process new messages run this:

Now we are able to process new messages received or connection changes.

In order to send messages, we should specify where we want to send them, i.e. specify the dialogue. But do we have some dialogues? Get dialogues available for your user:

Putting It All Together

Let’s imagine there are no dialogues returned for our user. So we should create a new one to start messaging. In order to create dialogue, we should specify dialogue participants.

Let’s get users to find someone to chat with:

Now we can pick a user from results and create a new chat

You can also subscribe to “typing” events and message status (“read”, “delivered”) events.

Now we can send a message in a created dialogue. Let’s try it out:

If promise resolved - the message sent successfully and you can expect that opponent will receive your message and send you a response. When there will be a new message in this dialogue you will receive a notification.

Wrapping Up

Customer engagement and experience are essential to a company's success. Chat app allows boosting user engagement and delivers useful solutions to your clients. Building your messaging app will give you the opportunity to start ahead of other competitors. This article shows how to simply create a chat app using QuickBlox React Native SDK.

For further reading on QuickBlox React Native SDK take a look at the official documentation.

Do you need any help? Don’t hesitate to contact us right now! Our sales team will be able to help you. Follow our new blog posts.

Share article

Subscribe for news


Thanks for subscribing!

You will receive an email shortly to verify your subscription.

Check out your inbox!

Ready to get started?

Created with Sketch.
post-box
Created with sketchtool.

Subscribe for news

Get the latest posts and read anywhere.