The Airship React Native module allows a developer to integrate push notification services with React Native apps targeting both Android and iOS. This module is designed to be cross-platform, and applications making use of it can leverage the same code on both platforms.

Resources

• Sample
• API docs
• Github Repo

Requirements

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

iOS

• Xcode 11+
• Airship SDK 12+

Android

• minSdkVersion 16+
• compileSdkVersion 28+

Installation

Using Yarn

Using NPM

Android Setup

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

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.

iOS Setup

1) If necessary, install cocoapods.

2) Generate a Pod file if needed.

3) Update the app's Podfile to include the Airship SDK.

4) Update your pods.

5) Open your apps project in the generated .xcworkspace file, add the following capabilities:

• Push Notification
• Background Modes > Remote Notifications

6) 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>

Notification Service Extension

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.

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 on iOS 10. On older iOS devices, make sure you background the app before sending the push.

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


class SampleApp extends Component {

  constructor(props) {
    super(props);

    UrbanAirship.setUserNotificationsEnabled(true)
  }

  ...
}