Build WordPress App with React Native #26 : Manage device token
Tags: firebase, reactnativewordpress, pushnotification
Published: 2019-12-14 12:20:14

---
title: Build WordPress App with React Native #26 : Manage device token
published: true
date: 2019-12-14 04:17:55 UTC
tags: Firebase,React native Wordpress, push notification
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-26-manage-device-token/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the [React Native Mobile Templates](https://www.instamobile.io/) 

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)
12. [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/)
13. [Build WordPress Client App with React Native #13: Configuring firebase in contact screen](https://kriss.io/build-wordpress-client-app-with-react-native-13-configuring-firebase-in-contact-screen/)
14. [Build WordPress Client App with React Native #14 : Implementing Settings Screen](https://kriss.io/build-wordpress-client-app-with-react-native-14-implementing-settings-screen/)
15. [Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function](https://kriss.io/build-wordpress-client-app-with-react-native-15-forwarding-message-to-inbox-with-cloud-function/)
16. [Build WordPress Client App with React Native #16 : Dark theme](https://kriss.io/build-wordpress-client-app-with-react-native-16-dark-theme/)
17. [Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme](https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/)
18. [Build WordPress Client App with React Native #18 : changing Theme](https://kriss.io/build-wordpress-client-app-with-react-native-18-manually-changing-theme/)
19. [Build WordPress Client App with React Native #19 : Notify user when offline](https://kriss.io/build-wordpress-client-app-with-react-native-19-notify-user-when-offline/)
20. [Build WordPress Client App with React Native #20 : Saving data to cache](https://kriss.io/build-wordpress-client-app-with-react-native-20-saving-data-to-cache/)
21. [Build WordPress Client App with React Native #21 : Splash Screen on iOS](https://kriss.io/build-wordpress-client-app-with-react-native-21-splash-screen-on-ios/)
22. [Build WordPress Client App with React Native #22 : Splash Screen on Android](https://kriss.io/build-wordpress-client-app-with-react-native-22-splash-screen-on-android/)
23. [Build WordPress Client App with React Native #23 : Setup Firebase Push notification [iOS]](https://kriss.io/build-wordpress-client-app-with-react-native-23-setup-firebase-push-notification-ios/)
24. [Build WordPress Client App with React Native #24 : Setup Firebase Push Notification [Android]](https://kriss.io/build-wordpress-client-app-with-react-native-24-setup-firebase-push-notification-android/)

now we will get device token and store on Firebase realtime database for Android side we can get token without asking again but on iOS, we need to do again then we store a token on AsyncStorage that help us didn’t store duplicate token

we do on`App.js` start by import two main package Firebase and AsyncStorage

```
import firebase from 'react-native-firebase';
import AsyncStorage from '@react-native-community/async-storage';
```

## Check device permission

first, we start check permission on a device if they default already accept like on Android we start to get token if we get denied we will request permission again

create new async function name `checkPermission`

```
async checkPermission() {
    firebase
      .messaging()
      .hasPermission()
      .then(enabled => {
        if (enabled) {
          // user has permissions
          console.log('permissions accept');
          this.getToken();
        } else {
          // user doesn't have permission
          console.log('permissions reject');
          this.requestPermission();
        }
      });
  }
```

next, create a function for send request

```
async requestPermission() {
    firebase
      .messaging()
      .requestPermission()
      .then(() => {
        // User has authorised
        console.log('permissions accept in requestPermission');
        this.getToken();
      })
      .catch(error => {
        // User has rejected permissions
        console.log('permission rejected');
      });
  }
```

if user authorize we lunch getToken function

next, create getToken function and paste code below

```
async getToken() {
    let fcmToken = await AsyncStorage.getItem('fcmToken');

    console.log('before fcmToken: ', fcmToken);
    if (!fcmToken) {
      fcmToken = await firebase.messaging().getToken();
      if (fcmToken) {
        try {
          await firebase
            .database()
            .ref('devices_token/')
            .push({fcmToken: fcmToken, platforms: Platform.OS})
            .then(res => res.json())
            .then(res => {
              console.log(res);
            })
            .catch(err => {
              console.log(err);
            });
          await AsyncStorage.setItem('fcmToken');
        } catch (error) {
          // User has rejected permissions
          console.log(error);
        }
        console.log('after fcmToken: ', fcmToken);
        await AsyncStorage.setItem('fcmToken', fcmToken);
      }
    }
  }
```

this function work pretty simple first check token already in-store on AsyncStorage or ? if not found we get token and save on realtime database

now we set all done let try ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/cd82ba6a-c7b8-4f9c-b3b7-1599d84c10e7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45LBRTBCEO%2F20191214%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191214T081843Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQCxkrhe9QCPBBoZOx9eVWEPkHD6UivBE3DkcLkqBAZkggIgF288InQu%2FeKx%2BYU5%2Fmz4tEhnRlJXqvFEK9cCMve0epEq0gIIPhAAGgwyNzQ1NjcxNDkzNzAiDEQxblYlZBS6nXwrFyqvAomfSqBh4nRmnz35uV0%2B%2FjpAWVV%2Fjj%2BAHb%2FMFgelAkeq5jfH4TPfYf%2FbrbhwHFGi9LoMMv0ntYvs%2FyKcsJfVXevAw7cHF6c6saPKlRRJEy4ZCmNMx2JEHqJd36FqumBaCku8uLA4rluNami2Of8EfCmBEfVUzfbNFJN43PM8e5tE0WZtskfEOKjY4GiuCmdBGgqetss%2B4jPiZxKmPuAztnGaIPlPKxiRuHrrntbdTDkbkorAv4wtTb0hw9bFV782vhlPcgyyUlIMSJsIbVWZhMJWw4Oc8RFl0jwZR3oUTk7D0Py9KrrgSzEZCp%2BkLPIP9Zm1qvoV3unKmnplYZfht9YYEifPfqGHgo9ocN3sWC1MqLzPUK6QkXq7IZpbwhC5mBcqM%2BTMYpVk822egWQXKTC22NHvBTrNAmIO7NsWzguznV4sGTzIPo%2BDzdFZz3KkvjWpGNioB0vPMeIurT84xSq49BWJUTl5dQo1bw2H3%2BZtxOAJiDwBaLIckETvJ6PeI8zI6uDB9M0Z0tvntryy1yySWejJvbhiyMHHkbWqlSo48G474QXRMPHJenW4AbAkUgfHIIUAQyP%2BN7hi2FYCkVVte%2BQdV%2F7%2BZ7iWT4DsAfgEZTiHBsXhn2WgdBznOaHv28NHnoEtsVEvpVox8T%2BDGeynT9g3bxAm%2B7At%2BcJTtKYgdr8dVBaGlifhbEiNXPtXYyXx2srdsY6Hs6MT99AAAU%2FeOD24wDobW3gs%2BtHV9v4XHrb7RuWA4jU%2BiPBEgLte9%2Flmt6Vxi4GQL5ysDjqX%2Bakw5WJXHLxZU33nImaJs5r5VhcY0ktEGD%2FRf7B75uP5t6N%2BKx6MSdlwd6aAe5fhoRrln2BWrQ%3D%3D&X-Amz-Signature=6836faedab1a83f4f7b3714998d125dde27b3eef33186d29e5d7b5eff66fc2a1&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

now we hit allow and your will saw token will add to a realtime database

 

![](https://kriss.io/wp-content/uploads/2019/12/img_5df49a861f89e.png)

## Summary

now we can get and set device token for using in push notification

The post [Build WordPress Client App with React Native #26 : Manage device token](https://kriss.io/build-wordpress-client-app-with-react-native-26-manage-device-token/) appeared first on [Kriss](https://kriss.io).