React Native Sample

AI Tools

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:

Bash
    
 
npm install --save git://github.com/qiscus/qiscus-sdk-web-core.git
Copy

You 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:

Bash
    
 
git clone https://github.com/qiscus/qiscus-chat-sdk-rn-sample
Copy

After 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.

Javascript
    
​x
 
# 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-ios
Copy

If 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.

Notification

You also need to configure FCM by following this Firebase steps and React Native Firebase setup. Next step is registering logged user with the device by request in our REST API endpoint /api/v2/mobile/set_user_device_token. You need to get FCM token first by doing like this:

Javascript
    
 
firebase.messaging().getToken();
Copy

Then, you put your token in below code, you can see the reference in our sample by clicking this sample

Javascript
    
 
export function setDeviceToken(token) {  const userToken = qiscus.userData.token;  return axios    .post(      `${qiscus.baseURL}/api/v2/mobile/set_user_device_token`,      {        token: userToken,        device_token: token,        device_platform: "rn"      },      {        headers: {          qiscus_sdk_app_id: qiscus.AppId,          qiscus_sdk_token: userToken,          qiscus_sdk_user_id: qiscus.user_id        }      }    )    .then(res => {      console.log("success sending device token", res);    })    .catch(error => {      console.log("failed sending device token", error);    });}
Copy

Before calling set_user_device_token please make sure user already login in Qiscus, you can put above code in loginSuccessCallback

Notification Event

You can handle the notification events both from background and foreground. Here is how to handle the events.

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

You still need to implement local notification after FCM receive the events. You should read the details in the react-native-firebase library.

Last updated on

Was this page helpful?