Updated April 3, 2023
Introduction to React Native OneSignal
OneSignal in react native can be defined as a push notification service. OneSignal in react native can be considered as a reliable and high volume service, which can be used to send push notification for mobile applications as well as websites. Using of OneSignal requires adding dependency for react native OneSignal which comes with built-in methods, events as well as listeners to handle notification related events.
Syntax:
Given below is the syntax:
// import react component
import React, { Component } from 'react';
// import react onesignal
import OneSignal from 'react-native-onesignal';
// create class
class <ClassName> extends Component {
constructor(props) {
super(props);
// initialize one signal to use into our application
OneSignal.init(process.env.onesignal_key);
// adding listener to listen to notification received
OneSignal.addEventListener("received", this.onReceived);
// adding listener to listen to notification opened
OneSignal.addEventListener("opened", this.onOpened);
OneSignal.addEventListener("ids", this.onIds);
// configure react native onesignal
OneSignal.configure();
}
onReceived = notification => {
// write logic to execute when notification is received
};
onOpened = openResult => {
// write logic to execute when notification is opened
};
onIds = device => {
// write logic to execute when device id is received
};
}The above syntax shows how to use OneSignal. It first requires importing OneSignal into our code after we add the dependency of react OneSignal into our project. In the constructor of the above-defined class we have initialized OneSignal with required keys, listeners and then followed by calling configure method whose purpose is to initialize OneSignal with specified parameters.
How OneSignal Works in React Native?
In order to use react native grid, we need to add react native OneSignal dependency into our project. Its dependency can be added by running the below command.
Code:
npm i react-native-onesignalAfter the above command runs successfully, we can import dependency of OneSignal into our project and use it as per our requirement. Given below are important methods and listeners that we should be aware of while using them into our project:
1. Init: This method initializes OneSignal SDK and generally accepts OneSignal application ID.
OneSignal.init("<APPLICATION_ID>");2. addEventListener: This method is used for adding a callback to an event generated by OneSignal SDK.
OneSignal.addEventListener("received",this.onReceivedEvent);3. removeEventListener: This method is used for removing a callback to an event generated by OneSignal SDK.
OneSignal.removeEventListener(“received”,this.onReceivedEvent);Given below are different types of events available in OneSignal:
| Event Type | Description |
| “received” | Event occurs when a notification is received. |
| “opened” | Event occurs when a notification is opened. |
| “ids” | Event occurs when device id is received. |
| “inAppMessageClicked” | Event occurs when an In-app message is received. |
Apart from the above methods, the following callback methods are available in OneSignal. When a notification is received oreceived callback will be triggered.
The following is the syntax of how onReceived Callback is defined:
onReceived(notification) {
// handle notification as per requirement
}After the notification is received and the user taps on notification to open it, onOpened callback of OneSignal will be triggered.
The following syntax shows how onOpened Callback is defined:
onOpened(result) {
// handle onOpened event as per requirement
}Example
Here we will see code example showing the use of OneSignal:
Code:
importReact, { Component } from'react';
importOneSignalfrom'react-native-onesignal';
// Import one signal dependency
// creating class app
exportdefaultclassAppextendsComponent {
componentWillmount() {
// add listeners to listen to different events
OneSignal.addEventListener('received', this.onReceived);
OneSignal.addEventListener('opened', this.onOpened);
OneSignal.addEventListener('registered', this.onRegistered);
OneSignal.addEventListener('ids', this.onIds);
}
componentWillUnmount() {
// remove listeners when unmount
OneSignal.removeEventListener('received', this.onReceived);
OneSignal.removeEventListener('opened', this.onOpened);
OneSignal.removeEventListener('registered', this.onRegistered);
OneSignal.removeEventListener('ids', this.onIds);
}
onReceived(notification) {
console.log("Received Notification: ", notification);
}
onOpened(openResult) {
//perform logging
console.log("Opened Notification");
console.log('Message: ', openResult.notification.payload.body);
console.log('Data: ', openResult.notification.payload.additionalData);
console.log('isActive: ', openResult.notification.isAppInFocus);
console.log('openResult: ', openResult);
}
onRegistered(notifData) {
// triggered when device is registered for using push notification
console.log("Device had been registered for push notifications!", notifData);
}
onIds(device) {
console.log('Device info: ', device);
}
}The above example shows how to use an OneSignal notification service in it. The above code will be triggered as soon as a device is registered for notification.
Recommended Articles
This is a guide to React Native OneSignal. Here we discuss the introduction, syntax and working of OneSignal in react native along with example. There are several third-party libraries that can be used to provide more customizations to OneSignal. You may also have a look at the following articles to learn more –
