Message:

Subscribe rss
Blog categories
All | Backendless features
How to Enable Push Notifications using Backendless in a React Native App (Android)
March 7, 2019 by Vladimir Upirov

How to Enable Push Notifications in a React Native Android App

React Native helps you build a real native mobile application using JavaScript (for more information about React Native, you can check out the documentation on Github here). The Backendless JavaScript SDK (JS-SDK) already has full compatibility with React Native – just install it from NPM, require in your code, and go. But since the release of Backendless 5.2.x, having only the JS-SDK is not enough to access all the Backendless features; in some cases, we need to have access to native modules for working with certain features such as Push Notifications. We’ve therefore decided to create another module on JS for using exactly in a React Native environment. It’s a patch of sorts for JS-SDK.

In this article series, I’m going to show you how to use this additional JS module. There are will be a total of 3 articles:

  • How to enable Push Notifications using Backendless in a React Native App (Android)
  • How to enable Push Notifications using Backendless in a React Native App (iOS) (coming soon)
  • How to customize Push Notifications using Backendless (coming soon)

Today, we get started with creating a simple Android application on React Native for receiving Push Notifications. Alright, let’s do it.

Setup Backendless

Make sure you have a Backendless developer account. If you do not have one, you can register for free at https://develop.backendless.com.

Register for Backendless Developer Account

Create a new Backendless application. For this walk-through, I called mine RNPushDemo.

Install React Native

As I mentioned earlier, our app will be based on React Native, so let’s install React Native as described here. Make sure you selected the “Building Projects with Native Code” tab and “Android” as well, because in this article we are going to create an Android application.

Install React Native for Android in Backendless

Create Application

Next we are going to generate our application using React Native CLI. Just run the following command in your terminal:

It may take a few minutes to run. Once it’s done, you can run the app. I use real devices for testing, but you can run on an emulator if you have one. Otherwise, you need to create a new one. The following link will help you if have any problems with running.

Go into the directory with your application and run the app.

It builds your app and also runs Metro Bundle process.

Metro Bundler

When it’s done you will see the next screen on your device/emulator:

React Native app without content

If it works, that means you are on the right track. In case if you can’t see the screen, you should go through the previous steps and make sure that you followed all of the instructions.

Setup Backendless JS-SDK  

Now we are going to install Backendless JS-SDK. Run the following command in your terminal from your app’s directory:

Now we need to initialize Backendless in our app. To initialize, we have to get the Backendless App Id and API Key. You can find these in Backendless Console on the Dashboard or on the App Setting page. As you know, we’re developing an Android application, so for “apiKey” we should use AndroidApiKey instead of JSApiKey. Of course, we can use JSApiKey but in Backendless Analytics we would like to see separate data for Android, iOS and Web applications.

Find App ID and Android API Key

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

That’s it! We will come back to JS-SDK a little bit later.

Setup Firebase Messaging

In order to get Push Notifications working in Android applications, you should use Google Cloud Messaging (GCM) or Firebase Cloud Messaging (FCM). GCM is deprecated and the API will be removed in April 2019, so in our app, we will use FCM.

  1. First, you have to create a new Firebase App.
  2. Next, configure your app for Android. For that, just click the “Android” icon as shown on the screenshot:
    Register for Firebase Cloud Messaging
  3. Then, input your “Android package name”; in my case, it’s com.rnpushdemo . If your app name is different than mine, you can find the package name in manifest file by the path: /{YOUR_APP_NAME}/android/app/src/main/AndroidManifest.xml
    Register app with Firebase Cloud Messaging
  4. Next, you need to download the generated google-services.json  and put it into your project at the following path: /{YOUR_APP_NAME}/android/app/google-services.json 
  5. Now, add two lines as shown on the screenshot :
    Edit Firebase-generated SDK
    Note
    : the line implementation 'com.google.firebase:firebase-core:16.0.1'  is unnecessary.
  6. The last step you can skip for now

At the end, you should have two modified files and one new file; make sure you have the same as me:

Android files saved in Push demo app

Now, we need to copy “Server key” from our Firebase app:

Server key from Firebase Android app

Paste the key into Backendless. You can specify channels/patterns, but for this demo, I will just select all channels.

Paste Firebase server key into Backendless console

Click “Save” and that’s it.

Setup Backendless JS-SDK Patch for React Native

