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

React native Airbnb

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

import React, { Component } from "react";
import { Text, View } from "react-native";

class RequestSendNotification extends Component {
  render() {
    return (
      <View>
        <Text> Notification </Text>
      </View>
    );
  }
}

export default RequestSendNotification;

 

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.

headerRight: firebase.auth().onAuthStateChanged(user => {
        if (user) {
          <TouchableOpacity
            style={{ marginRight: 30 }}
            onPress={() =>
              Alert.alert("Logout alert", "Do you really want to Logout...", [
                {
                  text: "NO",
                  onPress: () => console.warn("NO Pressed"),
                  style: "cancel"
                },
                {
                  text: "YES",
                  onPress: () =>
                    firebase
                      .auth()
                      .signOut()
                      .then(() => {
                        Alert.alert("Success fully LogOut");
                      })
                      .catch(function(error) {
                        // An error happened.
                      })
                }
              ])
            }
          >
            <IonIcons name="md-log-out" size={30} />
          </TouchableOpacity>;
        }
      }),

 

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

class RequestSendNotification extends Component {
  static navigationOptions = {
    header: null
  };

 

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.

import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import colors from "../styles/color";

 

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

class RequestSendNotification extends Component {
  static navigationOptions = {
    header: null
  };
  render() {
    return (
      <View style={styles.wrapper}>
        <View style={styles.content}>
          <Text> Notification </Text>
        </View>
      </View>
    );
  }
}

export default RequestSendNotification;

 

And add a suitable style to the wrappers:

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: colors.white
  },
  content: {
    marginTop: 80,
    paddingLeft: 20,
    paddingRight: 20
  }
});

 

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.

<View style={styles.wrapper}>
   <View style={styles.content}>
     <Image  style={styles.notificaion_logo} source={require('../img/message.png')} />
     <Text> Notification </Text>
   </View>
 </View>

 

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.

<Text style={styles.title}>
         Turn on notifications?
</Text>

 

Style the title for a better look.

title: {
    marginTop: 30,
    fontSize: Platform.OS == 'ios' ? 35 : 32,
    color: colors.black,
    fontWeight: '600',
  },

 

The resulting screen has a better look now:

Add Description Text

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

<Text style={styles.description}>
   We can let you know when someone messages you,
   or notify you about other important account activity.
 </Text>

 

Add some styling to the description.

description: {
   fontSize: Platform.OS == 'ios' ? 22 : 18,
   paddingRight: 30,
   marginTop: 15,
   lineHeight: 22,
 },

 

Does it look closer to our final screen?

Add a Notify Button

Add a button to trigger the native request notification popup.

<TouchableHighlight
   style={styles.notifyButton}
 >
   <Text style={styles.buttonText}>Yes, notify me</Text>
 </TouchableHighlight>

 

We can style the button as well.

notifyButton: {
  backgroundColor: colors.green01,
  width: Platform.OS == "ios" ? 200 : 160,
  height: Platform.OS == "ios" ? 60 : 50,
  paddingTop: 12,
  paddingBottom: 12,
  borderRadius: 3,
  marginTop: Platform.OS == "ios" ? 60 : 30
},
buttonText: {
  color: colors.white,
  fontSize: Platform.OS == "ios" ? 25 : 18,
  fontWeight: "600",
  alignSelf: "center",
},

 

Our screen now looks like this.

Add a Skip Button

Finally, we should add a skip button.

<TouchableHighlight style={styles.notifyButton}>
   <Text style={[{ color: colors.white }, styles.buttonText]}>
     Yes, notify me
   </Text>
 </TouchableHighlight>
 <TouchableHighlight style={styles.skipButton}>
   <Text style={[{ color: colors.green01 }, styles.buttonText]}>
     Skip
   </Text>

 

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

buttonText: {
    fontSize: Platform.OS == "ios" ? 25 : 18,
    fontWeight: "600",
    alignSelf: "center"
  },
  skipButton: {
    color: colors.green01,
    borderColor: colors.green01,
    width: 100,
    borderWidth: 2,
    paddingTop: 12,
    paddingBottom: 12,
    borderRadius: 3,
    marginTop: 15
  }

 

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.

constructor(props) {
    super(props);

    this.state = {
      pressNotifyBtn: false,
      pressSkipBtn: false
    };
  }
  handleNotifyBtnHideUnderlay = () => {
    this.setState({ pressNotifyBtn: false });
  };

  handleNotifyBtnShowUnderlay = () => {
    this.setState({ pressNotifyBtn: true });
  };

  handleSkipBtnHideUnderlay = () => {
    this.setState({ pressSkipBtn: false });
  };

  handleSkipBtnShowUnderlay = () => {
    this.setState({ pressSkipBtn: true });
  };

 

Then add a function to TouchableOpacity.

<TouchableHighlight
         onPress={() => console.log("111")}
         style={ styles.notifyButton}
         underlayColor={colors.green02}
         onShowUnderlay={this.handleNotifyBtnShowUnderlay}
         onHideUnderlay={this.handleNotifyBtnHideUnderlay}
       >
         <Text style={[{ color: colors.white }, styles.buttonText]}>
           Yes, notify me
         </Text>
       </TouchableHighlight>
       <TouchableHighlight
         style={styles.skipButton}
         onPress={() => console.log("111")}
         onShowUnderlay={this.handleSkipBtnShowUnderlay}
         onHideUnderlay={this.handleSkipBtnHideUnderlay}
         underlayColor={colors.gray03}
       >
         <Text style={[{ color: colors.green01 }, styles.buttonText]}>
           Skip
         </Text>
       </TouchableHighlight>

 

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.



Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.