React Native Sample
Requirement
Qiscus Chat SDK supports developers who want to use React Native. You can use it seamlessly without any native bridging. To do so, you need to first install the Javascript chat SDK. You can do that by going to your app project and type the command bellow:
npm install qiscus-sdk-core@2.10.4You can use other chat SDK features by following Javascript chat SDK docs
Try sample app
You can download the sample directly from our github repository, or if you already have git installed, you can just clone it, for example:
git clone https://github.com/qiscus/qiscus-chat-sdk-rn-sampleAfter cloning is completed, you will need React Native Command Line to run the sample app. In the example below, we use react-native-cli from nodejs package manager to serve sample app locally.
# Install react-native-cli from npm globally$ npm install react-native-cli -g# Choose folder$ cd qiscus-chat-sdk-rn-sample$ npm install# Run project with desired platform if you prefer use Android run code below$ react-native run-android# Run project with desired platform if you prefer use IOS run code below$ react-native run-iosIf you want your sample app running with your own App ID, you can change it inside the index.js which is located at app/qiscus/index.js. You can see the reference by clicking this link.
Setup Notification
The following steps on the assumption that you have already registered in Qiscus chat SDK.
Step 1: Install React Native Firebase Library
We recommend to use react-native-firebase library, this library is easy to setup FCM (Firebase Cloud Message). To setup, you need to do:
1) Go to Installation menu to initial setup,
2) Then you can install for specific platform:
3) Install Firebase Cloud Messaging dependency for specific platform:
4) Install RNFirebase Notification package for specific platform:
Step 2: Register FCM Server Key to Qiscus Chat SDK
You can follow this steps to register:
1) Go to this link to retrieve the FCM server key
2) Then go to this link to register your FCM server key to Qiscus chat SDK
Step 3: Register FCM Token to Qiscus Chat SDK
You need to make sure every time open the app, the FCM token need to be registered in Qiscus chat SDK server. Once the device token has been registered, the target user will receive the notification.
// Get firebase token firstfirebase.messaging().getToken() .then(function (token) { // And then register firebase token into Qiscus Chat SDK server // note: registerDeviceToken method only available on qiscus chat sdk version // 2.9.0 and above. qiscus.registerDeviceToken(token) .then(function() { // firebase token registered into Qiscus Chat SDK server }).catch(function (error) { // error register firebase to Qiscus Chat SDK server console.log(error) }) })Before calling registerDeviceToken() please make sure user already login in Qiscus
Step 4: Handling Incoming Message from Push Notification
You can handle receiving message by following this link, also for the notifications you can follow this steps instructions. This below sample code to handle incoming the notification:
// Handle incoming notification from firebasefirebase.messaging().onNotification(function (notification) { // Create a new notification instance based on notification data const notificationInstance = new firebase.notifications.Notification() .setNotificationId(notification.notificationId) .setTitle(notification.title) .setBody(notification.body) .setData(notification.data) // And set channelId if current platform are android if (Platform.OS === "android") { notificationInstance.android .setChannelId("test-channel") // required for Android 8.0 (API level 26) and higher .android.setSmallIcon("ic_launcher") } // After notification are set, display it to the user firebase.notifications().displayNotification(notificationInstance)})Required channel ID to display notifications in Android 8.0 (API level 26) and higher
Step 5: Handle Push Notification Event
You can handle notification event for example when open the notification, by following this link. This below code an example when redirect to particular chat room:
Firebase.getInitialNotification().then(async data => { if (data == null) return; const notification = data.notification; const [err, lastNotificationId] = await p( AsyncStorage.getItem("lastNotificationId") ); if (err) return console.log("error getting last notif id"); if (lastNotificationId !== notification.notificationId) { AsyncStorage.setItem("lastNotificationId", notification.notificationId); const roomId = data.notification.data.qiscus_room_id; this.props.navigation.push("Chat", { roomId }); }});If you still having trouble to setup push notification, you can reach out to our support team so we can help you!
Remove Notification
Once you logout or do not want to receive the push notification, you can remove the FCM token in Qiscus chat SDK by following code:
//note: registerDeviceToken method only available on qiscus chat sdk version// 2.9.0 and above.qiscus.removeDeviceToken("your FCM token").then(function (user) { console.log("success removing the FCM token") }) .catch(function (error) { console.log(error) })