urbanairship-react-native

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>urbanairship-react-native</title> <meta name="description" content="Documentation for urbanairship-react-native"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">urbanairship-react-native</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> <span class="tsd-select-label">All</span> <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> <input type="checkbox" id="tsd-filter-only-exported" /> <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <ul class="tsd-breadcrumb"> <li> <a href="globals.html">Globals</a> </li> </ul> <h1>urbanairship-react-native</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <a href="#airship-react-native" id="airship-react-native" style="color: inherit; text-decoration: none;"> <h1>Airship React Native</h1> </a> <p>A React Native module for Airship's iOS and Android SDK.</p> <a href="#resources" id="resources" style="color: inherit; text-decoration: none;"> <h3>Resources</h3> </a> <ul> <li><a href="http://docs.airship.com/platform/react-native/">Getting started guide</a></li> <li><a href="http://docs.airship.com/reference/libraries/react-native/latest/index.html">API docs</a></li> </ul> <a href="#issues" id="issues" style="color: inherit; text-decoration: none;"> <h3>Issues</h3> </a> <p>Please visit <a href="https://support.airship.com/">https://support.airship.com/</a> for any issues integrating or using this module.</p> <a href="#requirements" id="requirements" style="color: inherit; text-decoration: none;"> <h3>Requirements:</h3> </a> <ul> <li>Xcode 13+</li> <li>iOS: Deployment target 11.0+</li> <li>Android: minSdkVersion 21+, compileSdkVersion 31+</li> <li>Gradle Plugin to version 3.0.0 or higher</li> <li>Java 8</li> <li>React Native >= 0.60.0</li> <li>React Native cli >= 2.0.1</li> </ul> <a href="#install" id="install" style="color: inherit; text-decoration: none;"> <h2>Install</h2> </a> <pre><code><span class="hljs-comment"># using yarn</span> yarn add urbanairship-react-<span class="hljs-keyword">native</span> <span class="hljs-comment"># using npm</span> <span class="hljs-built_in">npm</span> install urbanairship-react-<span class="hljs-keyword">native</span> --save</code></pre> <a href="#ios-setup" id="ios-setup" style="color: inherit; text-decoration: none;"> <h2>iOS Setup</h2> </a> <p>1) Install pods</p> <pre><code>cd ios <span class="hljs-meta">&& pod install</span></code></pre><p>2) Add the following capabilities for your application target:</p> <ul> <li>Push Notification</li> <li>Background Modes > Remote Notifications</li> </ul> <p>3) Create a plist <code>AirshipConfig.plist</code> and include it in your application’s target:</p> <pre><code><span class="hljs-meta"><?xml version="1.0" encoding="UTF-8"?></span> <span class="hljs-meta"><!DOCTYPE <span class="hljs-meta-keyword">plist</span> <span class="hljs-meta-keyword">PUBLIC</span> <span class="hljs-meta-string">"-//Apple//DTD PLIST 1.0//EN"</span> <span class="hljs-meta-string">"http://www.apple.com/DTDs/PropertyList-1.0.dtd"</span>></span> <span class="hljs-tag"><<span class="hljs-name">plist</span> <span class="hljs-attr">version</span>=<span class="hljs-string">"1.0"</span>></span> <span class="hljs-tag"><<span class="hljs-name">dict</span>></span> <span class="hljs-tag"><<span class="hljs-name">key</span>></span>developmentAppKey<span class="hljs-tag"></<span class="hljs-name">key</span>></span> <span class="hljs-tag"><<span class="hljs-name">string</span>></span>Your Development App Key<span class="hljs-tag"></<span class="hljs-name">string</span>></span> <span class="hljs-tag"><<span class="hljs-name">key</span>></span>developmentAppSecret<span class="hljs-tag"></<span class="hljs-name">key</span>></span> <span class="hljs-tag"><<span class="hljs-name">string</span>></span>Your Development App Secret<span class="hljs-tag"></<span class="hljs-name">string</span>></span> <span class="hljs-tag"><<span class="hljs-name">key</span>></span>productionAppKey<span class="hljs-tag"></<span class="hljs-name">key</span>></span> <span class="hljs-tag"><<span class="hljs-name">string</span>></span>Your Production App Key<span class="hljs-tag"></<span class="hljs-name">string</span>></span> <span class="hljs-tag"><<span class="hljs-name">key</span>></span>productionAppSecret<span class="hljs-tag"></<span class="hljs-name">key</span>></span> <span class="hljs-tag"><<span class="hljs-name">string</span>></span>Your Production App Secret<span class="hljs-tag"></<span class="hljs-name">string</span>></span> <span class="hljs-tag"></<span class="hljs-name">dict</span>></span> <span class="hljs-tag"></<span class="hljs-name">plist</span>></span></code></pre><p>4) 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 <a href="https://docs.airship.com/platform/reference/ios-extension/">iOS Notification Service Extension Guide</a></p> <a href="#android-setup" id="android-setup" style="color: inherit; text-decoration: none;"> <h2>Android Setup</h2> </a> <p>1) Compile and Target SDK Versions:</p> <p>Urban Airship now requires <code>compileSdk</code> version 31 (Android 12) or higher.</p> <p>Please update the <code>build.gradle</code> file:</p> <pre><code class="language-groovy">android { compileSdkVersion <span class="hljs-number">31</span> defaultConfig { minSdkVersion <span class="hljs-number">21</span> targetSdkVersion <span class="hljs-number">31</span> <span class="hljs-comment">// ...</span> } }</code></pre> <p>2) Java 8 Source Compatibility:</p> <p>Urban Airship now requires Java 8 language features across all SDK modules.</p> <p>Please update Android Gradle Plugin to version <code>3.0.0</code> or higher and change the source and target compatibility for each module that uses Airship SDKs:</p> <pre><code class="language-groovy">android { compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } }</code></pre> <p>Modules using Kotlin will also need to set the target version of the generated JVM bytecode:</p> <pre><code class="language-groovy">tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach { kotlinOptions { jvmTarget = JavaVersion.VERSION_1_8 } }</code></pre> <p>3) Create the <code>airshipconfig.properties</code> file in the application's <code>app/src/main/assets</code>:</p> <pre><code>developmentAppKey = Your Development App Key developmentAppSecret = Your Development App Secret productionAppKey = Your Production App Key productionAppSecret = Your Production Secret <span class="hljs-comment"># Notification customization</span> notificationIcon = ic_notification notificationAccentColor = <span class="hljs-comment">#ff0000</span></code></pre> <a href="#android-fcm-setup" id="android-fcm-setup" style="color: inherit; text-decoration: none;"> <h3>Android FCM Setup</h3> </a> <p>Adding FCM to your react-native project can be accomplished with the following steps:</p> <p>1) Add the google-services gradle plugin dependency to the <code>build.gradle</code> file in project root directory:</p> <pre><code><span class="hljs-keyword">buildscript</span> { <span class="hljs-keyword">repositories</span> { jcenter() google() } <span class="hljs-keyword">dependencies</span> { ... <span class="hljs-keyword">classpath</span> <span class="hljs-string">'com.google.gms:google-services:4.2.0'</span> } }</code></pre><p>2) Apply the google-services plugin <em>at the end</em> of the <code>build.gradle</code> file in the <code>app/</code> directory. The plugin directive specifically needs to be included at the <em>end</em> of the <code>build.gradle</code> file to prevent potential dependency collisions. For more information, see the <a href="https://developers.google.com/android/guides/google-services-plugin">plugin documentation</a>.</p> <pre><code><span class="hljs-attribute">apply</span> plugin: <span class="hljs-string">'com.google.gms.google-services'</span></code></pre><p>3) Download your <code>google-services.json</code> file. This can be accomplished by following <a href="https://support.google.com/firebase/answer/7015592"><code>google-services.json</code> help documentation</a>:</p> <p>4) Add the downloaded <code>google-service.json</code> file to the <code>app/</code> directory of your project. For more information on adding the configuration file please see the <a href="https://developers.google.com/android/guides/google-services-plugin#adding_the_json_file">google services plugin guide</a></p> <a href="#overriding-firebase-dependency-versions" id="overriding-firebase-dependency-versions" style="color: inherit; text-decoration: none;"> <h3>Overriding Firebase Dependency Versions</h3> </a> <p>Firebase core and messaging dependencies versions can be overriden by setting the <code>firebaseCoreVersion</code> and <code>firebaseMessagingVersion</code> in the project's build.gradle file:</p> <pre><code>ext { <span class="hljs-regexp">//</span> Requires <span class="hljs-number">21.0</span>.<span class="hljs-number">0</span>+ firebaseMessagingVersion <span class="hljs-string">"VERSION"</span> }</code></pre> <a href="#enabling-notifications" id="enabling-notifications" style="color: inherit; text-decoration: none;"> <h2>Enabling Notifications</h2> </a> <p>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:</p> <p> <em>Note: Push notifications are not supported on iOS simulators.</em></p> <pre><code><span class="hljs-keyword">import</span> { <span class="hljs-type">UrbanAirship</span>, <span class="hljs-type">UACustomEvent</span>, } from <span class="hljs-symbol">'urbanairship</span>-react-native' ... export <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Sample</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{ constructor(props) { <span class="hljs-keyword">super</span>(props); <span class="hljs-type">UrbanAirship</span>.setUserNotificationsEnabled(<span class="hljs-literal">true</span>); } ... }</code></pre> </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="globals.html"><em>Globals</em></a> </li> <li class=" tsd-kind-module"> <a href="modules/_attributeeditor_.html">"<wbr>Attribute<wbr>Editor"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_customevent_.html">"<wbr>Custom<wbr>Event"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_json_.html">"<wbr>Json"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_messageview_.html">"<wbr>Message<wbr>View"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_scopedsubscriptionlisteditor_.html">"<wbr>Scoped<wbr>Subscription<wbr>List<wbr>Editor"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_subscriptionlisteditor_.html">"<wbr>Subscription<wbr>List<wbr>Editor"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_subscriptionlists_.html">"<wbr>Subscription<wbr>Lists"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_taggroupeditor_.html">"<wbr>Tag<wbr>Group<wbr>Editor"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_uaeventemitter_.html">"UAEvent<wbr>Emitter"</a> </li> <li class=" tsd-kind-module"> <a href="modules/_urbanairship_.html">"<wbr>Urban<wbr>Airship"</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-namespace"><span class="tsd-kind-icon">Namespace</span></li> <li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li> <li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li> <li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li> <li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li> </ul> </div> </div> </footer> <div class="container tsd-generator"> <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> </body> </html>