npm

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

react-native-ua

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)

Prerequisites

Android

  • Android Studio 2.0 or higher
  • Node 4.4
  • React Native Commnad 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

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/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 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

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

Methods

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

install

npm i react-native-ua

Downloadsweekly downloads

16

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

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