Procedures on How to Apply Push Notifications for iOS and Android in React Native
Do you know how magnificent and effective Push Notifications configuration works? The impact it possesses on your website conversions, engagement, and retention is so tremendous; its function can be used in different ways and forms to enhance your content, guide users to an affiliate or other channels, notify prevailing news and offers.
As reported and recorded by the Localytics, Push Notifications inflate app engagement by 88%. However, the percentage above can simply be actualized; only if the right user touch points are acquired. Immediately the primary users were determined, all notifications sent across would be 100% relevant.
To help you achieve your stipulated goals, this article was designed to analyze the procedures in setting-up a personalized Push Notification for iOS and Android in React Native.
So, Why Don’t We Cut To The Chase?
First things first, setting Push Notifications in React Native.
Do you have a specific tool on the Push Notifications function you’ve decided to implement on your React Native application? You’ve done well if there is such an arrangement! However, you can also use the react-native-push-notification library, that works ceaselessly on the iOS and Android operating systems. Furthermore, this library enables you to create four different types of notification.
Types Of Notifications Under React-Native-Push-Notification
1) local push notification
2) noisy remote notification
3) silent remote push notifications
4) mixed remote push notifications.
What are the local push notifications?
These are notifications sent from the React Native applications to the main notification center, and instantly the notification is transmitted; it pops out of the screen assuming the center of attention until the user removes them. In addition to that, local push notifications provide a set of different attributes, that authorize the creation of notifications with a personalized design.
However, Remote Push Notifications are sent from the server, such as the Apple Push Notification Service (APNS) or Google Cloud Messaging Service (GCM).
Getting started with React Native push notification library.
First things first, you have to create the library using npm, and as the library operates on native modules; it’s your job to install the library for iOS and Android manually.
To ensure maximum perfection, thoroughly abide instructions as described in the Installations sections, iOS manual Installation, and Android manual installation. For initial configuration of notifications, name the method PushNotification.configure() and forward to it the object with the following properties:
(Optional) is called when Token is generated (iOS and Android).
`onRegister: function(token) {
console.log( ‘TOKEN:’, token );
},`
(Required) is called when any notification is opened or received. Below is how you can encode the notification, as the object carrying the notification data is transferred to the function.
Onnotification: Function(Notification) {}
On the Android platform, this code is optional for local notifications, however, required mainly for the remote ones.
senderID: “GCM SENDER ID”
Permissions for iOS (optional)
permissions: {
alert: true,
badge: true,
sound: true
}
(Optional) Installation in True should be configured by default.
popInitialNotification: true
This function analyzes if the request for permissions (iOS) and Token (Android and iOS) will be extended. It’s true by default. However, if you want to set it as false, you must call PushNotificationsHandler.requestPermissions() later.
requestPermissions: true
During the entry point of Javascript code, make sure notifications are configured beyond the React Native lifecycle.
Furthermore, ensure you find the file index.js (index.android.js, index.ios.js) in the root folder of your project, and check through the call function registerComponent() to find the module of the highest level. Below is a typical example:
import { AppRegistry } from ‘react-native’;
import App from ‘./App’;
AppRegistry.registerComponent(‘MyAwesomeApp’, () => App);
Now, let’s make it real by creating a folder service for our application ‘./src/services with two files — index.js and pushNotification.js
pushNotifications.Js:
import PushNotification from ‘react-native-push-notification’;
import { PushNotificationIOS } from ‘react-native’;
const configure = () => {
PushNotification.configure({
onRegister: function(token) {
//process token
},
onNotification: function(notification) {
// process the notification.
// required on iOS only
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
permissions: {
alert: true,
badge: true,
sound: true
},
popInitialNotification: true,
requestPermissions: true,
});
};
export {
configure,
};
Index.js:
import * as pushNotifications from ‘./pushNotifications’;
export {
pushNotifications,
}
Now that we’re done with the configuration, let’s import the service of notifications in the file with the highest level modules and call the configuration before the React Native lifecycle.
import React from ‘react’;
import { Provider } from ‘react-redux’;
import { pushNotifications } from ‘./src/services’;
import store from ‘./src/store’;
import AppContainer from ‘./src/AppContainer’;
pushNotifications.configure();
const App = () => (
<Provider store={store}>
<AppContainer />
</Provider>
);
export default App;
To intensify the process, we should enable the automatic local notification call to our notification service to strengthen the communication level. However, to carry out such an operation, you’ll need to call PushNotification.localNotification(details: Object) for the authorization.
Since we are here, let’s quickly observe the properties of the details object, that is passed by the parameter for localNotification.
Only For Android:
id — (optional). Real, unique whole 32-bit number, indicated as a string. By default: auto generated unique identification.
ticker — (optional) string, Notification Ticker
autoCancel — (optional) Boolean, true by default. Boolean decides if the notification is automatically hidden or not.
largeIcon — (optional) default: “ic_launcher” (application icon). Big icon for notifications.
smallIcon — (optional) default: “ic_notification”. Small icon for notifications originated from the label “ic_launcher”, which is why this auto-generated icon may be pictured inсorrectly.
A small icon designed for notifications should have a plain background with no colors. A colored background would serve as a destructive interference hindering the clarity of your message.
Below is an example of the picture of a small icon.
Now let’s add the small icon with the name ic_notification.png in android/app/src/main/res/mipmap-‘dpi’
The result would look like this:
bigText — (optional) — has the same characteristics as in “message” property by default.
subText: “This is a subText”, — (optional) default: none
push notification icon
color — // (optional) default: system default
If you carefully observe the previous screens, you would discover that the color is grey. This was because the color is set by default, but now, I’ve altered that and changed it to green color.
vibrate: true, — (optional) default: true
vibration: 300, — vibration length in milliseconds, ignored if vibrate=false, default: 1000
tag: ‘some_tag’, — (optional) adding tags to the message
group: “ some_group”, — (optional) messages grouping
ongoing: false, — (optional). If you set “true”, the message can`t be deleted from the notifications center. But once you press the notification displayed, it disappears and the application is opened immediately.
repeatType: ‘day’, — Repeating interval. It could be one of `week`, `day`, `hour`, `minute, `time`.
If the property repeatType is set as “time”, you need to use one more property:
repeat time — the number of milliseconds between each interval.
Only For iOS:
alertAction — (optional) appears to possess the ability to categorize the string that will be displayed below the notification, by default — ‘view’
category — (optional) appears to possess the ability to specify the notification actions to display for the messages. These actions appear immediately when you slide the notification towards the left side of the screen. default: null
userInfo: — (optional) default: null (object containing additional notification data)
Properties For iOS And Android:
title — the name of the notification (optional, for iOS; this is heavily used by the Apple brand — apple watch; while other iOS devices will simply make the title the app name automatically.
message — (required) string, the text of the notification.
playSound — (optional) Boolean. default: true. If you set “false”, the notification will be silent.
soundName — (optional) The notification is noisy. Value of ‘default’ plays the default sound.
On Android platform, add your custom sound file to [project_root]/android/app/src/main/res/raw
While on iOS, add your custom sound file to the project resources in Xcode.
number — (optional) Valid 32 bit integer specified as a string. default: none (Cannot be zero)
actions: ‘[“Accept”, “Reject”]’ — These are an electronic arrangement of threads whereby each thread is a notification action assigned with the notification.
Earlier on, we’ve decided to attach the automatic local notification to our notification service to achieve maximum success and strengthen the process. Therefore, we’re going to add file ./src/services/pushNotifications.js to our code to call local notifications.
//…
//Here is the code, we have written before:
//…
const localNotification = () => {
PushNotification.localNotification({
autoCancel: true,
largeIcon: “ic_launcher”,
smallIcon: “ic_notification”,
bigText: “My big text that will be shown when notification is expanded”,
subText: “This is a subText”,
color: “green”,
vibrate: true,
vibration: 300,
title: “Notification Title”,
message: “Notification Message”,
playSound: true,
soundName: ‘default’,
actions: ‘[“Accept”, “Reject”]’,
});
};
export {
configure,
localNotification,
};
Finally, to verify the efficiency of the notification performance, add the button for calling local notification. file ./src/AppContainer.js
