Elena Kvitkovska

Building chat apps with QuickBlox React Native SDK

Posted by Elena Kvitkovska on December 10, 2019

Using 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 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 npm install
quickblox-react-native-sdk --save.

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:

const appSettings = {
  appId: '',
  authKey: '',
  authSecret: '',
  accountKey: '',
  apiEndpoint: '', // optional
  chatEndpoint: '' // optional

  .then(function () {
    // SDK initialized successfully
  .catch(function (e) {
    // Some error occured, look at the exception message for more details

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:

    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

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:
    userId: 12345,
    password: 'passw0rd!'
  .then(function () {
    // connected successfully
  .catch(function (e) {
    // some error occurred

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:
  .then(isConnected => {
    // isConnected - boolean value
    // true - connected to chat
    // false - not connected
  .catch(e => {
    // some error occured

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 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:

import { NativeEventEmitter } from 'react-native'
import QB from 'quickblox-react-native-sdk'

function connectionEventHandler(event) {
  const { type, payload } = event
  // handle as necessary

function receivedNewMessage(event) {
  const { type, payload } = event
  // event.type - name of the event
  // event.payload - event data. Received message in this case.

const emitter = new NativeEventEmitter(

const QBConnectionEvents = [,,,,,

QBConnectionEvents.forEach(eventName => {
   emitter.addListener(eventName, connectionEventHandler)

emitter.addListener(, receivedNewMessage)

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 dialog. But do we have some dialogs? Get dialogs available for your user:
  .then(function (result) {
    // result.dialogs - array of dialogs found
    // result.skip - number of items skipped
    // result.limit - number of items returned per page
    // - total amount of items
  .catch(function (e) {
    // handle error

Putting It All Together

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

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

const sort = {
  ascending: false,

  .getUsers({ sort })
  .then(function (result) {
    // result.users - array of users found
    // - page of results
    // result.perPage - how much items returned per page
    // - total amount of items
  .catch(function (e) {
    // handle error

Now we can pick a user from results and create a new chat
    occupantsIds: [12345] //
  .then(function (dialog) {
    // handle as necessary, i.e.
    // subscribe to chat events, typing events, etc.
  .catch(function (e) {
    // handle error

If nothing goes wrong we will receive created dialog 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:{ dialogId: })

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

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

const message = {
  body: 'Hey there!',
  saveToHistory: true
  .then(function () { /* sent successfully */ })
  .catch(function (e) { /* handle error */ })

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 dialog 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 deliver 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.

Julia Poltavets

What is Flutter and why it is a game-changer in app development

Posted by Julia Poltavets on December 3, 2019

Developers want to increase their productivity and develop high-performing apps faster. Startups and business owners want to decrease development costs. That is why cross-platform development becomes top-notch for building mobile apps. One of the most perspective toolkits is Flutter. It allows creating a codebase compatible with Android & iOS platforms.

The Structure of Flutter

A key feature of the system architecture is that all widgets and the components are part of the application, not the platform. There is no need for context switching and the use of “bridges” that gives a performance increase.

Flutter consists of three layers: Embedder, Engine, and Framework.

  • Embedder
  • This is a platform-specific code responsible for interaction and launch on the final platform. Embedder takes care of platform-specific tasks as Platform, UI, GPU, and IO Task Runners.

  • Engine
  • It is written in C / C ++ and includes Dart as an abstraction level for working with the CPU, Skia – a 2D library for drawing and a subsystem for rendering text borrowed from Android.

  • Framework
  • This is the largest part written in Dart. Layering makes it easy to build applications of any complexity. You can use ready-made widgets from Material-UI or install specific components based on basic widgets. It is possible to work with animation and gesture processing. Thus, you can combine fast work with high-level widgets with the ability to add/redefine deeper layers.

      Flutter’s architecture draws each pixel itself, controls gestures and animations. It does not use OEM widgets, as React Native does. Instead, the Flutter team created two sets of widgets for major mobile platforms: Material for Android and Cupertino for iOS.

      Thus, they redrew all the UI components from both mobile platforms, completely repeating their behavior. The components interact with geolocation, sound, Bluetooth through Platform Channels.

      Flutter SDK

      This is a collection of tools that allows you to build any kind of cross-platform Android & iOS apps. It provides lots of libraries that are available in native SDK applications.

      To work with the code, you can use any text editor and command-line utilities from Flutter SDK to compile the app. There are also plugins for Android Studio, IntelliJ IDEA, and Visual Studio Code text editor. Google has released them to simplify the development.

      Flutter Framework

      It provides all the predefined widgets/widget library, utility functions & packages.

      Flutter uses Dart as a programming language. Google created it in 2011 to solve some Javascript issues. Later, Dart has replaced it and became a basis for Flutter.

      Flutter doesn’t use native components of other platforms. Instead, it creates its own widgets and uses the GPU to render them on the screen. It compiles all Dart code into native ARM code which is run by the processor. This allows applications created with Flutter to run faster. The major components of Flutter include the Dart platform, Flutter engine, Foundation library, and Design-specific widgets.

      Flutter has a clean and nice UI design compared to an Android studio. In Android studio, you would have used XML for building the UI but in Flutter everything is built with Dart so it’s easy for developers.

      The benefits of writing a mobile app on Flutter

      Working on Flutter, the Google team wanted to solve the main issues in mobile development. They succeeded and created the framework with the following strong features:

      1. Cross-platform
      2. Using Flutter, the developers write the application compatible with both Android & iOS systems. You no longer need to have two separate development teams that have to use different sets of tools and coordinate with each other. This speeds up the development and decreases the costs.

      3. Speedy
      4. Flutter has a great feature – hot reload. It allows developers to create interfaces, add features, detect & fix bugs without quitting the emulator. They can also use native functions, and reuse existing native code written on Swift, Objective-C, Java, and Kotlin.

      5. Open-source
      6. Flutter is an open-source framework with a fast-growing community of over 1000 developers. They provide support, contribute to the documentation and develop helpful tools.

      7. Flexible UI
      8. Flutter uses built-in widgets and does not use native user interface components. Currently, Flutter offers many layouts, widgets, platforms for creating graphics and support for 2D-API. You can also find gestures, effects, animations, and other functions. Although Flutter’s interface features are still under development, they can turn into a powerful user interface environment. Flutter also comes with Material Design components.

      Flutter use cases

      Flutter is popular both among startups and established, reputable brands. Let’s see which famous companies decided to build their product using Flutter.

      Google Ads (Utility)

      Google Ads app enables users to view campaign stats on Android devices. The app showcase campaign details like real-time alerts and notifications allow calling Google expert, acting on suggestions to improve the campaign, adding/editing/removing keywords, and more.

      Alibaba (eCommerce)

      The app is a wholesale marketplace for global trade and incorporates Flutter to facilitate their transactions. The app allows its users to buy products from suppliers around the world.

      Hamilton Musical (Entertainment)

      Flutter empowers the official app of the hit Broadway musical, Hamilton. The app includes exclusive daily news and videos, daily lotteries for New York, Chicago, London, and tour locations, daily trivia game, merchandise store (to buy items from the official Hamilton store), and more.


      Flutter is a flexible, customizable toolkit that empowers developers with full control of the process. Using Flutter, you will increase your productivity, speed up the development, and earn the loyalty of both Android & iOS users.

      Now, QuickBlox team is working on releasing a Flutter SDK for building a cross-platform text, audio & video chat messengers. Stay tuned!

Elena Kvitkovska

Real-time communication with WebRTC: what is it and how does it work?

Posted by Elena Kvitkovska on November 19, 2019

More than 3 billion people around the world now use social media each month. Internet users are growing by an average of more than one million new users every day. The use of smartphones and tablets is growing at an incredible pace. It’s necessary to improve the quality of communication – and that’s the goal of WebRTC.

What is WebRTC?

WebRTC is a special network protocol developed by Google. It stands for Real-Time Web Communication. WebRTC is an open-source toolkit for real-time multimedia communication working right in an application. It supports audio and video chat and exchange data between the clients. To use WebRTC, you don’t need extra plugins, extensions or other external add-ons. The end-users should not use the same client module to interact with each other. With this standard, you can turn your host into a video conferencing endpoint. Thanks to the direct connection, WebRTC doesn’t need registration or any third-party accounts.

WebRTC was created to quickly transmit and protect confidential information using local network streams (organizing network meetings, remote conferences, etc.). It is a rather new technology and the development is still in progress. Yet, even now, WebRTC is convenient to use.

Benefits of WebRTC

Today, WebRTC is available for Chrome, Firefox, Safari, and Edge browsers. They also provide SDKs for development on the different mobile platforms that are constantly updated.

You can use WebRTC for many tasks, but its primary function is a real-time P2P audio and video chat. It bases on JavaScript, different APIs, and HTML5 and works right in the app. WebRTC makes it possible for the clients to transfer audio, video and other data.

To communicate with another person, each WebRTC client must agree to start the connection, know how to locate one another, bypass security and firewall protection, and send all multimedia information in real-time.

It’s free

WebRTC was first introduced by Google in 2011. Its goal was to provide a standard for real-time media which will be free and available on all platforms and devices.

Cross-platform ready

Any client that supports WebRTC can connect to another WebRTC device or to the media server and enable voice or video chat. The operating system of the device doesn’t matter. This is possible thanks to implementing W3C standard and IETF protocols.

Secured by HTTPS and SRTP

You can easily protect your WebRTC voice and video calls with an encryption protocol. Secure RTP (SRTP) encrypts the data that is especially important for protecting the confidentiality of your information. This prevents the interception and recording of voice and video.

High Communication Quality

To ensure the best communication quality, WebRTC uses a wide selection of codecs that are compatible with all applications. Here are some of them:

  • Opus is a scalable and flexible codec based on Skype SILK technology and used for dealing with audio with different degrees of complexity. It supports stereo signals and encoding from 6 kbit/s to 510 kbit/s without complicating the demultiplexing process
  • iSAC and ILBS are open-source codecs designed for voice transmission used in many streaming audio applications. They are not mandatory and some browsers may not support them.
  • VP8 is a mandatory video compression technology supported by all browsers. VP8 allows video with an alpha channel allowing the video to play with the background able to be seen through the video to a degree specified by each pixel’s alpha component.
  • VP9 supports deeper color, a full range of subsampling modes, and several HDR implementations. You may customize frame rates, aspect ratios, and frame sizes.

All the protocols support data compression, so you can handle a call with your partner even if the internet connection is not really speedy.

Quality automatically adjusts to any types of connection

WebRTC supports work behind NAT and establishes a reliable connection between the hosts. It helps to avoid relaying from the server and thereby reduces latency and improves the video quality.

Multiple Media Streams

WebRTC can adapt to different network conditions. It regulates the quality of communication, responds to bandwidth availability, detects and prevents congestion. It is possible thanks to multiplexed RTP control protocol (RTCP) and secure closed-loop audio-video profile (SAVPF). The receiving host sends network status information back to the sending one. It analyzes the conditions and responds to the changing ones.

Adapts to network conditions

WebRTC supports multi-media and endpoint negotiation. This ensures efficient use of bandwidth, providing the best voice and video chatting. API and signaling can coordinate the size and format for each endpoint individually.

How does WebRTC work?

WebRTC sends SDP Offer to the client JS app to send it to another device using that to generate an SDP Answer.

SDP stands for a Session Description protocol. It describes media communication sessions. It doesn’t deliver any media but the endpoints use it to agree on the type of media, format, and other properties.

The trick is that the SDP includes ICE candidates. ICE helps to connect two hosts using NAT. To do this, it opens the ports and maintains the connection via them. If the client failed to establish the connection or it is not working in a proper way, there is an option to use a TURN server for handling all traffic. To ensure stable performance, we recommend you to create your own TURN/STUN server for working with WebRTC.

Once done the encoding process starts and the data streaming between the clients and the server begins. If they talk directly, they can open a DTLS connection and use it to connect SRTP-DTLS media streams and send DataChannels via DTLS. To exchange data between two participants, the video server is not required. If you want to connect several participants in one conferencing, you will need a server.

What is WebRTC used for?

WebRTC is used handling audio and video chats. The technology is in the process of improvement, and its scope is expanding. Today, various web services use it in their work including Facebook, Google Hangouts, Skype, as well as some sites, and CRM systems.

By installing WebRTC in your meeting room, you will make it available to any of your employees or clients. They can connect to a full-fledged video conferencing from the app on any device. This will give you an opportunity to handle a meeting or an online consulting session.

You can place an access link to the conference on your website for everyone or in your user’s account. It will organize audio-video consultation and support for your customers. They can set up a video conferencing with you in one click.


WebRTC allows communicating to the highest level of reliability and security. This will improve the quality of online meetings, video conferencing and similar services. Both desktop and mobile-based multi-person multimedia chat applications are achievable by leveraging WebRTC.

QuickBlox video conferencing solution supports WebRTC standards. Contact our experts to learn more about using WebRTC with your app. For more information, feel free to contact our sales department right now!

Elena Kvitkovska

How to create a video chat app

Posted by Elena Kvitkovska on November 13, 2019

We live in the informational age of digital life and online communication. Information delivery is changing, and today video calls are a global trend. Using a video chat app, you can call colleagues, clients, and partners, handle online consulting sessions, and the like.

Why you need a video chat

Video chat is becoming an essential part of live chat software helping businesses enhance the customer experience. It can help a lot in improving sales provide better support. According to lifesize, video calling brings significant benefits to the working process:

  • 99% of respondents think that video calling improves communication and enhances productivity;
  • 90% of respondents say video calling helps them to get their point across;
  • 89% of respondents agreed that video calling helps them to complete the tasks faster;
  • 87% of employees that are not present for a meeting feel better engaged through a video call.

Live video chat is applicable to any business area: online commerce, consulting, finance, e-learning, etc. Healthcare industry is widely adopting video calls – global healthcare trends, like telemedicine, telepharmacy, and telepsychiatry are entirely based on it.

Let’s see how you can strengthen your business by using the custom video chat system.

Improved customer service

If a customer has a question, they visit your website and try to contact the support team via live chat. Video communication makes it fast to fix any issues because support managers can assist their customers immediately. Video calls can help them to tackle any challenges they may experience while using your product. When a customer needs you most, you’ll be right here.

Minimizing costs

Speaking about online support, we all agree that it may be challenging to explain the problem via a chat. Imagine, how much money the company loses when it is impossible to solve the issue from the first time? A video call can solve this challenge since the visual form is clearer than text instructions. Video chatting enhances remote work management. This decreases the operational costs of office management and organization of business trips.

The growth of sales

Online video chatting is erasing your geographic boundaries. You may expand your audience, explore new markets and be in touch with clients from all over the world. Surfing your e-shop, customers may experience difficulties selecting the product they need. Via a video chat app, your employees may connect with the customers and help them select the necessary product.

Enhanced teamwork and productivity

Video chatting also enables regular and clear communication between team members, even if they are not located in the same building or even the same country. This helps cut down on in-office costs and increase the productivity of remote team members. Many negotiations and conversations can happen well over a high-speed video call. In one click, you can arrange a meeting with your employees, clients, and partners without the necessity of leaving your room.

Main features of the video chat app

The video chat development process does not differ much from the development of a regular application, but there are some nuances that you should study more carefully because your success depends on them. Let’s start with the most important thing.

First, you should consider the most essential features of your application. None of video chat apps can exist without the following functionality:

User registration & profile settings

Give your users a convenient way of getting started in your video chat service. You may ask them to fill the sign-up form from scratch or allow to register via a popular social network. The video chat app should also provide an interface for managing the account details and settings.

Search and add contacts

This feature will allow your users to find people they need and start using your application.

User and message status

It is convenient to know whether your companions are online and if they have read your message. Perhaps, the chat system failed to deliver the message and you should try one more time?

Push notifications

As we’ve already mentioned, push notifications allow you to always stay in touch with your users. The users will benefit as well – thanks to pushes, they will never miss an important chat message or application update.

To enhance the capabilities of your video chat application, consider adding additional features that will stand your product out of competitors:

  • End-to-end encryption – ensures the complete security of user information;
  • Cloud services synchronization – storing the user attachments on your servers;
  • Automatic backup – to avoid accidental loss of important information;
  • Support for various data formats – text, video, audio, emoticons, pictures, photographs, stickers, etc.

This is a basic set of desired chat features based on user preferences. After promoting the MVP of your app, you will get the first reviews and see how you can improve it.

How to create your video chat app

To develop the chatting functionality, you can use one of many ready-made solutions. This will save your money and the time and effort of your development team.

Backend development

Most of the video call applications are developing using WebRTC. It is an open-source project built and maintained by Google, Mozilla, Opera, and others. It allows you to build real-time communication software in your browser and is standardized at the W3C & IETF levels.

There are two ways to develop and run a video call application using WebRTC: On-premise and using a CPaaS, or Communication-Platform-as-a-Service, provider.

  • On-premise variant means that it is your job to develop the application and manage its server infrastructure.
  • CPaaS provider will offer you to use their ready-made infrastructure. This will allow you to focus on the development process and save a considerable amount of time and money.

Let’s consider the ways of dealing with each strategy:

On-premise – Peer-to-peer approach

To deploy any software using the on-premise model, you will need your own physical servers. They can be located in your organization or you may rent a server in any data center.

On-premise solutions are the most secure way to store the data. You also can access any information you look for at any time you need. But you must ensure the continuous work of the servers, their maintenance, and security. In case of the P2P approach, the system capabilities are limited to 5-6 users. To implement the group calls, recording, saving the data, you will need a media server.

On-premise – Media Server approach

A media server remains between the call participants and helps them to exchange the data. This approach allows you to add some advanced features, such as recording, simulcast and multi-party calls.

Using the media server approach, you will need to add the signaling layer and STUN/TURN servers. Also, you will have to buy or rent the hardware to include the media server itself and to configure it.

Using a Communication-Platform-as-A-Service (CPaaS) Provider

It provides you its own infrastructure. Typically it includes different software tools, APIs, sample code and other out-of-box solutions. It allows you to focus on the development without setting up your own infrastructure.

UI/UX design

A good application should have an attractive and intuitive user interface and user experience. The users shouldn’t spend lots of time to understand how to perform the action they need. As for the video chat interface, it should have a clear and catching design without lots of buttons and icons.

Cross-platform video chat application

The main step of video chat development is adapting it to different platforms (Android, iOS, and web). To make a cross-platform chatting app, you may use React Native or Flutter frameworks.


To build your own chat app, you may use third-party solutions like QuickBlox. They make it possible to real-time client-server communication and information exchange, like streaming. The necessary part of a video chat application is organizing a stable internet connection. QuickBlox solution is one of those tools that can be easily integrated into our application.


Video call apps give people an opportunity to always stay in touch without any effort. For businesses, it means easy communication with clients and partners, as an efficient workflow. A video chat application can be a sustainable service or part of your own infrastructure specific to your business needs.

If you are thinking of adding a video call feature to your platform or building a new video chat app, browse QuickBlox’s SDK and API documentation. This can make the development process a bit simpler since you don’t need to code from scratch. For more details, feel free to contact our sales department right now!

Elena Kvitkovska

Getting started with QuickBlox React Native SDK

Posted by Elena Kvitkovska on November 1, 2019

One of the most appealing sides of 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 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 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

  .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:

    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:
  .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:
    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:
    dialogId: // 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(

function newMessageHandler (event) {
  const {
    type, // name of the event (the one we've subscribed on)
    payload // event data (new message in this case)
  } = event


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
  .then(function () { /* send successfully */ })
  .catch(function (e) { /* handle error */ })

That’s it!


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.