React Native

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”

React native and one signal

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

React native and one signal

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

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *