# Install and Set Up the React Native Module

How to install the Airship React Native module.

The Airship React Native module provides a TypeScript-first interface for React Native apps. It wraps the native iOS and Android Airship SDKs, giving you full access to all platform features while maintaining a JavaScript/TypeScript developer experience with strong typing and modern async/await patterns.

## Requirements

For supported versions and React Native compatibility, see [Supported Versions](https://github.com/urbanairship/react-native-airship?tab=readme-ov-file#supported-versions).

### iOS

* Xcode `15.3+`
* minimum deployment target iOS `15+`

### Android

* minSdkVersion `23+`
* compileSdkVersion `36+`


## Standard React Native Setup

Install the plugin using yarn or npm:

`yarn add @ua/react-native-airship`

## Expo Setup

Apps using Expo's managed workflows can use the `airship-expo-plugin` to configure the project.

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

### Configure the plugin

Add the plugin to the `app.json` with the app's config:

```js
"plugins":[
  [
    "airship-expo-plugin",
    {
      "android":{
        "icon": "./assets/ic_notification.png",
        "customNotificationChannels": "./assets/notification_channels.xml",
        "airshipExtender": "./assets/AirshipExtender.kt"
      },
      "ios":{
        "mode": "development",
        "notificationService": "./assets/NotificationService.swift",
        "notificationServiceInfo": "./assets/NotificationServiceExtension-Info.plist",
        "notificationServiceTargetName": "NotificationServiceExtension",
        "developmentTeamID": "MY_TEAM_ID",
        "deploymentTarget": "15",
        "airshipExtender": "./assets/AirshipPluginExtender.swift"
      }
    }
  ]
]
```


Android Config:
- icon: Required. Local path to an image to use as the icon for push notifications. 96x96 all-white png with transparency. The name of the icon will be the resource name.
- customNotificationChannels: Optional. The local path to a Custom Notification Channels resource file.
- airshipExtender: Optional. The local path to a AirshipExtender.kt file.

iOS Config:
- mode: Required. The APNS entitlement. Either `development` or `production`.
- notificationService: Optional. The local path to a custom Notification Service Extension or `DEFAULT_AIRSHIP_SERVICE_EXTENSION` for Airship's default one.
- notificationServiceInfo: Optional. Airship will use a default one if not provided. The local path to a Notification Service Extension Info.plist.
- notificationServiceTargetName: Optional. Defaults to NotificationServiceExtension if not provided.
- developmentTeamID: Optional. The Apple Development Team ID used to configure the Notification Service Extension target.
- deploymentTarget: Optional. The minimum Deployment Target version used to configure the Notification Service Extension target. Defaults to iOS 15.
- airshipExtender: Optional. The local path to a AirshipPluginExtender.swift file.

## Calling TakeOff

`takeOff` should be called in a standard application at the beginning of the lifecycle. Once `takeOff` is called, the config will be stored and applied for future app inits. If `takeOff` is called again with a different config, the new config will not be applied until the next app init.

```ts
import Airship from '@ua/react-native-airship';

Airship.takeOff({
    default: {
        appKey: "REPLACE_WITH_YOUR_APP_KEY",
        appSecret: "REPLACE_WITH_YOUR_APP_SECRET"
    },
    site: "us", // use "eu" for EU cloud projects
    urlAllowList: ["*"],
    android: {
        notificationConfig: {
            icon: "ic_notification",
            accentColor: "#00ff00"
        }
    }
});
```


For a complete list of configuration options, see the [AirshipConfig reference](https://www.airship.com/docs/reference/libraries/react-native/latest/interfaces/AirshipConfig.html).

## Test the integration

After completing the setup, verify your integration:

1. **Build and run your app** on your iOS or Android device/simulator/emulator.
2. **Check the console output** for Airship channel creation:
   - **iOS**: Look for a log message in Xcode console: `Channel ID: <CHANNEL_ID>`
   - **Android**: Look for a log message in logcat: `Airship channel created: <CHANNEL_ID>`
   - The channel ID confirms successful SDK initialization.
   - For more detailed logging, see [Logging](https://www.airship.com/docs/developer/sdk-integration/react-native/installation/logging/).

If you see the channel ID in the console and no errors, your integration is successful. 

## Next steps

- [Advanced Configuration](https://www.airship.com/docs/developer/sdk-integration/react-native/installation/advanced-configuration/): Configure URL allowlists and other advanced settings
- [Extending Airship](https://www.airship.com/docs/developer/sdk-integration/react-native/installation/extending-airship/): Access native SDK features for advanced customization
- [Push Notifications](https://www.airship.com/docs/developer/sdk-integration/react-native/push-notifications/getting-started/): Configure push notifications
- [Deep Links](https://www.airship.com/docs/developer/sdk-integration/react-native/deep-links/): Handle deep links in your app

If you don't see a channel ID or encounter errors during initialization, see [Troubleshooting Initialization](https://www.airship.com/docs/developer/sdk-integration/react-native/troubleshooting/initialization/) for common problems and solutions.