Getting started with QuickBlox React Native SDK

One of the most appealing sides of the React Native framework is that you only have to build your app at once using JavaScript. React Native means two times lower costs for building and maintenance. It has a large community and a variety of libraries in native languages. It is similar in structure to React.js, so it is easy for web developers to work with it.

React Native makes use of native Objective-C/Swift and Java/Kotlin ingredients. They help native-like UI and boost performance in intensive operations. Yet, you can’t reuse native modules across different platforms.

We have recently announced the release of the Quickblox React Native SDK. Today we have prepared a step-by-step guide on building a messenger app with it. You are welcome to download Quickblox React Native SDK. It is in beta now, and we are ready to hear the feedback and improve our SDK according to your proposals.

Why do you need QuickBlox React Native SDK?

QuickBlox React Native SDK offers you all you need to build a chat messaging app. Our toolkit contains helpful methods for implementing the following functionality:

• Authentication. Upon the user logins to the application, the application starts a secure session. The token is valid for 2 hours after the last API request and is automatically renewed.
• Users. SDK has all the necessary toolset for secure storing, managing and updating the user information.
• Chat. For our messaging API, we use the XMPP protocol. Using the toolkit, you can manage the connection to chat server and managing 1–1 and group dialogs.
• Content. This module allows you to store attachments and manage the content.
• Push Notifications. Push messages help you to keep in touch with the users who are not currently online. Using QuickBlox React Native SDK you can integrate push messaging into your Android or iOS app.
• Custom Objects. The Custom Objects module provides all you need to manage and update your records.

How to create a React Native app using QuickBlox SDK?

Getting started

To create a new React Native chat messaging app with QuickBlox SDK from scratch follow these steps:

1. Install Node.js
2. Install React Native
3. If you’re on MacOS — install CocoaPods
4. Run react-native init AwesomeChatApp to create a new project
5. Navigate to created project and install JS dependencies with npm install
6. Add QuickBlox SDK to dependencies with npm install quickblox-react-native-sdk --save
7. If you’re on MacOS — install Pods: enter ios folder and run pod install

You’re done with dependencies!

Launching the app

Now you can start the app with react-native run-android or react-native run-ios

But the application created is not really a chat messenger yet, right? So now you should create some UI for messages and then use our SDK to make it alive!

To make SDK work you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:

1. Register a new account at https://admin.quickblox.com/signup. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
2. Create the application clicking New app button.
3. Configure the application. Type in the information about your organization into corresponding fields and click the Add button.
4. Go to the screen with credentials. Locate Credentials groupbox and copy your Application ID, Authorization Key, Authorization Secret and Account Key. These data needed to run your application on QuickBlox server.

Now, it’s time to turn on QuickBlox SDK

import QB from "quickblox-react-native-sdk"
const appSettings = { 
  appId: xxxxx,
  authKey: xxxxxxxxxx,
  authSecret: xxxxxxxxxx,
  accountKey: xxxxxxxxxx,
  apiEndpoint: '', // optional
  chatEndpoint: '' // optional
};
QB.settings 
  .init(appSettings
  .then(function (){
    // SDK initialized successfully
 }) 
 .catch(function (e) { 
   // Some error occured 
   // look at the exception message for more details 
});

Now you should sign in and connect to chat:

QB.auth
 .login({
   login: 'yourlogin',
   password: 'yourpassword' })
 .then(function (info) {
 // signed in successfully, handle info as necessary
 // info.user - user information
 // info.session - current session
 })
 .catch(function (e) {
 // handle error
 });

Once you signed in you can connect:

QB.chat
 .connect({ userId: 12345, password: 'passw0rd!' })
 .then(function () { /* connected successfully */ })
 .catch(function (e) { /* some error occurred */ });

Great! Now since you’re connected to chat — it’s time to send a message to someone. Let’s create a new dialog:

QB.chat
 .createDialog({
   type: QB.chat.DIALOG_TYPE.CHAT,
   occupantsIds: [12345]
})
 .then(function (dialog) {
   // handle as necessary, i.e.
   // subscribe to chat events, typing events, etc.
 })
 .catch(function (e) { /* handle error */ });

In order to receive new messages we should tell SDK to send us events when there are new messages in chat:

QB.chat
 .subscribeMessageEvents({
 dialogId: dialog.id // something like 'dsfsd934329hjhkda98793j2'
 })
.then(function () { /* subscribed successfully */ })
.catch(function (e) { /* handle error */ });

But how will we handle new messages? We should probably assign an event handler:

import { NativeEventEmitter } from "react-native"
const emitter = new NativeEventEmitter(QB.chat)
function newMessageHandler (event) {
 const {
 type, // name of the event (the one we've subscribed on)
 payload // event data (new message in this case)
 } = event
 }
 emitter.addListener(
 QB.chat.EVENT_TYPE.RECEIVED_NEW_MESSAGE,
 newMessageHandler
 )

So, now we have a dialog, we subscribed for new messages and created function to handle incoming messages. Let’s send our first message:

const message = {
 dialogId: 'dsfsd934329hjhkda98793j2',
 body: 'Hey there!', // message text
 saveToHistory: true // keep this message in chat history
};
QB.chat
 .sendMessage(message)
 .then(function () { /* send successfully */ })
 .catch(function (e) { /* handle error */ })

That’s it!

Conclusion

QuickBlox React Native SDK is here to speed up the process of messaging app development — from designing the prototype to final testing. Using our toolkit, you can integrate the messenger, voice, and video calling to your app, manage the files and objects. If you have any questions or suggestions, please submit a ticket to our support team.

Originally published at https://quickblox.com on November 1, 2019.