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
Inside the file, set the
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
Then, we set the header to null for this screen.
Now when we reopen the screen, the header is not shown.
Now we can bootstrap the new screen.
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.
Then, create two wrappers as displayed in the following code snippet:
And add a suitable style to the wrappers:
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.
Style the logo using relevant styling options:
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.
Style the title for a better look.
The resulting screen has a better look now:
Add Description Text
We can add a detailed description of why we want to send notifications.
Add some styling to the description.
Does it look closer to our final screen?
Add a Notify Button
Add a button to trigger the native request notification popup.
We can style the button as well.
Our screen now looks like this.
Add a Skip Button
Finally, we should add a skip button.
This button will share the style of the previous button, but we need to add a custom text color for this.
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.
Then add a function to
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.
The final result of our turn-on screen should look like this.
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.
Also published on Medium.