Skip to main content

React Native SDK Setup

AppsOnAir-react-native-AppLink enables seamless handling of deep links and in-app routing within your React Native app. With simple integration, you can configure, manage, and act on links directly from the web dashboard in real time.

BETA

The plugin is fully functional and integrates with our AppLink service, which is currently in public beta. While you can start using it today, please note that there may be minor changes or improvements as we prepare for full production launch.

Prerequisites

Minimum Requirements​

apiKey Setup

Make sure to configure the API key properly. For additional information Getting started

Android​

  • Android Gradle Plugin (AGP): version 8.0.2 or higher
  • Kotlin: version 1.7.10 or higher
  • Gradle: version 8.0 or higher

iOS​

  • Minimum deployment target: iOS 13.0

Android Setup​

Adding Intent-Filter in AndroidManifest.xml​

Add the following <intent-filter> inside the <activity> tag of your main activity in AndroidManifest.xml:

  • Replace your-domain.com with your actual domain configured in AppsOnAir.
AndroidManifest.xml
 <intent-filter android:autoVerify="true">
   <action android:name="android.intent.action.VIEW" />
   <category android:name="android.intent.category.DEFAULT" />
   <category android:name="android.intent.category.BROWSABLE" />
    <data
     android:host="your-domain.com"
     android:scheme="https" />
 </intent-filter>

If you're using a custom URI scheme, add this additional <intent-filter> block under the same activity:

  • Replace your-domain.com and your-scheme with the custom domain and scheme you’ve defined.
AndroidManifest.xml
 <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
     android:host="your-domain.com"
     android:scheme="your-scheme" />
</intent-filter>

In your MainActivity class (which should extend ReactActivity), override the onNewIntent method as shown below:

MainActivity.kt
<!-- Step1: Add this imports -->

import android.content.Intent
import com.appsonairreactnativeapplink.AppsonairReactNativeApplinkModule
import com.facebook.react.ReactApplication

class MainActivity : ReactActivity() {
...

<!-- Step2: Override onNewIntent method  -->

    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        setIntent(intent)

        val reactContext = (application as? ReactApplication)
            ?.reactNativeHost
            ?.reactInstanceManager
            ?.currentReactContext

        if (reactContext != null) {
            reactContext
            .getNativeModule(AppsonairReactNativeApplinkModule::class.java)
            ?.onNewIntent(intent)
        }
    }

}

iOS Setup​

Note
  • Configuring associated domains is optional.

To support Universal Links, create or edit the YOUR_PROJECT.entitlements file and add the following configuration:

  • In Xcode, Under TARGETS, select your app target (usually the one named after your app).
  • At the top, select the Signing & Capabilities tab.
  • Click the + Capability button in the top-left corner of that section.
  • In the list of capabilities, scroll or search to select Associated Domains.
  • This will automatically create a file named YOUR_PROJECT.entitlements.

Associated Domains

YOUR_PROJECT.entitlements
<key>com.apple.developer.associated-domains</key>
<array>
    <string>applinks:YOUR_DOMAIN</string> <!-- Replace with your actual domain -->
</array>
Note

After configuring the Associated Domain for Universal Links, it may take up to 24 hours for the changes to be reflected and become active. The Associated Domain setup and verification process is managed by Apple.

To support a Custom URL Scheme, add the following to your app’s Info.plist file:

  • Replace YOUR_URL_NAME with a descriptive name for your app, and YOUR_CUSTOM_URL_SCHEME with the scheme you want to use.
Info.plist
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>YOUR_URL_NAME</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_CUSTOM_URL_SCHEME</string> <!-- Replace with your custom URL scheme -->
        </array>
    </dict>
</array>

To handle both Universal Links and Custom URL Schemes, add the following methods to your AppDelegate file:

AppDelegate.swift
import AppsOnAir_AppLink
...

