The official Airship React Native module for iOS and Android.

Features

• Push Notifications - Rich, interactive push notifications with deep linking
• Live Activities & Live Updates - Real-time content updates on iOS Lock Screen and Android Live Content
• In-App Experiences - Contextual messaging, automation, and Scenes
• Embedded Content - Render Airship Scenes directly in your React Native app
• Custom Views - Extend Scenes with native content
• Message Center - Persistent inbox for rich messages with HTML, video, and interactive content
• Preference Center - User preference management
• Feature Flags - Dynamic feature toggles and experimentation
• Analytics - Comprehensive user behavior tracking
• Contacts - User identification and contact management
• Tags, Attributes & Subscription Lists - User segmentation, personalization, and subscription management
• Privacy Controls - Granular data collection and feature management
• Extensible & Hybrid Compatible - Works seamlessly in hybrid apps and supports native extensions

Quick Start

Standard React Native

Install the package:

npm install @ua/react-native-airship --save

or

yarn add @ua/react-native-airship

See iOS Integration below for the required Podfile setup.

Expo

Apps using Expo can use the airship-expo-plugin to configure the project. You will need to use expo prebuild (custom dev client) or eas build since this package contains native code.

First, install the plugin and the main package:

expo install airship-expo-plugin
yarn add @ua/react-native-airship

Then, add the plugin to your app.json:

"plugins": [
  [
    "airship-expo-plugin",
    {
      "android": {
        "icon": "./path/to/ic_notification.png"
      },
      "ios": {
        "mode": "development"
      }
    }
  ]
]

iOS Integration

This package supports two iOS dependency managers:

• CocoaPods (default). The Airship SDK is pulled in through React Native's CocoaPods+SPM bridge (spm_dependency in react-native-airship.podspec) as an automatic-type Swift package product. Statically linking an automatic-type package lets every pod that embeds it carry its own copy, which collides at link time as duplicate-symbol errors, so your ios/Podfile needs:

  use_frameworks! :linkage => :dynamic
  

• Swift Package Manager (experimental). React Native 0.87 adds an experimental, opt-in SwiftPM integration as an alternative to CocoaPods. This package ships a Package.swift, so it is picked up automatically once your app is set up for SwiftPM:

  cd ios
  npx react-native spm
  

  React Native's SwiftPM support is still marked experimental. On React Native <0.88, the generated autolinking package hardcodes an iOS 15 minimum, which prevents packages that require iOS 16 (including this one) from resolving. React Native 0.88 fixes this by reading the floor from your app's own Xcode deployment target instead.

Initialization

Initialize Airship in your App.tsx:

import { useEffect } from 'react';
import Airship from '@ua/react-native-airship';

export default function App() {
  useEffect(() => {
    const takeOff = async () => {
      try {
        await Airship.takeOff({
          default: {
            appKey: "YOUR_APP_KEY",
            appSecret: "YOUR_APP_SECRET"
          },
        });
        
        await Airship.push.enableUserNotifications();
      } catch (error) {
        console.error("Failed to take off:", error);
      }
    };

    takeOff();
  }, []);

  // ... your app code
}

For a more detailed setup guide, please see the full Getting Started Documentation.

Sizing an Embedded View

AirshipEmbeddedView fills the box you give it. Give it a height and the content is laid out inside that box:

<AirshipEmbeddedView embeddedId="banner" style={{ height: 120 }} />

Set sizeToContent to have the view take the height of its content instead. Use it when the content's height is not known ahead of time, such as a banner in a feed:

<AirshipEmbeddedView embeddedId="banner" sizeToContent />

It is off by default, so adding it is the only thing that changes sizing behaviour. Once a usable measurement arrives it replaces any height in style, so a view whose height comes from its layout should leave it off. Before that first measurement, and whenever there is no content, the style is used as written.

Reacting to the measured height

onSizeChange reports each measurement in points, and fires only while sizeToContent is set. Use it when the surrounding layout needs the number, for example to animate a container alongside the view:

<AirshipEmbeddedView
  embeddedId="banner"
  sizeToContent
  onSizeChange={({ height }) => setBannerHeight(height)}
/>

A height of 0 means there is no content to show. It arrives when content goes away, and on iOS also on mount when nothing is pending. It does not force the view to collapse: a view that also states a height in style keeps that height.

The example app shows these side by side, on the Embedded Views screen.

Versions and Support

For the current Support Status of each module major, EOL dates, and the full lifecycle policy, see the Airship SDK Support Policy.

Resources

• Documentation - Complete SDK integration guides and feature documentation
• API Reference - Detailed TypeScript API documentation
• SDK Support Policy - Version lifecycle, support windows, and EOL dates across all Airship SDKs
• GitHub Issues - Report bugs and request features
• Changelog - Release notes and version history
• Migration Guide - Upgrade guides between major versions