Introduction

Appgain.io React Native SDK Setup Guide. Works with iOS, Android, and derivatives like Amazon.

Required For Setup

Generate Credentials

Before setting up the React Native SDK, you must generate the appropriate credentials for the platform(s) you are releasing on:

Installation

  • Add Appgain.io

at the root dir of you react native project , run this

$ npm install react-native-appgain-sdk-library --save

  • Link Appgain.io

$ react-native link react-native-appgain-sdk-library

  • you can download test project from this repo

iOS install instructions

If you're already using Cocoapods, add the following to your Podfile

pod 'react-native-appgain-sdk', path: '../node_modules/react-native-appgain-sdk-library'


Otherwise, setup Podfile according to react native documentation, so the Podfile will look like this:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '10.0'

target 'YourTargetName' do
    pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'CxxBridge', # Include this for RN >= 0.47
        'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket', # Needed for debugging
        'RCTAnimation', # Needed for FlatList and animations running on native UI thread
        ]
    # Explicitly include Yoga if you are using RN >= 0.42.0
    pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
    pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
#our pod
    pod 'react-native-appgain-sdk', path: '../node_modules/react-native-appgain-sdk-library'

end

Remember to replace YourTargetName with your actual target name.

  • Next, run

$ cd ios

$ pod install

Android Specific Instructions

  • At the very top of your Android project's app/build.gradle, add the following code to the very top of the file:
    implementation 'androidx.multidex:multidex:2.0.1'
    implementation 'io.appgain:sdk:4.1.12'
    implementation 'com.google.firebase:firebase-messaging:20.1.0'
    implementation "androidx.lifecycle:lifecycle-runtime:2.2.0"
    implementation "androidx.lifecycle:lifecycle-process:2.2.0"
    implementation 'com.google.android.gms:play-services-location:17.0.0'
  • also make sure that multiDex is enabled:
    android{
        multiDexEnabled = true
    }
  • and in the end of your file add the following line
   apply plugin: 'com.google.gms.google-services'
  • open your project/build.gradle file and add following line under dependencies
 dependencies {  
    classpath 'com.google.gms:google-services:4.2.0'  
 }

Push Notification setup

  • Open Firebase console, Go to project settings

    firbase project settings

  • Go to Cloud Messaging tab and copy SenderID and Legacy server key

cloud settings

  • Open appgain dashboard
  • Go to APP BACKEND > Settings
  • Navigate to Android push tab
  • enter your SenderID and Server key Appgain Android Push settings

  • create a new class that extends from AppgainPushReceiver class

public class PushReceiver extends AppgainPushReceiver {

    @Override
    public void onReceive(Context context, Intent intent) {
        super.onReceive(context, intent);
    }

    @Override
    protected void onReceive(Context context, ReceiveStatus receiveStatus, Intent intent) {

    }

    @Override
    protected void onSilentPushReceive(@NonNull String operation) {
        super.onSilentPushReceive(operation);
    }
}
  • open manifest.xml file and add the following lines:
    <receiver
            android:name=".PushReceiver"
            android:exported="false">
            <intent-filter>
                <action android:name="com.parse.push.intent.RECEIVE" />
                <action android:name="com.parse.push.intent.DELETE" />
                <action android:name="com.parse.push.intent.OPEN" />
            </intent-filter>
        </receiver>


        <service
            android:name="io.appgain.sdk.controller.AppgainMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
            </intent-filter>
        </service>
  • in your android application class, implement LifecycleObserver interface and add the follwing lines
public class MainApplication extends Application implements ReactApplication, LifecycleObserver {
    @Override
    public void onCreate() {
        // onCreate method body
        super.onCreate();
        SoLoader.init(this, false);
        initializeFlipper(this);
        // ...
        // add this line of code    
        ProcessLifecycleOwner.get().getLifecycle().addObserver(this);
    }

    // also add the following two methods
    @OnLifecycleEvent(Lifecycle.Event.ON_STOP)
    void onAppBackgrounded() {
        //App in background
        Appgain.onAppBackgrounded();
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_START)
    void onAppForegrounded() {
        // App in foreground
        Appgain.onAppForegrounded();
    }
}

Initializing

To initialize appgain SDK, call the following method on app start

async () => {
    try {
        await AppgainSDK.initSDK(
            "projectId",
            "apiKey",
            true
        );
    } catch (error) {
        console.log("Error: ", error);
    }
}

Updating user profile data

    try {
        let userData = {
            // user data
        };
        await AppgainSDK.updateUserData(userData);
    } catch (error) {
        console.log("Error: ", error);
    }

Deferred Deep Linking

After a new user has installed your app, our SDK will detect if the app was installed from a smart deep link or not, if it's then our SDK will automatically route their flow to marketing campaign desired location in the app (not just to the default home screen).

To achieve that, appgain.io SDK must be installed in the app, and the matching process must be initiated

async () => {
  try {
                let  result  = await AppgainSDK.matchLink()
                Alert.alert("response  " + result);

              } catch (error) {
                console.log("Error: ", error);
                Alert.alert("Error: ", error);
              }
}

The following data are returned on matching success in the response object :

Returned Field Description
smart_link_url the URL of smart deep link used to open or install the App
smart_link_id the Id of smart deep link used to open or install the App
smart_link_name the Id of smart deep link used to open or install the App
match_type how the device identification done , it could be basic(Digital fingerprinting) or advertising_id
extra_data array of more data
extra_data.userId user Id that was appended to smart link url on opening it phase
params array of all paramaters appended to smart link url , like SDL URL?utm_source=fb
smart_link_primary primary redirection action

Marketing Automation

async () => {
    try {
        await AppgainSDK.fireAutomator({triggerPointName: "triggerPoint", payload: {key: "value"}});
    } catch (error) {
        console.log("Error: ", error);
    }
}

Notification Channels

async () => {
    try {
        await AppgainSDK.addNotificationChannel(
            type,  // 'email' or 'sms'
            item // user email or phone number
        );
    } catch (error) {
        console.log("Error: ", error);
    }
}

Revenue Tracking

async () => {
    try {
        await AppgainSDK.addPurchase(productName, amount, currency);
    } catch (error) {
        console.log("Error: ", error);
    }
}

App Events Logging

whenever you want to log user event , add below code

async () => {
    var type = "type";
    var action = "action";
    var extras = {key: "value"};
    try {
        await AppgainSDK.logEvent(type, action, extras);
    } catch (error) {
        console.log("Error: ", error);
    }
}