How to get started with QuickBlox React Native SDK

Note: This blog has been updated since it was originally published in November 2019

React Native proves to be an exciting framework for many app developers. One of its most appealing aspects is that it allows you to build a single app using JavaScript for both iOS and Android devices, hence saving you significant cost and time in app development and maintenance. React Native has a large community and a variety of libraries in native languages. It is similar in structure to React.js, so it’s easy for web developers to work with it. React Native makes use of native Objective-C and Java, which helps to produce a native-like UI and boosts performance.

The QuickBlox Team has produced a powerful React Native SDK to enable you to add stunning real-time communication features to your app. You can download our SDK for free from our GitHub repository. To help get you started we provide a short tutorial below to cover some of the basics.

Why you need QuickBlox React Native SDK

Avoid the unnecessary cost of building communication features from scratch by building a chat app with Quickblox. Our robust React Native SDK offers you all you need to build a modern chat messenger for Android and iOS. Our toolkit contains the following modules to implement a range of functionality:

• Authentication. Authenticate users via login and passwords. QuickBlox also supports the use of an external authentication method with our Custom Identity Provider (CIdP).
• User Management. Manage user accounts including updating user profiles and passwords, creating and deleting user accounts, and more.
• React Native Chat. For our messaging API, we use the XMPP protocol. This module allows you to manage connections to the chat server for both 1-on-1 and group dialogs.
• React Native Audio & Video Calling. Integrate voice and video communication to elevate your messenger app to the next level.
• Content. This module allows you to store and manage chat attachments including photos, pdfs, video and audio files.
• Push Notifications. Integrate push messaging into your Android or iOS app, so that you can keep in touch with users even when they go offline.
• Custom Objects. This module allows you to interact with QuickBlox key-value storage where you can create any sort of data schemas and use them in your application.

How to create a React Native Chat app using QuickBlox SDK?

Getting started

Building with QuickBlox is easy. To create a React Native chat messaging app with the QuickBlox SDK you will first need to install the following resources:

1. Install Node.js
2. Set up a development environment according to React Native guidelines.
3. Run npx react-native init AwesomeChatApp to create a new project
4. Add QuickBlox SDK to dependencies with npm install quickblox-react-native-sdk --save
5. If you’re on MacOS, update minimum supported iOS version in ios/Podfile file: platform: ios, ‘12.0’ and 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 need to create some UI for messages and then use our SDK to make it alive!

To make the 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 by clicking the New app button.
3. To configure the application, type in information about your organization into the corresponding fields and click the Add button.
4. Go to the screen with credentials. Locate the Credentials groupbox and copy your Application ID, Authorization Key, Authorization Secret and Account Key. This data is needed to run your application on the QuickBlox server.

Now, it’s time to turn on the 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
  });

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 */ });

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 a 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 helps to expedite the process of messaging app development – from designing the prototype to final testing. Using our toolkit, you can integrate messaging, voice & video calling, authenticate users, manage user profiles and content files, set up push messages and much more.

Check out our React Native documentation & code samples.

For technical queries about using our SDK or recommendations for our product or documentation please submit a ticket to our support team.

Contact us to learn more about how QuickBlox can support your communication needs.