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. Branch Key & Domains:

    If you already have a Branch 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:

    • branch_key

    • branch_universal_link_domains

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

2. Install Dependencies

  • Using NPM

    npm install axios
npm install react-native-branch

  • Using yarn

    yarn add axios
yarn add react-native-branch

3. Configure App

📱 iOS Configuration

  1. Associated Domains

    To configure:

    1. Open your project in Xcode.

    2. Navigate to Target → Signing & Capabilities.

    3. Add a new Associated Domains entry.

    4. For each domain, add an entry in the following format:

      applinks:your-subdomain-1.app.link
applinks:your-subdomain-2-alternate.app.link

      If you've received your branch_universal_link_domains from us (as noted in Step 1), add each domain listed using the applinks: prefix. ✅ Example: If branch_universal_link_domains =

      ["referralhero.app.link", "referralhero-alternate.app.link"]

      Then in Associated Domains, you would add:

      applinks:referralhero.app.link
applinks:referralhero-alternate.app.link

  2. Info.plist Configuration Referralhero requires specific key/value pairs to be added to your project's Info.plist file:

    • branch_universal_link_domains: Specifies the associated domains your app will support for universal links.

    • branch_key: Your Branch live key (you can also include a test key for development purposes).

    • CFBundleURLTypes: Defines your app’s URL schemes and identifiers, allowing ReferralHero to correctly handle app openings via universal links.

    Add the following to your Info.plist:

    <key>branch_key</key>
<string>key_test_kyqc*****************</string>

<key>branch_universal_link_domains</key>
<array>
  <string>abcd.test-app.link</string>
  <string>abcd-alternate.test-app.link</string>
</array>

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>app_name</string>
    </array>
  </dict>
</array>

  3. AppDelegate.swift Setup In your AppDelegate.swift, add:

    import RNBranch

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Optional: Uncomment next line to use test instead of live key
    // RNBranch.useTestInstance()
    RNBranch.initSession(launchOptions: launchOptions)

    return true
  }

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

  func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
    RNBranch.continue(userActivity)
    return true
  }
}

🤖 Android Configuration

  1. AndroidManifest.xml Add the following inside the <application> tag:

    <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="com.google.android.gms.permission.AD_ID" />
<!-- Branch SDK Keys -->
<meta-data android:name="io.branch.sdk.BranchKey" android:value="key_live_XXX" />
<meta-data android:name="io.branch.sdk.BranchKey.test" android:value="key_test_XXX" />
<meta-data android:name="io.branch.sdk.TestMode" android:value="true" />
<!-- Custom URI scheme (optional) -->
<intent-filter>
    <data android:scheme="your.scheme" android:host="open" />
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
</intent-filter>
<!-- Branch App Links - Live -->
<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:scheme="https" android:host="example.app.link" />
    <data android:scheme="https" android:host="example-alternate.app.link" />
</intent-filter>
<!-- Branch App Links - Test -->
<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:scheme="https" android:host="example.test-app.link" />
    <data android:scheme="https" android:host="example-alternate.test-app.link" />
</intent-filter>

  2. MainActivity.kt

    import io.branch.rnbranch.*
import android.content.Intent
// ...
override fun onStart() {
    super.onStart()
    RNBranchModule.initSession(getIntent().getData(), this)
}
override fun onNewIntent(intent: Intent?) {
    super.onNewIntent(intent)
    setIntent(intent)
    RNBranchModule.reInitSession(this)
}

  3. MainApplication.kt

    import io.branch.rnbranch.*
// ...
override fun onCreate() {
    super.onCreate()
    RNBranchModule.getAutoInstance(this)
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
        // If you opted-in for the New Architecture, we load the native entry point for this app
        load()
    }
    // Enable logging for debugging (remove in production)
    RNBranchModule.enableLogging();
    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
}

4. Track Link Parameters in App

Add the following in your app’s entry point (e.g., App.js):

import React, { useEffect, useState } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import branch from 'react-native-branch';

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

  useEffect(() => {
    const unsubscribe = branch.subscribe(({ error, params }) => {
      if (error) {
        console.error('Branch error:', error);
        return;
      }

      if (params['+clicked_branch_link']) {
        const visitorId = params['visitor_id'];
        const referralCode = params['referral_code'];

        if (visitorId) {
          AsyncStorage.setItem("visitor_id", visitorId);
        }
        if (referralCode) {
          AsyncStorage.setItem("referral_code", referralCode);
        }
      }
    });

    checkLoginStatus();
    return () => unsubscribe();
  }, []);

  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 referral_code 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': '[email protected]', // 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': 'MFcd4113d4bf', // 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
};
PreviousReact NativeNextHow to call API?

Last updated

Was this helpful?