A React Native module for Urban Airship's iOS and Android SDK.
We accept pull requests! If you would like to submit a pull request, please fill out and submit our Contributor License Agreement.
One of our engineers will verify receipt of the agreement before approving your pull request.
Please visit https://support.urbanairship.com/ for any issues integrating or using this module.
- Xcode 10+
- iOS: Urban Airship SDK 10+
- Android: minSdkVersion 16+, compileSdkVersion 28+
- React Native >= 0.44.0
- React Native cli >= 2.0.1
The react plugin is unable to package the Urban Airship iOS SDK, therefore it must be installed as a separate step. When updating the plugin, update the SDK as well.
- Install and link the module:
react-native install urbanairship-react-native
react-native link urbanairship-react-native
-
Install AirshipKit by following installation guide. The react module will do its best to find the
AirshipKit
path, but if it's unable to find it for your project due to a non-standard install path or manual installation, you can setAIRSHIP_SEARCH_PATH
variable with the location of the framework. -
Add the following capabilities for your application target:
- Push Notification
- Background Modes > Remote Notifications
- Create a plist
AirshipConfig.plist
and include it in your application’s target:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>developmentAppKey</key>
<string>Your Development App Key</string>
<key>developmentAppSecret</key>
<string>Your Development App Secret</string>
<key>productionAppKey</key>
<string>Your Production App Key</string>
<key>productionAppSecret</key>
<string>Your Production App Secret</string>
</dict>
</plist>
- Optional. In order to take advantage of iOS 10 notification attachments, such as images, animated gifs, and video, you will need to create a notification service extension by following the iOS Notification Service Extension Guide
- Install and link the module:
react-native install urbanairship-react-native
react-native link urbanairship-react-native
- Create the
airshipconfig.properties
file in the application'smain/assets
:
developmentAppKey = Your Development App Key
developmentAppSecret = Your Development App Secret
productionAppKey = Your Production App Key
productionAppSecret = Your Production Secret
# Notification customization
notificationIcon = ic_notification
notificationAccentColor = #ff0000
Adding FCM to your react-native project can be accomplished with the following steps:
- Add the google-services gradle plugin dependency to the
build.gradle
file in project root directory:
buildscript {
repositories {
jcenter()
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.1'
classpath 'com.google.gms:google-services:4.0.1'
}
}
- Apply the google-services plugin at the end of the
build.gradle
file in theapp/
directory. The plugin directive specifically needs to be included at the end of thebuild.gradle
file to prevent potential dependency collisions. For more information, see the plugin documentation.
apply plugin: 'com.google.gms.google-services'
-
Download your
google-services.json
file. This can be accomplished by followinggoogle-services.json
help documentation: -
Add the downloaded
google-service.json
file to theapp/
directory of your project. For more information on adding the configuration file please see the google services plugin guide
Firebase core and messaging dependencies versions can be overriden by setting the firebaseCoreVersion
and firebaseMessagingVersion
in the project's build.gradle file:
ext {
firebaseCoreVersion "VERSION"
// Requires 17.1.0+
firebaseMessagingVersion "VERSION"
}
Notifications by default are disabled to avoid prompting the user for permissions at an inopportune time. For testing purposes, you probably want to enable Notifications immediately to verify push is working:
Note: Push notifications are not supported on iOS simulators.
import {
UrbanAirship,
UACustomEvent,
} from 'urbanairship-react-native'
...
export default class Sample extends Component {
constructor(props) {
super(props);
UrbanAirship.setUserNotificationsEnabled(true);
}
...
}