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'.projectDir =
- Include the
react-native-ua
module in your app compile dependencies, inside theandroid/app/build.gradle
file:
// ... dependencies { // ... compile // 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 KeydevelopmentAppSecret = Your Development App Secret # If inProduction is true set production key and secretinProduction = false productionAppKey = Your Production App KeyproductionAppSecret = Your Production Secret
- Inside
MainApplication.java
, located atandroid/app/src/main/java/your/app/domain
, add theReactNativeUAPackage
to your app package list:
// ... // import react-native-ua package
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 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:
// ...
- 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 module { superprops; ReactNativeUA; // prompt user to enable notification ReactNativeUA; // prompt user to enable geolocation ReactNativeUA; // enable url action ReactNativeUA; // handle notifications when app is in background ReactNativeUA; // set tag to the user ReactNativeUA; // set named user id ReactNativeUA; // activate a quiet period ReactNativeUA; // set the period to 22:00-07:00 } { // add handler to handle all incoming notifications ReactNativeUA; // Check if user enabled notifications ReactNativeUA // Get channel id for device ReactNativeUA } { return <View> <Text>ReactNativeUA</Text> </View> ; } AppRegistry;