React Native and OneSignal Part 1 (iOS)

Using One Signal api for remote notifications is very painless and comfortable for React Native. There are very simple steps for installation and configuration. Let’s begin;

  • Create a react native project
$ react-native init projeOnesignal
  • Install One Signal package and link to the project
$ npm install --save react-native-onesignal 
$ react-native link react-native-onesignal

XCode Setup

Sign up for a One Signal account if you don’t have one.

Open your project in XCode and go to Capabilities Tab, then set Push Notifications “ON”

Image for post

Again in Capabilities Tab, find Background Modes and set it “ON” and check Remote Notifications

Image for post

iOS Push Certificate

Visit this page and use “Automatic Provisioning Tool” for easy certificate creation.

Download .p12 file.

Select your app from the All Apps page in OneSignal, then go to “App Settings” and press Configure to the right of the Apple iOS Settings.

Upload the .p12 file you exported before

How to use in React Native

import React, { Component } from 'react';
import OneSignal from 'react-native-onesignal'; // Import package from node modules
export default class App extends Component {constructor(properties) {
super(properties);
OneSignal.init("YOUR_ONESIGNAL_APPID");
OneSignal.addEventListener('received', this.onReceived);
OneSignal.addEventListener('opened', this.onOpened);
OneSignal.addEventListener('ids', this.onIds);
}
componentWillUnmount() {
OneSignal.removeEventListener('received', this.onReceived);
OneSignal.removeEventListener('opened', this.onOpened);
OneSignal.removeEventListener('ids', this.onIds);
}
onReceived(notification) {
console.log("Notification received: ", notification);
}
onOpened(openResult) {
console.log('Message: ', openResult.notification.payload.body);
console.log('Data: ', openResult.notification.payload.additionalData);
console.log('isActive: ', openResult.notification.isAppInFocus);
console.log('openResult: ', openResult);
}
onIds(device) {
console.log('Device info: ', device);
}
}

You can download our React Native Starter Kit which includes One Signal

Originally published at hsplabs.com on December 18, 2018.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store