Implementing User Invite with AppsFlyer in React Native: A Step-by-Step Guide

Integrating AppsFlyer's User Invite feature into your React Native application allows you to create and manage user referrals and deep linking effectively. This guide will walk you through the steps to set up and configure User Invite with AppsFlyer.

Step 1: Install the Package

First, you need to install the AppsFlyer React Native package. Run the following command in your project directory:

npm install react-native-appsflyer

Step 2: Log In to AppsFlyer

Before integrating the SDK, make sure you are logged in to the AppsFlyer dashboard: AppsFlyer Login

Step 3: Integrate AppsFlyer SDK

Now, let's integrate the AppsFlyer SDK into your application. Import the package and initialize the SDK with your credentials.

SDK Initialization Parameters
- devKey: Your application devKey provided by AppsFlyer (required).
- appId: App ID (iOS only) you configured in your AppsFlyer dashboard.
- isDebug: Debug mode - set to true for testing only.
- onInstallConversionDataListener: Set listener for GCD response (Optional. default=true).
- onDeepLinkListener: Set listener for UDL response (Optional. default=false).
- timeToWaitForATTUserAuthorization: Waits for request user authorization to access app-related data. Please read more

import appsFlyer from 'react-native-appsflyer';

appsFlyer.initSdk(
  {
    devKey: 'K2***********99',
    isDebug: false,
    appId: '41*****44',
    onInstallConversionDataListener: true, // Optional
    onDeepLinkListener: true, // Optional
    timeToWaitForATTUserAuthorization: 10 // for iOS 14.5
  },
  (result) => {
    console.log(result);
  },
  (error) => {
    console.error(error);
  }
);

If the initialization is successful, you will see a success message in the console.

Step 4: Setting Up User Invites

Configure Template ID
Before generating a link, set the template ID. This is necessary for UserInvite to work.

appsFlyer.setAppInviteOneLinkID('templateID', null);

Generate Invite Link
Set the user invite parameters and generate the invite link.

appsFlyer.generateInviteLink(
 {
   channel: 'gmail',
   campaign: 'myCampaign',
   customerID: '1234',
   userParams: {
     deep_link_value: 'value', // Deep link param
     deep_link_sub1: 'sub1', // Deep link param
     custom_param: 'custom',
     brandDomain: 'myexample.com'
   },
 },
 (link) => {
   console.log(link);
 },
 (err) => {
   console.log(err);
 }
);

Finding Template ID
You can find your template ID on the AppsFlyer dashboard:

1. Go to Engage -> OneLink Management
2. Your template ID will be at the top right corner.

Setting the Brand Domain
You can choose any domain based on your business requirements. For example, if you have a banking app, you could use yourBank.com.

Ensure that the domain you choose is hosted. These domains need to be added to both iOS and Android configurations.

Step 5: Configure Domains for iOS and Android

iOS Configuration
Add the domain in SignIn & Capabilities -> Associated Domains. Click on the + icon and add the domain link.

Android Configuration
Open your Android Manifest file and add the following code:

<intent-filter android:autoVerify="true" android:exported="false">
  <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="YourDomainName" />
</intent-filter>

Step 6: Handling the Invite Link in Your App

Once the invite link is generated, you need to handle it within your app. There are different scenarios to consider, such as when the app is in the background or in a killed state.

Handling the Link When the App is in the Background
Use the Linking API to listen for URL events.

import { Linking } from 'react-native';

Linking.addEventListener('url', (event) => {
  const url = event.url;
  // Handle the URL
  console.log('App is in the background. URL:', url);
});

Handling the Link When the App is in a Killed State
Use the Linking API to get the initial URL when the app is launched.

import { Linking } from 'react-native';

Linking.getInitialURL().then((responseUrl) => {
  if (responseUrl) {
    // Handle the URL
    console.log('App is in a killed state. URL:', responseUrl);
  }
});

For more information and detailed documentation, you can follow the AppsFlyer React Native plugin documentation: AppsFlyer React Native Plugin Documentation.

If everything is set up correctly, the invite link will be generated successfully.

By following these steps, you will have successfully integrated AppsFlyer's User Invite feature into your React Native application. This setup will help you manage user referrals and deep linking effectively, enhancing your app's user engagement and growth.