Skip to main content

React Native Setup

Step 1. Basic Requirements for service usage​

iOS Requirements​

  • We are supporting iOS 10+ or iPadOS(iPhone, iPad, iPod Touch) to test on
  • A Mac with Xcode 13+

Android Requirements​

  • An Android 5.0+ device or emulator.
  • Project using AndroidX.
  • compileSDKVersion set to 29 or higher.
  • Gradle version 7.0+

Step 2. Add the AppsOnAir package to your app​

Install the SDK using NPM, Autolink feature links the module while building the app.

npm install --save appsonair-react-native-sdk

Step 3. Android required steps​

Add meta-data to the app module's AndroidManifest.xml file under the application tag

AndroidManifest.xml

    <!-- add meta-data inside application tag --> 
    <application>
        <!-- App icon for dialog  -->
        <meta-data
            android:name="com.appsonair.icon"
            android:resource="@drawable/app_icon" />

        <!-- App name for dialog  -->
        <meta-data
            android:name="com.appsonair.name"
            android:value="app_name" />
    </application>

appimage

Step 4. iOS required steps​

4.1 Info.plist must contains a Bundle display name property​

The Bundle display name property allows you to display your app name while installing App on a specific device. We need this property mandatory because we are using a bundle display name to show an alert with this property value. For more please refer to the following image.

Docusaurus logo

4.2 Import the AppsOnAirServices SDK into your Xcode Project​

Run the command cd ios && pod install in terminal to your project's root directory.

Step 5. Initialize the AppsOnAir SDK​

In your App.js or index.js initialize AppsOnAir and try the example methods below: setAppId(APPSONAIR_APP_ID, flag)

index.js

import AppsOnAir from 'appsonair-react-native-sdk';

const APPSONAIR_APP_ID = "########-####-####-####-############";

//initialization
AppsOnAir.setAppId(APPSONAIR_APP_ID, true);

Step 6. Set Custom UI (Optional step)​

If you want to show a custom alert for app updates and maintenance dialogue then setAppId is recommended the second parameter should be set to false. Now, call checkForAppUpdate to show a custom alert for app updates and maintenance dialogue to match your design requirements. To use this method where needed use the same import statement that we have used in the previous step. Use this method as follows:

import AppsOnAir from 'appsonair-react-native-sdk';

const APPSONAIR_APP_ID = "########-####-####-####-############";
...
//initialization
AppsOnAir.setAppId(APPSONAIR_APP_ID, false);

AppsOnAir.checkForAppUpdate((res) => {
    console.log('res', res);
    // Do your code to show your custom UI.
});