AirBnB Clone with React Native Part 14: Managing Device Notification Tokens [iOS]
Tags: heartbeat, programming, mobiledevelopment, reactnative
Published: 2020-02-26 08:00:36

---
title: AirBnB Clone with React Native Part 14: Managing Device Notification Tokens [iOS]
published: true
date: 2020-02-25 15:24:11 UTC
tags: heartbeat,programming,mobile-development,react-native
canonical_url: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-14-managing-device-notification-tokens-ios-2748f7157822
cover_image: https://cdn-images-1.medium.com/max/1024/1*iIEhgq6z5aE3Ipn7Ejz8GQ.jpeg
---


In the previous chapter of our [AirBnB clone with React Native](https://instamobile.io) series, [we set up push notifications in both Android and iOS](https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-13-firebase-push-notifications-for-ios-and-android-7b0d4a29fc49). In this chapter, we’ll see how to get user permissions to allow push notifications in iOS.

We’ll use a token stored in async storage to achieve this task. This token is used to persistently ask the user to allow notifications after every login until the option is accepted. Once accepted, the token is saved to the Firebase real-time database.

### Getting and Storing the Token

Open the file RequestSendNotification.js, which we implemented when we previously set up push notifications.

First, we implement a function that checks whether the user has accepted or rejected the token. If the token has been rejected, we display a native request notification for iOS. If the user has already accepted the token and saved it to the Firebase real-time database, then we can use a token to send a notification to the user using Firebase Cloud function that we’ll implement in the next chapter.

Import the three packages we need for the implementation:

- react-native-firebase package
- AsyncStorage for backup on local
- Platform component for getting an operating system name, eg.Android, iOS

{% gist https://gist.github.com/krissnawat/b8668a59ab55862e183bad5fbefd8400 %}

> Personalization, instant expertise, game changing user experiences — these are just a few of the values machine learning can add to mobile apps. [Subscribe to the Fritz AI Newsletter to discover more.](https://www.fritz.ai/newsletter?utm_campaign=fritzai-newsletter-values2&utm_source=heartbeat)

### Create a function to check Permission status

First, we check user permissions. If the user has already given permission, we redirect the user to the home screen. Otherwise, this means the user has rejected these permissions.

{% gist https://gist.github.com/krissnawat/ff3161a5cb1bcd9ec61ee7b3b17dc3b9 %}

We need to run this function every time the user reloads the screen:

{% gist https://gist.github.com/krissnawat/da2f4fb4d3ed2a04766943e5d80e6d13 %}

If the user has not agreed to receive notifications, run the following requestPermission function to show a popup notification that asks the user to allow push notifications.

{% gist https://gist.github.com/krissnawat/9c6968caf21bd05a0dbb3ca801bd9907 %}

If the user accepts the request, retrieve the token by calling the getToken function.

The implementation of the getToken function focuses on checking whether the token is locally available, and if not, gets the token and stores it in the Firebase real-time database. Save the token to local storage as well.

{% gist https://gist.github.com/krissnawat/3ec104df36f5cc7e8d34fdd88f01aa2d %}

We design the popup notification layout using the button design we already used in the previous chapter.

{% gist https://gist.github.com/krissnawat/a371ae13e62314f20325ffca40639f87 %}

Call the requestPermission function if the user presses the “Yes” option. Otherwise, direct the user to the home screen.

Now we can send the user a request to allow notifications.

At the end of its implementation, the requestPermission function also directs the user to the home screen. When a user allows push notifications, we’ll be able to see the token saved into the Firebase database.

![](https://cdn-images-1.medium.com/max/795/1*uDFux85ofiKUuoxSgmZP9w.png)

We can test the push notifications by sending a test message using cloud messaging.

![](https://cdn-images-1.medium.com/max/580/1*1C4DV_nJB4beayfSwrB90A.png)

That’s it! We have completed the next step of our implementation of the AirBnB clone.

### Summary

In this chapter, we learned how to handle the request to send push notifications for iOS. In the next chapter, we will implement deep linking with React Navigation.

### Resources

- [React Native Firebase - Simple Firebase integration for React Native](https://rnfirebase.io/docs/v5.x.x/messaging/device-token)
- [React Native Firebase - Simple Firebase integration for React Native](https://rnfirebase.io/docs/v5.x.x/database/reference/database)

_Editor’s Note:_[**_Heartbeat_**](http://heartbeat.fritz.ai/) _is a contributor-driven online publication and community dedicated to exploring the emerging intersection of mobile app development and machine learning. We’re committed to supporting and inspiring developers and engineers from all walks of life._

_Editorially independent, Heartbeat is sponsored and published by_[**_Fritz AI_**](http://fritz.ai/)_, the machine learning platform that helps developers teach devices to see, hear, sense, and think. We pay our contributors, and we don’t sell ads._

_If you’d like to contribute, head on over to our_[**_call for contributors_**](https://heartbeat.fritz.ai/call-for-contributors-october-2018-update-fee7f5b80f3e)_. You can also sign up to receive our weekly newsletters (_[**_Deep Learning Weekly_**](https://www.deeplearningweekly.com/) _and_[](https://www.fritz.ai/newsletter)_the_ [**_Fritz AI Newsletter_**](https://www.fritz.ai/newsletter/?utm_campaign=fritzai-newsletter&utm_source=heartbeat-statement)_), join us on_[](https://join.slack.com/t/fritz-ai-community/shared_invite/enQtNTY5NDM2MTQwMTgwLWU4ZDEwNTAxYWE2YjIxZDllMTcxMWE4MGFhNDk5Y2QwNTcxYzEyNWZmZWEwMzE4NTFkOWY2NTM0OGQwYjM5Y2U)[**_Slack_**](http://fritz.ai/slack)_, and follow Fritz AI on_[**_Twitter_**](https://twitter.com/fritzlabs) _for all the latest in mobile machine learning._

* * *