Getting Started

This is a developers' guide for setting up the Airship SDK for React Native apps.

The Airship React Native modules allow a developer to integrate push notification services with React Native apps targeting both Android and iOS. These modules are designed to be cross-platform, and applications making use of them can leverage the same code on both platforms.

Resources

Requirements

  • React Native >= 0.60.0
  • React Native cli >= 2.0.1

iOS

  • Xcode 12+

Android

  • minSdkVersion 16+
  • compileSdkVersion 29

Installation

Using Yarn

yarn add urbanairship-react-native

Using NPM

npm install urbanairship-react-native --save

Android Setup

  1. Create the airshipconfig.properties file in the application’s main/assets.

    Example airshipconfig.properties
    developmentAppKey = Your Development App Key
    developmentAppSecret = Your Development App Secret
    
    productionAppKey = Your Production App Key
    productionAppSecret = Your Production Secret
    
    notificationIcon = ic_notification
    notificationAccentColor = #ff0000

  2. Download the Android Firebase configuration file google-services.json from the application’s Firebase console into the root directory at android/app/google-services.json.

If your react-native application does not have an associated app in the Firebase console, follow the FCM setup instructions to set one up.

EU Cloud Site

If your app uses Airship’s EU cloud site, you will need to set the site in airshipconfig.properties:

# EU Cloud Site
site = EU

iOS Setup

  1. Install pods
$ pod install
  1. Open your apps project in the generated .xcworkspace file, add the following capabilities:
  • Push Notification
  • Background Modes > Remote Notifications
  1. Create a plist named AirshipConfig.plist and include it in your application’s target.
    Example AirshipConfig.plist
    <?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>

EU Cloud Site

If your app uses Airship’s EU cloud site, you will need to add that to AirshipConfig.plist.

  <key>site</key>
  <string>EU</string>

Notification Service Extension

To take advantage of notification attachments, such as images, animated gifs, and video, you will need to create a notification service extension.

Follow the steps in the iOS Notification Service Extension Guide.

Send Your First Push Notification

At this point in the guide, if you followed all the steps above you should be ready to send a test push notification to verify everything is set up properly.

Before sending a push, you must enable user notifications. The module does not enable user notifications by default in order to avoid prompting the user for permissions. But for a testing purposes, you can enable user notifications as soon as the application is ready. You may also want to set default foreground presentation options to display the notification in the foreground.

Enable user notifications
import {
  UrbanAirship,
  UACustomEvent,
} from 'urbanairship-react-native'


class SampleApp extends Component {

  constructor(props) {
    super(props);

    UrbanAirship.setUserNotificationsEnabled(true)
  }

  ...
}

URL Allow List

 Note

As of SDK 14.0, open URL scoped URLs are now always verified.

The UAURLAllowList controls which URLs the Airship SDK is able to act on. The SDK divides up usages of URLs into two different scopes:

  • iOS: URLAllowListScopeOpenURL, Android: urlAllowListScopeOpenUrl: Only URLs allowed for this scope can be opened from an action, displayed in landing page, displayed in an HTML in-app message, or displayed as media in an In-App Automation. Defaults to any Airship-originated URLs and YouTube URLs.
  • iOS: URLAllowListScopeJavaScriptInterface, Android: urlAllowListScopeJavaScriptInterface: These URLs are checked before the Airship JavaScript interface is injected into the webview. Defaults to any Airship-originated URLs.

The easiest way to expand the list of allowed URLs is to provide a list of URL patterns in the AirshipConfig.plist.

iOS example config URL pattern syntax
<key>URLAllowListScopeOpenUrl</key>
<array>
    <string>https://*.mydomain.com</string>
</array>

<key>URLAllowListScopeJavaScriptInterface</key>
<array>
    <string>https://*.mydomain.com</string>
</array>

<key>URLAllowList</key>
<array>
    <string>https://*.mydomain.com</string>
</array>
Android example config URL pattern syntax
# SCOPE_OPEN_URL
urlAllowListScopeOpenUrl = *, https://*.mycompany.com

# SCOPE_JAVASCRIPT_INTERFACE
urlAllowListScopeJavaScriptInterface = https://*.mycompany.com

# Applies to both SCOPE_OPEN_URL & SCOPE_JAVASCRIPT_INTERFACE
urlAllowList = https://*.mycompany.com
Valid URL pattern syntax
<pattern> := '*' | <scheme>'://'<host>/<path> | <scheme>'://'<host> | <scheme>':/'<path> | <scheme>':///'<path>
<scheme> := <any char combination, '*' are treated as wild cards>
<host> := '*' | '*.'<any char combination except '/' and '*'> | <any char combination except '/' and '*'>
<path> := <any char combination, '*' are treated as wild cards>