Krissanawat Kaewsanmuang

React native dev,Coffee addict

AirBnB Clone with React Native Part 12: Request Push Notification UI

Published Feb 13, 2020

This is the twelfth chapter of our implementation of an AirBnB clone in React Native. In the previous chapters, we successfully implemented a splash screen on iOS and Android versions of our app.

If you missed any of the previous tutorials, we recommend that you follow them first by going through the following links:

In this chapter, we’re going to implement a turn-on-notification screen. In a turn-on-notification screen, if you have not yet turned on notifications, a permission request to turn on notifications appears once you log in. How the turn-on screen works can be seen in the following video.

Before we set up push notifications and handle request tokens in the next chapter, we’ll create a simple UI for the request to permit notifications. Let’s get started!

First, create a new screen named RequestSendNotification.js

{% gist https://gist.github.com/krissnawat/07e9fdba722a690bafbe2f07e8fef2a1 %}

Inside the file, set the initialRouteName to RequestSendNotification.

As we found out in the previous chapter, we don’t have to show the logout button until the user is logged in and authenticated. So we’ll remove the header from this screen to solve this problem.

We can hide the header by simply wrapping the logout menu inside the onAuthStateChanged option.

{% gist https://gist.github.com/krissnawat/39c44150eba325fc04a3a197a24ff511 %}

Then, we set the header to null for this screen.

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

Now when we reopen the screen, the header is not shown.

Now we can bootstrap the new screen.

Did you know: It’s possible for mobile apps to easily see, hear, sense, and think — all in real-time. Learn how and start building for free with Fritz AI.

Find an Icon

Since this is only a simple app, we can use a screenshot of the original AirBnB icon as our icon. In a real-world application, you’ll have to use Photoshop to create a new icon.

Bootstrap the Screen

Now let’s start adding styles to the screen. We need to import the StyleSheet component from React and the color configuration file to the RequestSendNotification.js file. The color config file contains the configured colors for our app.

{% gist https://gist.github.com/krissnawat/98bb7fe5d6bde48a5c5080fb6bc3624d %}

Then, create two wrappers as displayed in the following code snippet:

{% gist https://gist.github.com/krissnawat/53d3f084b39e33de5fea17d4d6429ec2 %}

And add a suitable style to the wrappers:

{% gist https://gist.github.com/krissnawat/6fa941ccdf5323644d913245d1122034 %}

We can see the text ‘notification’ has moved down the screen now:

Add a Logo

We need to add a logo to the screen. As aforementioned, we can take a screenshot of this logo/icon from the AirBnB app itself. And as a reminder, you’d likely need to work with Photoshop or another image editor in a real-world application.

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

Style the logo using relevant styling options:

{% gist https://gist.github.com/krissnawat/9900439f631b6b99d589a0cf9e5a2b14 %}

Now, the image will appear on the screen as follows.

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.

Add a Title

We need to add a title for this request to turn on the notifications.

{% gist https://gist.github.com/krissnawat/16dba1dfccc3a28923a7e66ef7329a9e %}

Style the title for a better look.

{% gist https://gist.github.com/krissnawat/84b9fdc9a51218b12cb7c99a0c00db11 %}

The resulting screen has a better look now:

Add Description Text

We can add a detailed description of why we want to send notifications.

{% gist https://gist.github.com/krissnawat/587e87d64e527b27d258fdaac5607d5d %}

Add some styling to the description.

{% gist https://gist.github.com/krissnawat/0c0b94df400acb45eaf46c1e6254e3f2 %}

Does it look closer to our final screen?

Add a Notify Button

Add a button to trigger the native request notification popup.

{% gist https://gist.github.com/krissnawat/0e04a67f8627c730bcffe194dc5a12ba %}

We can style the button as well.

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

Our screen now looks like this.

Add a Skip Button

Finally, we should add a skip button.

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

This button will share the style of the previous button, but we need to add a custom text color for this.

{% gist https://gist.github.com/krissnawat/15fb1b5d917bee6ad5d3a9b333544d25 %}

The screen now looks like this.

We have now completed the layout section.

Handle Underlay Color

Now we have to add a function to handle TouchableHighlight color when the button is pressed and released.

If we do not handle this, the default color looks like this:

We can change the color to a custom color to make it look better.

First, create a state and a function to toggle the show and hide states of the overlay.

{% gist https://gist.github.com/krissnawat/24dd9dd25818784cafc1f130e204c30b %}

Then add a function to TouchableOpacity.

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

Now, when the button is pressed, the color will not be changed.

Redirect to Request Notification Screen

We need to modify the LoggedOut screen to navigate to the request notification screen after the log in.

return this.props.navigation.navigate("RequestSendNotification");

The final result of our turn-on screen should look like this.

Summary

In this chapter, we learned how to build a request-to-send-notification screen and use different styles for Android and iOS with platform components. In the next chapter, we’ll work on setting up push notifications for iOS and Android.

React native

Report

Enjoy this post? Give Krissanawat Kaewsanmuang a like if it's helpful.

Krissanawat Kaewsanmuang

React native dev,Coffee addict

Full Stack Web Developer love coding I am a freelance web developer working out of Thailamd . My weapons of choices are : HTML, CSS, Javascript, SQL, Ruby, Ruby on Rails. I literally spend as much hours as possible every day on ...

Discover and read more posts from Krissanawat Kaewsanmuang

get started