react-native-ua

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
• Prerequisites
  • Android
  • iOS
  • Urban Airship
• Getting Started
  • Android setup
  • Xcode setup
• Usage

Supported React Native platforms

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

Prerequisites

Android

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

iOS

• Xcode 7.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

• App properly set up. See Urban Airship > Add New App.

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. Add Urban Airship's repository url in your android/build.gradle file:

// ...

allprojects {
    repositories {
        // ...

        maven {
            // ...

            url "https://urbanairship.bintray.com/android" // add urban repository url
        }
    }
}

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. Add to your app manifest (android/app/src/main/AndroidManifest.xml) these permissions:

<manifest ...>

    // ...

    <application ...>

      // ...

      <receiver
          android:name="com.globo.reactnativeua.ReactNativeUAReceiver"
          android:exported="false">
          <intent-filter>
              <action android:name="com.urbanairship.push.CHANNEL_UPDATED"/>
              <action android:name="com.urbanairship.push.OPENED"/>
              <action android:name="com.urbanairship.push.DISMISSED"/>
              <action android:name="com.urbanairship.push.RECEIVED"/>
              <category android:name="${applicationId}"/>
          </intent-filter>
      </receiver>

    </application>
</manifest>

1. Create the android/app/src/main/assets/airshipconfig.properties 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 MainActivity.java, located at android/app/src/main/java/your/app/domain, add the ReactNativeUAPackage to your app package list:

// ...

import com.globo.reactnativeua.ReactNativeUAPackage; // import react-native-ua package

public class MainActivity extends ReactActivity {
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            // ...
            new ReactNativeUAPackage(this.getApplication()) // add react-native-ua package
        );
    }
}

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:

  -ObjC
  -lz
  -lsqlite3
  

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

  $(SRCROOT)/../node_modules/react-native-ua/ios
  

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:

  node_modules/react-native-ua/ios/Libraries/Airship/AirshipResources.bundle
  

1. Inside AppDelegate.m, import ReactNativeUAIOS.h and call the module with [ReactNativeUAIOS setupUrbanAirship]. Follow the example below:

#import "ReactNativeUAIOS.h"

// ...

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // setup react native urban airship
  [ReactNativeUAIOS setupUrbanAirship];

  // ...
}

// ...

@end

Usage

import ReactNativeUA from 'react-native-ua'; // import module

ReactNativeUA.enable_notification(); // prompt user to enable notification
ReactNativeUA.disable_notification(); // prompt user to disable notification
ReactNativeUA.add_tag("tag"); // add only one tag
ReactNativeUA.remove_tag("tag"); // remove only one tag

// add handler to handle all incoming notifications
ReactNativeUA.on_notitication((notification) => {
  console.log(notification.platform,
              notification.event,
              notification.alert,
              notification.data);
});