.st0{fill:#FFFFFF;}

How To Add React Native Push Notification to Android Apps? 

 January 28, 2022

React-Native Push notification ain’t a secret anymore! Every other online business with apps and websites is aiming for improved user engagement and boost in website traffic putting push notification into the limelight of the marketing show.

In this article we will discuss how to add react native push notifications to an android supporting app. Let’s get started with it!

Steps towards a healthy marketing implementation 

Step 1: Setting up the backendless

First thing first, sign in with Backendless Console. Register for a new account for free at “develop.backendless.com/registration” if you are new at this.

Once you are successfully registered with the developer account, build a backendless application.

Step 2: Installing the React Native

Since the app will be built on react native so the next step brings us to install react native. Keep this in mind to select the option “Building Projects with Native Code” tab and “Android” as we are creating an android app.

Step 3: Creating the Application

The application will be generated using React Native CLI by running the following code:

“react-native init RNWonderPush”

It will take a few minutes for the process to start. Once it is finished, you can check the app efficiency. You can use either real devices, or an emulator to run the app.

READ MORE:  Avast Mobile Security Pro 6.39.5 Apk

The following code will run your app:

“cd ./RNWonderPush”

“react-native run-android”

It will not only develop your app but also runs the Metro Bundle process as well.

When it’s completed, you will come to the next screen on your device/emulator.

Step 4: Setting up the backendless JS-SDK 

 Now we will focus on the next step which involves installing the Backendless JS-SDK. Run the following command:

“npm i backendless –S”

To initialize Backendless in your app, get the Backendless App Id and API Key. You will find these two in Backendless Console on the Dashboard or on the App Setting page. Since you are building an Android application, use AndroidApiKey for “apiKey”.

Put the following code into “./App.js” file, but use AppId and ApiKey, not mine! =)

“import Backendless from ‘backendless’”

“const APP_ID = ’54AED425-5613-CDD4-FFB3-F3443977XXXX’;”

“const APP_KEY = ‘D82A3D3B-4B7C-242B-FF2A-5D7987E5XXXX’;”

“Backendless.initApp(APP_ID, APP_KEY);”

Step 5: Setting up the Firebase Messaging

In order to set up push notifications in android applications, you must choose FCM to add the push notifications feature in the android app.

  • Create a new Firebase App.
  • Customize your app for Android by choosing the “Android” icon.
  • Type your “Android package name”. For instance “com.rnwonderpush”.
  • Now download the generated file “google-services.json”  and upload it into your project at the following path: /{YOUR_APP_NAME}/android/app/google-services.json
  • At last you must have two modified files and one new file. Now copy the “Server Key” from the Firebase app and paste it into Backendless.
  • Simply click “Save” and you are done with this step.
READ MORE:  Lack Of Required Preparation Can Affect The Quality Of Your Resin Driveway Installation

Step 6: Setting up Backendless JS-SDK patch for React Native

To start with this step, run the following command in your terminal from your app’s directory:

“npm i backendless-react-native -S”

Also, add native modules with the following command:

“react-native link”

Once you have imported Backendless JS-SDK line in the “./App.js” file:

import ‘backendless-react-native”.

Lastly modify the /{YOUR_PROJECT_NAME}/android/app/src/main/AndroidManifest.xml file.

Now insert the  following code right after the “com.facebook.react.devsupport.DevSettingsActivity” activity:

Make sure you check everything is working properly by running the following command on your device, or emulator:

“react-native run-android”

Step 7: Registering the device for Push Notifications

We will be starting this step by adding the following code to the “./App.js” file:

constructor(props) {

super(props);

Backendless.Messaging.registerDevice([‘default’])

.then(r => console.log(‘registerDevice:’, r))

.catch(e => console.log(‘registerDevice:’, e));

}

Check the JS Remote Debugger through your real device or you can press the menu button on the emulator to open the Dev Menu.

Press “Debug JS Remotely”. That will take you to a new browser page. Open the Browser Dev Console.

When you see the “registerDevice” message, it means your device is registered on the server. You can verify it on the Backendless Dev Console by going to Data and choosing the “DeviceRegistration” table.

Step 8: Sending Push Notifications to your React Native Android App

READ MORE:  Understand How the in-hand Salary Calculator Works

Start this step by developing a template for push notification, save it, and press send by using Backendless Dev Console or Backendless API in one line.

Simply create a push template without any extra configuration. Go to Messaging -> Push Notifications and select a new push template. When you are done filling the fields, you will notice an emulator where you will be able to see how your push notification will look on the chosen device.

Now your device is set to send, or receive push notification. Just click on the “Send Now” option and wait for a few seconds.

Conclusion

We hope you get a gist of the whole process of adding react native push notifications to your android app. Push notifications have become a crucial part of the marketing system. Do not miss out the advantages of this remarkable invention. Use these steps to implement push notification service to your app.

related posts:

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}