var window: UIWindow?
let appOnAirLinkService = AppLinkService.shared
...

    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
        let url = userActivity.webpageURL else {
            return false
        }
        appOnAirLinkService.handleAppLink(incomingURL: url)
        return true
    }

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        appOnAirLinkService.handleAppLink(incomingURL: url)
        return true
    }

Installation​

Install the AppsOnAir React Native AppLink package:

Terminal
npm install appsOnAir-react-native-appLink
for IOS

Don't forgot to install pods! (for iOS)

Usage​

Before handling any deep links, you need to initialize the AppsOnAir AppLink SDK. This is typically done in your app’s entry point such as inside a top-level component or during app startup.

App.tsx
import React, { useEffect } from 'react';
import { initializeAppLink } from 'appsonair-react-native-applink';

const App = () => {
  useEffect(() => {
    // Initialize AppLink on app startup
    initializeAppLink();
  }, []);

  return (
    // your JSX
  );
};

Use onDeepLinkProcessed to listen for incoming deep links after initialization. This allows you to respond to navigation events or extract data from the link.

App.tsx
import React, { useEffect } from 'react';
import {
  initializeAppLink,
  onDeepLinkProcessed,
} from 'appsonair-react-native-applink';

const App = () => {
  useEffect(() => {
    initializeAppLink();

    // Subscribe to deep link events
    const sub = onDeepLinkProcessed(event => {
      console.log(`✅ Processed:\n${JSON.stringify(event, null, 2)}`);
    });

    // Cleanup on unmount
    return () => {
      sub?.remove();
    };
  }, []);

  return (
    // your UI rendering deepLinkResult
  );
};

Use createAppLink to programmatically generate a new AppLink from your React Native app by passing a structured set of parameters.

App.tsx
import React, { useState } from "react";
import { Alert, Button, TextInput, View } from "react-native";
import {
  createAppLink,
  type AppLinkParams,
  type CreateAppLinkResponse,
} from "appsonair-react-native-applink";

const App = () => {
  const [linkParams, setLinkParams] = useState<AppLinkParams>({
    name: "",
    url: "",
    urlPrefix: "", // Replace with your actual domain prefix
    metaTitle: "",
    metaDescription: "",
    metaImageUrl: "",
    iOSFallbackUrl: "",
    androidFallbackUrl: "",
    shortId: "",
    isOpenInAndroidApp: true,
    isOpenInBrowserAndroid: false,
    isOpenInIosApp: true,
    isOpenInBrowserApple: false,
  });

  const handleCreateLink = async () => {
    try {
      const result: CreateAppLinkResponse = await createAppLink(linkParams);

      if ("error" in result) {
        throw new Error(result.error);
      }

      if (result.status !== "SUCCESS") {
        const errorMessage =
          typeof result.message === "string"
            ? result.message
            : "Failed to create link";
        throw new Error(errorMessage);
      }

      const shortUrl =
        typeof result.message === "object"
          ? result.message.shortUrl
          : "No link returned";

      Alert.alert("AppLink Created", shortUrl);
    } catch (err: any) {
      console.log(err);
      Alert.alert("Error Creating Link", err.message || "Unknown error");
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Enter URL"
        value={linkParams.url}
        onChangeText={(text) => setLinkParams({ ...linkParams, url: text })}
      />
      <Button title="Create AppLink" onPress={handleCreateLink} />
    </View>
  );
};

Get Referral Details​

Use getReferralDetails to retrieve any referral data passed through a deep link.

App.tsx
import { Button } from "react-native";
import { getReferralDetails } from "appsonair-react-native-applink";

const App = () => {
  const handleReferralDetails = async () => {
    try {
      const info = await getReferralDetails();
      console.log("Referral Info", JSON.stringify(info, null, 2));
    } catch (err) {
      console.log("Error", JSON.stringify(err, null, 2));
    }
  };

  return <Button title="Get Referral Info" onPress={handleReferralDetails} />;
};
Response
{
 "data": {
   "shortId": "linkId",
   "referralLink": "https://your.referral.link"
 }
}

For more details explore the example​