react-native-ua v1.0.0
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
- 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 theandroid/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 atandroid/app/src/main/java/your/app/domain
, add theReactNativeUAPackage
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 withinnode_modules/react-native-ua/ios
and drag it into theLibraries
node in Xcode.Add
AirshipConfig.plist
from folderios/
in the project nodeEdit 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
, importReactNativeUAIOS.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);