Implementing Local Notifications In React Native

In this blog post, we shall show you how you can create local notifications in your react native application, and customize the notification banner when getting remote notifications from firebase.

Firebase is a software improvement platform from Google. It is helpful to create software backends fast, supply built integrated a bunch of features and functionalities that can be built-in integrated simply. Some of the capabilities to be had with Firebase are analytics, remote configurations, social logintegrateds, performance tracking, email authentication, advert-mob, and cloud messaging.

When we implement Push Notification using firebase in React native application and we get notification payload from the backend then the notifications are managed by the firebase itself when the app is in the quit state or in the background state, But what happens when you are using the application then firebase does not show you the notification, Sometimes it is the client requirement to show the notification event when you are in the Foreground state, In that case, we use an NPM library called react-native-push-notification which has a number of useful function that we can you in our app and get the notification in the foreground state.

I will show you how you can use this library in your code to get the required functionality -

1.first install the library using command -

npm install --save react-native-push-notification

after that you can use this code to use this library

to get notifications and token -

import PushNotificationIOS from "@react-native-community/push-notification-ios";

import PushNotification from "react-native-push-notification";

// must be outside of any useEffect or useLayoutEffect

PushNotification.configure({

// (called when token is generated

onRegister: function (token) {

console.log("TOKEN:", token);

},

// It is called when remote notification is received -

onNotification: function (notification) {

console.log("NOTIFICATION:", notification);

},

// used in IOS only for permissions.

permissions: {

alert: true,

badge: true,

sound: true,

},

popInitialNotification: true,

requestPermissions: true,

});

2. and this function is to create a local notification -

PushNotification.localNotification({

channelId: "channel-id", // This is required to get notification in android

title: "notification title" //This is notification title

message:"This is Unique notification description"

});

At Oodles ERP, we provide custom ERP development services to help enterprises achieve digital transformation and sail through routine operational complexities. Our 360-degree ERP development services are conducive to achieving higher levels of productivity and delivering clear bottom line results. For more information, reach out at [email protected].