This is our new documentation for beta version of QuickBlox React Native SDK. Please contact our Customer Support Team 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 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.
Before you begin
Visit our Key Concepts page to get an overall understanding of the most important QuickBlox concepts.
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:
- Install Node.js and npm if you don’t have it.
- Install CocoaPods (for iOS project only) if you don’t have it.
- Setup the React Native environment if you don’t have it.
- Clone repository with the sample.
- Open a terminal and enter the command below in root of sample directory
npm install
extra step for iOS
cd ios
pod install
- Get application credentials and get
appId
,authKey
,authSecret
,accountKey
. Put these values in filesrc/QBConfig.js
.
export default {
appId: xxxxxxx,
authKey: 'xxxxxxxxxxxxxxx',
authSecret: 'xxxxxxxxxxxxx',
accountKey: 'xxxxxxxxxxxx',
apiEndpoint: '',
chatEndpoint: '',
}
- Run the code sample.
react-native run-android
OR
react-native run-ios
Get application credentials
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:
- Register a new account following this link. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
- Create the app clicking New app button.
- Configure the app. Type in the information about your organization into corresponding fields and click Add button.
- Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key .
Requirements
The minimum requirements for QuickBlox React Native SDK are:
- iOS 10.
- Android 4.0 (API 14).
- React Native (minimum version 0.60).
Install QuickBlox SDK into your app
To manage project dependencies:
- Node.js and npm must be installed
- 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
Make sure that iOS version in your project’s Podfile is not lower than 10.0 when installing SDK. Otherwise, CocoaPods will fail to find a compatible version of QuickBlox React Native SDK.
Send your first message
Initialize QuickBlox SDK
Initialize the framework with your application credentials. Pass appId
, authKey
, authSecret
, accountKey
to the 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.
You must initialize SDK before calling any methods through the SDK, except for the
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
});
apiEndpoint
andchatEndpoint
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 the 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
Having authorized a user, it is time to connect to the Chat server to start using Chat module functionality. Call the connect()
method and pass userId
and password
to it.
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 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 SDK emits events to notify that something happened. Thus, when a message has been received, a user receives the event from SDK about a new incoming message. To process events, you need to provide an event handler that SDK will call. See the code snippet below.
import { NativeEventEmitter } from 'react-native'
const eventHandler = (event) => {
const { type, payload } = event
// type - type of the event (string)
// payload - new message (object)
}
const emitter = new NativeEventEmitter(QB.chat)
emitter.addListener(
QB.chat.EVENT_TYPE.MESSAGE.RECEIVED_NEW_MESSAGE,
eventHandler
)
Send message
When a dialog is created, a user can send a message. To create and send your first message, call 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 */ })
Updated about a month ago
What's Next
Setup |