See docs at https://docs.quickblox.com/docs/react-native-quick-start
This guide demonstarates how to connect quickblox-react-native-sdk to your project and start development.
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:
To connect QuickBlox to your app just add it into your dependencies in package.json
- to do so, in the root directory of the project execute the following command in terminal:
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 command in terminal:
pod install
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.
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
});
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
});
Note! You must initialize SDK before calling any methods through the SDK except for the method initializing your QuickBlox instance. If you attempt to call a method without connecting, the error is returned.
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
});
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
})
.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)
})
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 */ })
For license information, please visit: https://quickblox.com/terms-of-use/