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 [e-mail]

---

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

1. 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 key

• 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_live_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>

1. AppDelegate.swift Setup add the following to your app's AppDelegate file:

Swift

import RNBranch

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    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
  }
}

Objective-C

---

🤖 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 Key -->
   <meta-data android:name="io.branch.sdk.BranchKey" android:value="key_live_XXX" />
   <!-- 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 Universal Link Domains -->
   <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>

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': '[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
};