cvongrim/react-native-ua

React Native module for Urban Airship

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.cvongrim:react-native-ua:-SNAPSHOT'
	}

	dependencies {
		implementation("com.github.cvongrim:react-native-ua:-SNAPSHOT")
	}

	<dependency>
	    <groupId>com.github.cvongrim</groupId>
	    <artifactId>react-native-ua</artifactId>
	    <version>-SNAPSHOT</version>
	</dependency>


                            
    libraryDependencies += "com.github.cvongrim" % "react-native-ua" % "-SNAPSHOT"


                            
    :dependencies [[com.github.cvongrim/react-native-ua "-SNAPSHOT"]]

Readme

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
Getting Started
- Android setup
- Xcode setup
Methods
Usage

Supported React Native platforms

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

Prerequisites

Android

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

iOS

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

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

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')

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
}
```

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

Inside MainApplication.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 MainApplication extends Application implements ReactApplication {
  // ...

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

Xcode setup

Open your iOS React Native project.
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.
Find the ReactNativeUAIOS.xcodeproj file within node_modules/react-native-ua/ios and drag it into the Libraries node in Xcode.
Add AirshipConfig.plist from folder ios/ in the project node
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).
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
```
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
```

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];
 // ...
}

// ...

@end

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

Methods

ReactNativeUA.enable_notification(): Prompt user to enable notification receivement;
ReactNativeUA.disable_notification(): Prompt user to disable notification receivement;
ReactNativeUA.enable_geolocation(): Prompt user to enable geolocation;
ReactNativeUA.enable_action_url(): Enable url action. The app will open the default browser with passed url;
ReactNativeUA.disable_action_url(): Disable url action (Default). The notification handler will receive payload with a url property;
ReactNativeUA.handle_background_notification(): Handle notifications when app is in background;
ReactNativeUA.add_tag("tag"): Set tag to the user;
ReactNativeUA.remove_tag("tag"): Remove added tag;
ReactNativeUA.set_quiet_time_enabled(true): Enable/disable a quiet notification period.
ReactNativeUA.set_quiet_time({ startHour: 22, startMinute: 0, endHour: 7, endMinute: 0 }): Set the quiet period.
ReactNativeUA.are_notifications_enabled((error, enabled) => {}): Check if notifications are enabled by user. The callback is optional, this method also returns a promise.
ReactNativeUA.set_named_user_id("nameUserId"): Set named user id;
ReactNativeUA.on_notification((notification) => {}): Add handler to handle all incoming notifications. Attention: this method need to be called on componentWillMount() of the component lifecycle.
ReactNativeUA.get_channel_id((error, channelId) => {}): Get channel id for device. The callback is optional, this method also returns a promise.

Usage

import React, { Component } from 'react';

import {
    AppRegistry,
    Text,
    View
} from 'react-native';

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


class SampleApp extends Component {

    constructor(props) {
      super(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

      ReactNativeUA.set_quiet_time({
        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) => {
            console.log('notification:',
                        notification.url, // if action url is disabled
                        notification.platform,
                        notification.event,
                        notification.alert,
                        notification.data);

            alert(notification.alert);
        });

        // 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 (
            <View>
                <Text>ReactNativeUA</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);