Cross-Platform Mobile Basics

React Native push notifications guide for rookies and techies

A small guide about the first assumptions and the reality of mobile notifications behaviors on React Native projects.

Andréas Hanss
Mar 1 · 3 min read

I’ve been asked and I’ve seen so much time people asking questions about push notifications and the way this should work in react-native. As most of the react-native adopters are generally people from a web background they don’t know much about notifications behavior.

Here is a common question I’m receive on Reddit.

❓ What is a push notification?

👨🏻‍🔬 A push notification is a message with a title, a description, object payload, and some params sent through the network to a mobile device. Those pieces of information will be used to display a notification widget on the user device, it can be images, links, and many other things.

Its main purpose is to invite the user to some action (engaging him) or notify him of something interesting.

How can I send push notifications?

Initially, a notification is just a push token associated with a device installation. Later this push token can be used to target a specific device, but in all cases, someone (you or your provider) will have to reach the Apple (APNS) or Google (FCM) Servers.

It starts being interesting when you can associate this token to some data for targeting… and here some companies built their businesses on enriching the notifications system.

Leveraging those company tools will make you iterate quicker and better.

There are many, but for the purpose of the article, we will focus on those that work well with react-native.

Here is my opinionated top 5 of push notifications platforms.

  • Firebase Cloud Messaging, which works very well with other Firebase products, especially for targeting.
  • OneSignal, which has a very interesting free-tier and is really doing many things. The SDK is also nice.
  • Pushbot, looks like OneSignal.
  • Batch, really cool, but expensive.
  • Expo (A bit different, as it’s a complete framework for RN).

Those tools provide a dashboard to release notifications campaigns, you should really consider those to send your notifications.

How can I handle notifications on the frontend?

For that, it’s better if you use a library.

Most notification providers, give library for their services, understand they are TIE to the service itself and don’t work anywhere else.

Some other libraries are generic and the best choice for that is WIX React native notification, which is the most complete and updated free solution. There is also one great tool named Notifee, which is an announced great library to handle notifications on react native.

Is it possible to trigger a function when a push notification arrives?

Yes, but it is not as simple as it seems. It will require some native code, some push provider give nice hooks functions for that.

The application is in foreground

Most providers give hooks function to trigger code in the background, so yes, pretty easy. You won’t have any issues with that case.

The application is in background

You’ll first need to enable background notification on IOS, also sometimes this can be a bit tricky, as the javascript might not be called. While this can’t work, there is no true guarantee about that and you should always think your code as still working, even if the callback function isn’t called.

The application is killed

There is no way to trigger code here using javascript. You’ll have to completely rely on native code or deep links that trigger app opening on a specific screen.

So what is the safest way to deal with action on a notification?

Using deep linking

A deep link is a link that matches a custom pattern. On the web you might have seen, http://thing.coma deep link might be myapp://somestring.

Once the app opens using Linking API we can parse the string and we can do some action on the app open.

Always think your app as it was like the Schrodinger cat, as long as you didn’t click the notification you’re app will be in a nothing happened state. You should take side effects, once the app opens using the intent parameter from a deep-link or a notification received of your SDK.

JavaScript In Plain English

New articles every day.

Andréas Hanss

Written by

👨🏻‍💻Javascript’ Tech Lead 🇫🇷 — react | react-native | modern js |🔥 Firebase — — Passionated about learning.

JavaScript In Plain English

New articles every day.

Andréas Hanss

Written by

👨🏻‍💻Javascript’ Tech Lead 🇫🇷 — react | react-native | modern js |🔥 Firebase — — Passionated about learning.

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store