Ever thought about the notifications we receive from the apps we installed? or How is Swiggy or Zomato provoking us to order food at 3 AM with their creative notifications? ?
Let's dive deep into the concept of notifications!
A notification is a message or alert sent by an app to inform users about updates, events, or actions, typically delivered outside the app's interface.
Now there can be two types of notifications as shown below -
Push notifications are messages or alerts sent from a server to an app when the app is not actively running in the foreground. They are primarily used to keep users engaged by sending updates, reminders, or personalized content. Push notifications are delivered through operating system services like Apple Push Notification Service (APNs) for iOS or Firebase Cloud Messaging (FCM) for Android.
In-app notifications are messages or alerts displayed to users while they are actively using the app. Unlike push notifications, these do not require server intervention and are triggered within the app itself, usually as a result of user actions or app events.
Now that we know about notifications and their types, it's time to implement the feature in your very own react native app. This guide is for implementing only push notification in React native android app only, if you want for iOS or in-app notification, write down a comment and I will post that for sure!
To get started we will be using a third-party service called OneSignal. I recently came across this platform and was shocked by the services they offer.
OneSignal is a push notification service that enables app developers to send targeted notifications to users across various platforms, including mobile apps, websites, and email. It supports push, in-app, and web notifications, providing features like segmentation, automation, A/B testing, and real-time analytics. OneSignal is widely used for improving user engagement and retention by offering an easy-to-integrate solution for sending personalized messages. Their free tier consists of 10,000/month Free Email Sends, Unlimited Mobile Push Sends, Journeys Workflows, GDPR Compliant, A/B Testing
Going back to the guide, since we already know that push notifications require server-side handling via FCM (Firebase Cloud Messaging) hence there are a few steps to follow:
Set up firebase project (ignore first two steps if you already have firebase project):
Set up OneSignal
We are done with the setup in firebase and OneSignal, now the only task left is some Coffee with Code
npm i react-native-onesignal
import { OneSignal } from 'react-native-onesignal';
and you have add this code snippet to initialise OneSignal
OneSignal.initialize('YOUR_APP_ID');
You can wrap this inside a useEffect hook for seamless integration and connectivity with OneSignal.
This will initialize the device with an unique ID on for OneSignal and you can check that in the subscriptions in the sidebar. Every device that gets initialized will be identified with this unique OneSignal ID and you can set it manually also if you have users with their own unique id's already by using this code snippet:
OneSignal.login(userId)
Once the user is successfully subscribed, it will show in the dashboard like this
Now you might come across some issues with OneSignal not being properly used or some critical errors so here is a part that you can follow which helped me resolve those issues.
dependencies{ ... implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]') ... }
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
right before the application tag. The INTERNET permission is optional however since it might be enabled by default.
Boom? All the steps are covered for implementing push notifications, and you can send a test notification from the OneSignal dashboard itself.
Try out yourself and if any doubt you can comment below. Follow for more detailed guides!
References:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350
Happy coding!??
The above is the detailed content of How to implement push notifications in React Native (Android). For more information, please follow other related articles on the PHP Chinese website!