react-native-ua
react-native-ua
npm i react-native-ua
react-native-ua

react-native-ua

React Native module for Urban Airship

by globocom

1.0.0 (see all)License:MITTypeScript:Not Found
npm i react-native-ua
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

  • 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')
    
  2. 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
    }
    
  3. 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
    
  4. 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);

Downloads/wk

11

GitHub Stars

38

LAST COMMIT

6yrs ago

MAINTAINERS

10

CONTRIBUTORS

17

OPEN ISSUES

7

OPEN PRs

1
VersionTagPublished
1.0.0
latest
6yrs ago
0.2.0
next
6yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate