Start with sample apps
Choose the code sample below to jump-start the development. We use GitHub repositories to make it easy to explore, copy, and modify our code samples. The guide on how to launch and configure the sample app is on GitHub.React Native Chat Sample App
React Native Video Calling Sample App
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 by clicking the 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 12.0
- Android (minimum version 5.0, API 21)
- React Native (minimum version 0.60)
Install QuickBlox SDK into your app
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):
Bash
Bash
Make sure that iOS version in your project’s Podfile is not lower than 12.0 when installing SDK. Otherwise, CocoaPods will fail to find a compatible version of QuickBlox React Native SDK.
⚠️ Android – Breaking Change (from v0.12.0 and above)
Starting from v0.12.0, the SDK no longer manages permissions required for calling functionality on Android. If your app uses calling features, you must manually declare the necessary permissions in your app’sAndroidManifest.xml
file.
Kindly ensure you’re modifying the main
AndroidManifest.xml
file located at the application level — not a test or variant manifest.XML
Send your first message
Initialize QuickBlox SDK
Initialize the SDK with your application credentials. Set theappId
, authKey
, authSecret
, accountKey
properties of the appSettings
object. Call the init()
method and pass the appSettings
as an argument to it.
JavaScript
You must initialize SDK before calling any methods through the SDK, except for the
init()
method. If you attempt to call a method without initializing SDK previously, the error will be returned.SecurityIt’s not recommended to keep your authKey and authSecret inside an application in production mode, instead of this, the best approach will be to store them on your backend and initialize QuickBlox SDK with applicationId and acountKey only. More details you can find in Initialize QuickBlox SDK without Authorization Key and Secret section.
Authorize user
Now, it is time to log in with the user. To get it done, set thelogin
and password
properties of the loginParams
object. Call the login()
method and pass the loginParams
as an argument to it using the code snippet below.
JavaScript
Connect to chat
Having authorized a user, you can proceed with connecting to the chat server to start using Chat module functionality. Set theuserId
and password
properties of the connectParams
object. Call the connect()
method and pass the connectParams
as an argument to it.
JavaScript
Create dialog
QuickBlox provides three types of dialogs: 1-1 dialog, group dialog, and public dialog. Learn more about dialogs here. Let’s create a simple 1-1 dialog. Set thetype
and occupantsIds
properties of the createDialogParams
object. Call the createDialog()
method and pass the createDialogParams
as an argument to it.
JavaScript
Subscribe to receive messages
QuickBlox SDK emits events to notify about chat events. 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.JavaScript
Send message
To send a message, set thedialogId
and body
properties of the message
object. Call the sendMessage()
method and pass the message
as an argument.
JavaScript
Set the
saveToHistory
parameter if you want this message to be saved in chat history.