How to Build Chat Apps with QuickBlox React Native SDK
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.
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
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
If nothing goes wrong we will receive created dialogue in the “resolve” block.
NOTE: Your chat opponent will not know that you have created a new chat with him. You should let him know somehow. This is where system messages can help.
In order to receive notifications from SDK about new messages in real-time we should say that we want to be notified:
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.
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.