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
The application is killed
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
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.