The QuickBlox Developer Hub

Welcome to the QuickBlox developer hub. You'll find comprehensive guides and documentation to help you start working with QuickBlox as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Quick start

This is a beta version of our new React Native documentation for beta version of React Native SDK. Please contact our Customer Support Portal to provide your feedback, suggestions, and requests to improve this page.

QuickBlox SDK helps you implement real-time chat, video chat, and push notifications to your app. You can fully concentrate on your mobile app development. Our React Native SDK provides you with many helpful methods to build a chat app with diverse features.

This Quick Start page will help newcomers and even our veteran users familiarize themselves with basic SDK functionalities and logic. It lets you go through the easy steps of implementing QuickBlox in your app.

Start with sample apps

If you are just starting your app and developing it from scratch, we recommend to use our sample apps. These code samples are ready-to-go apps with appropriate functionality and simple enough that even novice developers will be able to understand them.

You can clone the repository using the link below:

git clone https://github.com/QuickBlox/quickblox-react-native-samples.git

To run a code sample, follow the steps below:

  1. Install Node.js and npm if you don’t have it.
  2. Install CocoaPods (for iOS project only) if you don’t have it.
  3. Setup the React Native environment if you don’t have it.
  4. Clone repository with the sample.
  5. Open a terminal and enter the commands below in your project path.
npm install quickblox-react-native-sdk --save

extra step for iOS

cd ios
pod install
  1. Create a new app in the Admin Panel and get appId ,authKey, authSecret, accountKey. Put these values in file src/QBConfig.js.
 export default {
 appId: xxxxxxx,
 authKey: 'xxxxxxxxxxxxxxx',
 authSecret: 'xxxxxxxxxxxxx',
 accountKey: 'xxxxxxxxxxxx',
 apiEndpoint: '',
 chatEndpoint: '',
}
  1. Run the code sample.
react-native run-android 

or

react-native run-ios

Create a new app in the Admin Panel

Quickblox application includes everything that brings messaging right into your application - chat, video calling, users, push notifications, etc. To create a QuickBlox application, follow the steps below:

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

Install React Native SDK into your app

Note

To manage project dependencies:

  1. Node.js and npm must be installed
  2. CocoaPods must be installed for iOS.

To connect QuickBlox to your app just add it into your project's dependencies by running following code sample in terminal (in your react-native app):

npm install quickblox-react-native-sdk --save

iOS and Android have different dependencies systems. For that reason, you need to install dependencies in your iOS project. Just locate ios/ folder in the root directory of the project and enter the following code snippet.

pod install

Send your first message

Initialize QuickBlox SDK

Initialize the framework with your application credentials. Pass appId, authKey, authSecret, accountKey to the QB.settings.init method using the code snippet below. As a result, your application details are stored in the server database and can be subsequently identified on the server.

Pay attention

You must initialize SDK before calling any methods through the SDK, except for the QB.settings.init method. If you attempt to call a method without connecting, the error is returned.

const appSettings = {
  appId: '',
  authKey: '',
  authSecret: '',
  accountKey: '',
  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
  });

Note

apiEndpoint and chatEndpoint are optional parameters that should set if you're on Enterprise Plan.

Authorize user

In order to use the abilities of QuickBlox SDK, you need to authorize your app on the server, log in to your account and create a session. To get it all done call QB.auth.login method and pass login and password parameters to it using the code snippet below.

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

Connect to Chat

To connect to chat server, use the code snippet below:

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

Create dialog

QuickBlox provides three types of dialogs: 1-1 dialog, group dialog, and public dialog. Learn more about dialogs here.

Let’s create 1-1 dialog. Call QB.chat.createDialog method and pass QB.chat.DIALOG_TYPE.CHAT parameter as a dialog type to it. QB.chat.DIALOG_TYPE.CHAT parameter allows specifying that two occupants are going to participate in the 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
  });

Subscribe to receive messages

QuickBlox provides message event handler allowing to notify client apps of events that happen on the chat. Thus, when a dialog has been created, a user can subscribe to receive notifications about new incoming messages. To subscribe to message events call QB.chat.subscribeMessageEvents method and pass dialogId parameter to it using the following code snippet. The QB.chat.subscribeMessageEvents method tells SDK to send events about new messages.

QB.chat
  .subscribeMessageEvents({ dialogId: 'dsfsd934329hjhkda98793j2' })
  .then(function () { })
  .catch(function (e) { /* handle error */ });

To receive new messages, assign event handler using the code snippet below:

import { NativeEventEmitter } from 'react-native'

const emitter = new NativeEventEmitter(QB.chat)
emitter.addListener(QB.chat.EVENT_TYPE.MESSAGE.RECEIVED_NEW_MESSAGE, event => {
 const { type, payload } = event
 // type - type of the event (string)
 // payload - new message (object)
})

Send message

When a dialog is created, a user can send a message. To create and send your first message, call QB.chat.sendMessage method and specify the dialogId and body parameters to it. Pass saveToHistory parameter if you want this message to be saved in chat history that is stored forever.

const message = {
  dialogId: 'dsfsd934329hjhkda98793j2',
  body: 'Hey there!',
  saveToHistory: true
};

QB.chat
  .sendMessage(message)
  .then(function () { /* send successfully */ })
  .catch(function (e) { /* handle error */ })

Quick start


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.