Getting Started

React Native API Integration

Overview

The ReferralHero API is organized around REST. Our API has predictable, resource-oriented URLs. JSON is returned by all API responses, including errors.

1. Get Your ReferralHero Keys & Token

1. API Token: Retrieve your API_TOKEN from the ReferralHero Dashboard by navigating to -> API: ReferralHero Dashboard.

1. AirBridge App Credentials

   If you already have an AirBridge account, keep your credentials ready.

   If not — no worries, we’ll handle the setup for you.

   Once you configure your referral tracking campaign and enable Mobile Apps, we’ll email you the required credentials for integration:

   • YOUR_APP_NAME

   • YOUR_APP_SDK_TOKEN

If you don’t receive the email, please contact ReferralHero Support at [e-mail]

---

2. Install Dependencies

• Using NPM

  npm install airbridge-react-native-sdk

• Using yarn

  yarn add airbridge-react-native-sdk

3. Configure App

3.1 Android Configuration

a) Add Intent Filters in AndroidManifest.xml

Add under your <activity>:

Scheme Deep Link:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Replace YOUR_SCHEME with your actual app scheme -->
    <data android:scheme="YOUR_SCHEME" />
</intent-filter>

App Links:

<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" />
    <!-- Replace YOUR_APP_NAME with your actual app name -->
    <data android:scheme="https" android:host="YOUR_APP_NAME.abr.ge" />
</intent-filter>

<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" />
    <!-- Replace YOUR_APP_NAME with your actual app name -->
    <data android:scheme="https" android:host="YOUR_APP_NAME.airbridge.io" />
</intent-filter>

b) Initialize SDK in MainApplication.kt

import co.ab180.airbridge.reactnative.AirbridgeReactNative

override fun onCreate() {
    super.onCreate()
    // Replace YOUR_APP_NAME and YOUR_APP_SDK_TOKEN with your actual values
    AirbridgeReactNative.initializeSDK(this, "YOUR_APP_NAME", "YOUR_APP_SDK_TOKEN")
}

c) Track Deep Links in MainActivity.kt

import android.content.Intent
import android.os.Bundle
import co.ab180.airbridge.reactnative.AirbridgeReactNative

override fun onResume() {
    super.onResume()
    AirbridgeReactNative.trackDeeplink(intent)
}

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

---

3.2 iOS Configuration

a) Associated Domains

To configure:

1. Open your project in Xcode.

2. Navigate to Target → Signing & Capabilities.

3. Add a new Associated Domains entry.

4. Add domain entries using the format:

   applinks:YOUR_APP_NAME.airbridge.io
   applinks:YOUR_APP_NAME.abr.ge

b) Initialize SDK in AppDelegate file

import AirbridgeReactNative

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Replace YOUR_APP_NAME and YOUR_APP_SDK_TOKEN with your actual values
    AirbridgeReactNative.initializeSDK(name: "YOUR_APP_NAME", token:"YOUR_APP_SDK_TOKEN")
    return true
}

c) Handle Deep Links

// Scheme deeplink
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    AirbridgeReactNative.trackDeeplink(url: url)
    return true
}

// Universal links
func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    AirbridgeReactNative.trackDeeplink(userActivity: userActivity)
    return true
}

---

4. Track Link Parameters in App

Place this code in the root file of your project. Fetch the required parameters and store them for later use in the Signup API. The two key parameters are:

• visitor_id: The unique ID of the referred visitor who clicked the referral link. This must be included in the Signup API to track and attribute the referral upon signup.

• referrer: The identifier of the original referrer. This is optional, as visitor_id alone is sufficient for tracking the referral.

import React, { useEffect, useState } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Airbridge } from 'airbridge-react-native-sdk';
import queryString from 'query-string';

function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    Airbridge.setOnDeeplinkReceived((url) => {
      // Parse URL params for visitor_id and referrer.
      const parsed = queryString.parseUrl(url);
      const visitorId = parsed.query.visitor_id;
      const referrer = parsed.query.referrer;
      
      // Save in AsyncStorage for later usage during signup
    });
    checkLoginStatus();
  }, []);

  const checkLoginStatus = async () => {
    try {
      const token = await AsyncStorage.getItem("loggedIn");
      // your login logic
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };

  if (isLoading) return null;

  return (
    // your navigation container or main view
  );
}

export default App;

You can now use the visitor_id and referrer from the link when calling ReferralHero APIs during user registration and start tracking referrals!

For that, you will need 2 things:

1. Universal Link

2. Your Integrated App

The RH SDK Pulls information from your Device, like this:

final referralParams = {
  'email': '[e-mail]', // Capture this from user
  'hosting_url': 'https://a.domain.co/', // Optional value, and set as default by admin
  'name': 'User Name', // Capture this from user
  'referrer': 'referrerCode', // Optional value, Get from the deep link as referral_code. only necessary if you want to capture the referrer code from user
  'uuid': 'MF*******', // Get this from RH Dashboard
  'device': getDeviceType(), // Get device type
  'os_type': getOperatingSystem(), // Get operating system type
  'visitor_id': sub_********, // Get this from the deep link params
  'status': 'custom_event_pending' //Use 'custom_event_pending' to set the referral status to pending
};