React Native with Push Notifications and Firebase – Part 4 of 5 How to create, setup and configure a React Native project with Push Notifications support using Firebase SDK and API - Part 4 of 5: Laying out the React-Native UI

React Native with Push Notifications and Firebase - Part 2 of 5

In this five-part tutorial we’ll see how we can create a sample React Native app (you might call it a “Hello World” or “boilerplate”) that will be capable of receiving Push Notifications using Firebase. Such guide could be a great headstart for React Native beginners, yet also for those intermediate or experienced developers who want to know more about push notifications: how they work, what are their best usage scenarios and how much they can be an improvement for almost any mobile app.

The entire source code shown throughout this tutorial, as well as a working sample app built with it, is available on GitHub under MIT license: if you happen to like it, don’t forget to give it a star (and a like to this website)!

For the sake of simplicity this tutorial has been splitted into multiple parts, each one dedicated to a specific sub-topic:

  • Part 1 of 5: Understanding Push Notifications, in which we’ll try to understand what push notifications actually are and the impact they could have (when used properly) on a typical client-server app.
  • Part 2 of 5: Setup React Native and Firebase, where we’ll deal with the installation and configuration of our whole development stack: React Native, the Firebase SDK and the Visual Studio Code environment, together with the required settings to get our app ready to work with Android and iOS.
  • Part 3 of 5: Configure the Firebase Service, in which we’ll create the Firebase Project and configure the Firebase Push Notification Services to ensure that our React Native app will be able to receive push notifications through the Firebase API on any Android and iOS device.
  • Part 4 of 5: Design and Test the React Native UI, where we’ll test our front-end skills by laying out a React-Native UI in order to make our app actually able to receive push notifications and send HTTP requests to the server to remotely keep track of our actions – and possibly fire subsequent push notifications to other clients.
  • Part 5 of 5: Server-Side Handler, in which we’ll use ASP.NET Core to create a sample, lightweight web service that will be able to receive HTTP requests issued by the clients and/or feed them with push notifications through the Firebase API.

In this fourth post we’ll see how we can create the front-end UI layout using React Native and handle the push notifications from the client-side.

Create the React Native UI

Now that all the pre-reqs have been set in place, let’s see how we can implement our app’s UI using React Native. This step requires writing (and commenting) a good amount of  JavaScript code, therefore it can be useful to take a look at this tutorial’s GitHub project:

And, more precisely, at the App_FireBase.js file. That file contains all the required source code to emulate a send-and-receive notification roundtrip using the Firebase send API, which allows a React Native app to send push notifications through Firebase. Do you remember the high-level workflow schema published in the Part #1 of this tutorial? That’s precisely the case, with the only difference that the Web Server role is being handled by the Firebase send API.

Import files

Here are the relevant parts of the App_FireBase.js file, starting with the import statements:

Nothing strange here: we’re just referencing all the modules that we’re going to use within the file, including the firebase packages.

Constants

These are two required constants: the first one can be left like it is, while the latter must be changed with the Firebase Server Key that you can find on the Firebase console (see Part #3 of this tutorial), just like the screenshot below:

React Native with Push Notifications and Firebase - Part 4 of 5

Constructor and Lifecycle Hooks

The next part of the file is dedicated to the App class implementation: as we can see, we’re defining four state variables that we’ll pass to the UI template and a good amount of internal methods that will be executed upon componentDidMount() and componentWillUnmount() events of the class’s life cycle.

Let’s take a look at these methods’ implementations to see what they do.

Create Notification Channel

The createNotificationChannel() method builds the FCM notification channel, which is required by Android devices, using the fcmChannelID constant defined above.

Check Push Notifications Permissions

The checkNotificationPermissions() method performs two important tasks:

  • It ensures that the user already granted the required permissions to allow push notifications usage: in case it doesn’t, it tells the OS to ask for them.
  • After the user gave permissions (or if they have already been granted) it sets the FCM Token to the corresponding state variable, so that it can be used within the UI as well as by other methods: that value is required to send push notifications to the client that is currently running the app, which is something we’re going to do in a short while.

It’s worth noting that the token is being set using an internal setToken() method, which has been defined to avoid code repetition (to keep the code more DRY) since we need to perform those steps two times.

Add Notification Listeners

The addNotificationListeners() method is in charge of registering all the required listeners for incoming push notifications whenever the class is being mounted; the removeNotificationListeners() does the opposite, such as unregistering them all when the class gets unmounted.

Send Push Notifications to Server

The sendToServer() method, as its name implies, sends a text message to the Web Server through a push notification that gets created on-the-fly. As we’ve already said, the HTTP request used to send the data to the server is calling the Firebase send API instead of a real Web Server. That call is performed using the API specifications and it will only work if the Authorization header is being properly set.

Helper methods

The writeToClipboard() method is just a helper function that allows the UI to send data to the clipboard and on screen: it will be called from the app UI to make us able to easily retrieve the FCM Token and use it elsewhere (for testing purposes only): you won’t likely need it in production.

UI Layout & Styling

The render() method is in charge of displaying the UI on screen. As we can see, we make good use of a bunch of the constants, state properties and methods that we talked about early on: we also included the styles constant, which contains the CSS styling to make the UI of our testing app a bit less ugly.

Test Drive & Screenshots

Let’s see what happens if we run the app using Visual Studio Code and a Android emulator:

React Native with Push Notifications and Firebase - Part 4 of 5

If we did everything properly, we will see the above UI, where we can either:

  • Fetch our FCM Token, which can be used to send push notifications to this app from the Firebase online console or from any other push notification service.
  • Input a message and send it as a push notification using the sendToServer() method that we revieved early on – which will internally call the Firebase send API.

The former option requires a bit more work, but it can be done quite easily thanks to the Test Lab section of the Firebase online console:

React Native with Push Notifications and Firebase - Part 4 of 5

If we try to perform the latter option, we should be able to see the full notification roundtrip in a matter of few seconds:

React Native with Push Notifications and Firebase - Part 4 of 5

The text below the Received Notification panel is where we’ll see the content of any push notification addressed to our app (using the FCM Token) that our smartphone (or emulator) will receive.

DISCLAIMER: this tutorial’s source code has been properly verified and is fully available to GitHub free of charge and with MIT-based license: however, it requires a good amount of work – which we made our best to explain in this 5-parts tutorial – that is not easy to pull off and might require additional work, especially when changing its React Native and/or other NPM packages versions: we’ll be unable to give additional support if you’ll be unable to make the project run.

Conclusion

That’s it! If everything went good, it means we’ve successfully created a working React Native UI that can be used to send and receive push notifications on Android and iOS device: the receive part is handled by the Firebase app packages, while the send part is being performed using the Firebase send API… Which can be OK for testing scenarios, but definitely not good for production deploy, because it requires too many info (such as the Server Key) which should be kept secret from the app front-end.

For that very reason, in the next chapter we’ll see how to replace the Firebase send API with a back-end Web Service made with .NET Core.

Fork me on GitHub

Part 5 of 5: .NET Core back-end Web Service

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

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.