Push Notification on ReactNative

2017-07-12 19:12
2017-07-12 19:12

Guten tag!

On this article, I want to introduce you the way how to implement push notification on an application based on ReactNative.

First of all, I'd like to show you the blueprint of this implementation.

The blueprint


  • Send an identifier to Rails
  • Receive a notification from AWS SNS


  • Receive an identifier from your application
  • Save it in database (You need to save endpoint_arn)
  • Register the endpoint_arn & subscribe a topic
  • Tell the timing to send a notification to AWS SNS
    • For example, by cron


  • Save an endpoint_arn
  • Create a topic
    • You can make a user group as a topic
  • Send a notification
    • For example, on android, we send it to FMC(firebase message cloud)


In ReactNative

Your application needs to send an identifier. In React Native, I think index.android.js and index.ios.js are the best places since the settings are a bit different depends on the OS.

Here, just an example from the github documentation.

in Rails

At the beginning, I think it's better to put an initializer for aws-sdk-rails.

First, in the controller, let's write an action to receive an identifier. If it's new, we register it in AWS SNS. After you request to AWS SNS, you can receive the endpoint_arn. Let's keep it in the database.

The code Aws::Sns::DeviceTokenRegisterer.register(device_token) is in services layer. I call it to register the endpoint_arn to AWS SNS.

Here, I subscribe 2 topics for the endpoint. As I said before, a topic is a kind of user group. I made 2 topics on AWS SNS. One is for all devices and another is only for android or ios. about the settings of AWS SNS, please read the documentation in amazon website.

At last, we can fire the event to publish notifications. I'll show you the example file which is put in services layer as well.

Actually, this is all. It's really easy, isn't it? AWS SNS is really cheap. That's also good news :)

If you have any questions, opinions or suggestions, just comment it, please. Of course, since my code is just an example, if you want to use it on production, you had better consider more carefully the architecture, error handling etc.


Get it on Google Play