The patch for the Backendless JS-SDK that I told you about at the beginning of the article simply upgrades some methods of the SDK and, of course, also includes native implementation.

Run the following command in your terminal from your app’s directory:

Also inject native modules with this command:

And import the patch right after importing Backendless JS-SDK line in ./App.js  file:

Also, we have to increase minSdkVersion  from 16 to 21 in /{YOUR_PROJECT_NAME}/android/build.gradle .

Finally, change the /{YOUR_PROJECT_NAME}/android/app/src/main/AndroidManifest.xml  file a little bit. Add the following code right after com.facebook.react.devsupport.DevSettingsActivity  activity:

A few explanations for what those lines actually need:

com.reactlibrary.RNBackendlessPushNotificationService – we need this for receiving and processing push notifications and also delivering the information to JS Code.

com.reactlibrary.RNBackendlessPushNotificationActionReceiver – we need this for processing push notification actions and delivery of the information to JS Code.

Time for a test. Let’s check if everything is still working properly. Run the following command in your terminal and check your device or emulator:

Note: In the event that you see a red alert on your device, just stop Metro Bundler process and run the previous code again.

Register Device for Push Notifications

In order for Backendless to be able to deliver push notifications to the device, we need to register it. Of course, the device should be registered when the app is installed on the device, but we have a demo app so I just register the device in the App constructor. To do so,  add the following code into the ./App.js  file:

Let’s check using the JS Remote Debugger. To do this, you need to shake your real device or press the menu button on the emulator to open the Dev Menu.

Debug JavaScript on Android

Press “Debug JS Remotely”. This will open a new browser page. Open the Browser Dev Console.

Debug Android app JS remotely

As you can see, there is a message stating  registerDevice ; that means that our device is registered on the server. Let’s go verify it on the Backendless Dev Console. Go to Data and select the “DeviceRegistration” table.

DeviceRegistration table in Backendless console

Yep, my device is there.

Send Push Notifications

Now I would like to share a new feature of Backendless: it’s called Push Notification Templates. You can create a template Push Notification in just a few clicks, save it, and send it using Backendless Dev Console or Backendless API in one line. There are lots of custom configurations for Android and iOS operating systems. This feature will be covered in more detail in another article.

For now, I’m going to create a simple push template without any extra configuration. Go to Messaging -> Push Notifications and compose a new push template. Fill out the Message, Title and Subtitle fields:

Create Push Notification in Backendless

On the right side, you can see an emulator where you can see how your push notification will look on the device.

Now, just skip WHO and OPTIONS sections and switch to SAVE. Input a template name and click the Save button.

Save push notification template

Now we are ready to send and get our push notification on the device. Just click the Send Now button and wait a few seconds.Push notification received from Backendless

Here we go, I got it, it’s amazing, isn’t it?

Push notification received from Backendless

Now, let’s create a new API Service and try to send a new push notification with the template. As always, I’m going to use Codeless as, for me, it is very easy to create and use.

Create codeless push notification API

As you can see, it can’t be much simpler: only one line of code. Alright, let’s deploy the service and go send it.

Test push notification API

Yes, it came! I didn’t capture a screenshot with the new push because it’s just the same as it was before when we sent from the Push Notifications Page.

Get Push Notification in JS Code

Let’s look at another equally important feature. In many cases, you want to get a notification in JavaScript Code when a new push notification is coming, so we have an interface to do just that. There are two methods for subscribing and unsubscribing:

  • Backendless.Messaging.addPushNotificationListener(callback)
  • Backendless.Messaging.removePushNotificationListener(callback)

So let’s modify our App.js  file a bit. Just add a few methods into the App class:

Reload our app, send a new push notification and take a look in Browser Dev Console.

Test JavaScript notification for push notification

Looks like it works. Now you can run any logic in JS Code when a new push notification is received. Sounds cool, doesn’t it?

Conclusion

Hopefully this will help you implement push notifications into your own React Native app. Step-by-step, we created a native Android application and walked through how to enable push notifications. Also, we met a new Backendless feature – Push Notification Templates. In the next article of the series, I will show you how to enable push notifications in a React Native iOS app. We will improve the application that we built today, because there weren’t a lot of changes; we already have almost all that we need.

Thanks for reading, I hope you enjoyed it. Happy Building!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+