Urban Airship created an official React Native module. https://github.com/urbanairship/react-native-module
We recommend you to test their new implementation as this module will probabily be deprecated soon. They also made a guide to help migrate from this module to theirs. https://github.com/urbanairship/react-native-module/blob/master/ReactNativeUAMigration.md
This plugin provides client-side integration for the Urban Airship Engage Platform in iOS and Android app environment.
- Android (4.1+)
- iOS (8+)
- React Native (0.27)
- Android Studio 2.0 or higher
- Node 4.4
- React Native Command Line Tools
- [Recommended] Watchman
- [Recommended] Flow
- 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
- App properly set up. See Urban Airship > Add New App.
In your React Native project, install the following module:
npm install react-native-ua --save
- 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
);
}
}
- 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 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
, 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
- 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.
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);