How to Add Android Push Notifications to a React Native App!

Introduction

One of the most frequently requested features when building a mobile app is how to configure React Native push notifications. So, you must grasp this aspect of app development. It is no secret that push notifications are a very useful tool for any business.

In this post, we will be looking at how to add push notifications to a React Native app by implementing and testing it on the Android platform.

What Push Notifications Are

Push notifications are brief messages that appear on a user’s smartphone or desktop to prompt them to take an action. These notifications can be an ideal way to connect with your audience if you want to keep them informed about the newest deals you are providing or remind them of the products that are about to expire in their shopping cart.

What React Native Is

A Javascript framework called React Native is used to create natively rendered mobile applications.

What Firebase Is

Firebase is known as Backend-as-a-Service (BaaS) platform. It is getting well-known every day because of the ease of integration and range of features it offers.

Now let’s dive into – how to add Android push notifications to a React Native app.

Structure

We will proceed step by step, so you can follow along with ease.

1. Build A Firebase Project And Look For Push Options.
2. Build A Basic React Native App.
3. Install The Dependency Of Push Notifications.
4. Create The App On Android.

So, let’s start.

1. Build A Firebase Project And Look For Push Options

Make your first project on Firebase by going there. This is how your console must appear.

You can access the project dashboard by clicking on your project. Search for the “Cloud Messaging” tab. The magic is going to happen here!

Push Notifications Settings

The push notifications settings for web, android, and iOS are also available in the Firebase Console. For setting up options, you must create an Android app in the Firebase console before configuring options.

You will be required to enter the package name of the app and provide google-services.json during the process. Make sure your app has a special package name or bundle ID.

2. Build A Basic React Native App

Create a blank react-native app.

Using a device, you can run the created basic React-native app.

A default screen will be shown

Change this front page’s UI by altering “app.js”.

3. Install The Dependency Of Push Notifications

To implement push notifications, you can use two main dependencies or plugins.

1. React-native push notifications.
2. React-native Firebase

We will use the React-native push notification plugin which is created only for push notification purposes

Install the dependency

1. Edit android/build.gradle

Edit the firebaseVersion and googlePlayServicesVersion in your android/build.gradle file. 

2. Edit AndroidManifest.xml

In your AndroidManifest.xml, add the following before “<application.

3. Edit android/settings.gradle
4. Add Push Functionalities To Your App

You must call “PushNotification.configure” at the app start to implement push. This command starts the push functionality in the app.

When an app starts, we will register the app and get a token as proof of registration. Plus, when a notification is received, we will get the data through onNotification method. Include this file in the code by importing it into App.js.

Now build this app for Android and test.

4. Create The App On Android

Building on android is very easy. Make sure you will have everything you need to build a react-native app.

Create the app for android using

This will enable your connected device to build and run the app.

5. Send Push Notification From Firebase Console

Using the Firebase console, create a simple push notification and send it to every connected device or send it using the token you get in the debugger.

Congratulations! We have successfully added android push notifications to a React-native app.

The Bottom Line Is

React Native Push notifications are a powerful tool that helps you to connect with your users. So, follow the above-mentioned steps for adding android push notifications to a React Native app. Moreover, if you want to create push notifications within a few minutes, visit WonderPush, the leading Push notification service provider.