Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »


1.0.0 • Public • Published

React Native Module for Urban Airship

This plugin provides client-side integration for the Urban Airship Engage Platform in iOS and Android app environment.

Supported React Native platforms

  • Android (4.1+)
  • iOS (8+)
  • React Native (0.27)



  • Android Studio 2.0 or higher
  • Node 4.4
  • React Native Commnad Line Tools
  • [Recommended] Watchman
  • [Recommended] Flow


  • Xcode 8.0 or higher
  • Node 4.4
  • React Native Command Line Tools
  • Certificate from a Certificate Authority (CA)
  • iOS App Development Certificate
  • [Recommended] Watchman
  • [Recommended] Flow

Urban Airship

Getting Started

In your React Native project, install the following module:

npm install react-native-ua --save

Android setup

  1. Include the following module to your android/settings.gradle in your React Native project:
include ':react-native-ua'
project(':react-native-ua').projectDir = file('../node_modules/react-native-ua/android')
  1. Include the react-native-ua module in your app compile dependencies, inside the android/app/build.gradle file:
// ... 
dependencies {
    // ... 
    compile project(':react-native-ua') // add react-native-ua module 
  1. Create the android/app/src/main/assets/ file and update it with your Urban Airship App's data:
gcmSender = Your GCM sender ID (Your Google API project number)
developmentAppKey = Your Development App Key
developmentAppSecret = Your Development App Secret
If inProduction is true set production key and secret
inProduction = false
productionAppKey = Your Production App Key
productionAppSecret = Your Production Secret
  1. Inside, located at android/app/src/main/java/your/app/domain, add the ReactNativeUAPackage to your app package list:
// ... 
import; // import react-native-ua package 
public class MainApplication extends Application implements ReactApplication {
    // ... 
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            // ... 
            new ReactNativeUAPackage() // set react-native-ua package using application 

Xcode setup

  1. Open your iOS React Native project.
  2. Select the project node, in Targets section:
  • Inside Capabilities tab, turn Push Notification on
  • Then turn Background Modes on.
  • Inside Background Modes, enable Remote Notifications.
  1. Find the ReactNativeUAIOS.xcodeproj file within node_modules/react-native-ua/ios and drag it into the Libraries node in Xcode.

  2. Add AirshipConfig.plist from folder ios/ in the project node

  3. Edit the file and add your App Key, App Secret and App Master Secret, the same used within Urban Airship setup (⚙ > APIs & Integrations > Urban Airship API).

  4. Back to the project node, select the Targets section:

  • In the Build Settings tab, go to Linking > Other Linker Flags and include the following tags:

  • Then go to Search Paths > Header Search Paths, add the following path and select the recursive option:

  1. In the Build Phases tab:
  • Open the Link Binary With Libraries section, click on the plus sign (➕) and select libReactNativeUAIOS.a from Workspace.

  • Now expand the Copy Bundle Resources, click on the plus sign (➕) and add the following file:

  1. Inside AppDelegate.m, import ReactNativeUAIOS.h and setup the module. Follow the example below:
#import "ReactNativeUAIOS.h"
// ... 
@implementation AppDelegate 
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  // setup react native urban airship using AirshipConfig.plist (the default way) 
  [ReactNativeUAIOS setupUrbanAirship:launchOptions];
  // OR setup react native urban airship programmatically. The following example use the content of AirshipConfig-dev.plist instead of the default AirshipConfig.plist 
  NSString *configPath = [[NSBundle mainBundle] pathForResource:@"AirshipConfig-dev" ofType:@"plist"];
  UAConfig *config = [UAConfig configWithContentsOfFile:configPath];
  [ReactNativeUAIOS setupUrbanAirship:launchOptions withConfig:config];
  // ... 
// ... 
  1. To enable location add this two string keys with their values inside Info.plist:
  • NSLocationAlwaysUsageDescription: Urban Airship location service
  • NSLocationWhenInUseUsageDescription: Urban Airship location service when app is in use



import React, { Component } from 'react';
import {
} from 'react-native';
import ReactNativeUA from 'react-native-ua'; // import module
class SampleApp extends Component {
    constructor(props) {
      ReactNativeUA.enable_notification(); // prompt user to enable notification
      ReactNativeUA.enable_geolocation(); // prompt user to enable geolocation
      ReactNativeUA.enable_action_url(); // enable url action
      ReactNativeUA.handle_background_notification(); // handle notifications when app is in background
      ReactNativeUA.add_tag('tag'); // set tag to the user
      ReactNativeUA.set_named_user_id('user_id'); // set named user id
      ReactNativeUA.set_quiet_time_enabled(true); // activate a quiet period
        startHour: 22,
        startMinute: 0,
        endHour: 7,
        endMinute: 0
      }); // set the period to 22:00-07:00
    componentWillMount() {
        // add handler to handle all incoming notifications
        ReactNativeUA.on_notification((notification) => {
                        notification.url, // if action url is disabled
        // Check if user enabled notifications
        ReactNativeUA.are_notifications_enabled().then(enabled => {
          console.log('notifications enabled:', enabled);
        // Get channel id for device
        ReactNativeUA.get_channel_id().then(channelId => {
          console.log('channel id:', channelId);
    render () {
        return (
AppRegistry.registerComponent('SampleApp', () => SampleApp);


npm i react-native-ua

Downloadsweekly downloads









last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability