Part Two: React Native Wrappers for Adobe and Adobe Experience Platform

The official Adobe React Native Core (ACPCore) wrapper can be found here. This wrapper is a bridge module, meaning that once installed, it allows you to write Javascript for Adobe Experience Platform (AEP) functionality that could previously only be written in native code. With it, you can integrate the AEP SDK into React Native applications (almost) entirely through Javascript.

Since I am going to be tracking states and actions in my React code (covered in the next section), I am going to need the React Native Analytics wrapper as well. This library is needed by the ACPCore library to send data to Adobe Analytics correctly.

First, I need to install these packages. I can find the installation instructions on their respective Github pages.

• React Native ACPCore
• React Native ACPAnalytics

The instructions for each package are similar, and easy if you have worked with npm before. Since I already have an application, I can skip the part about initializing a new React Native app.

In the root directory of your app in the terminal, type the following and hit enter:

npm install @adobe/react-native-acpcore --save

This will add the Adobe React Native package to my Javascript dependencies in my package.json file. I also need to link this package to my app’s native dependencies (the iOS Podfile and Android build.gradle) by running:

react-native link @adobe/react-native-acpcore

Then repeat the process for the Analytics wrapper:

npm install @adobe/react-native-acpanalytics --save
react-native link @adobe/react-native-acpanalytics

You should receive messaging in the terminal that the packages were installed and linked correctly.

Podfile:

​​​​​​​pod 'RCTACPCore', :path => '../node_modules/@adobe/react-native-acpcore'
pod 'RCTACPAnalytics', :path => '../node_modules/@adobe/react-native-acpanalytics'

Build.gradle:

​​​​​​​dependencies {
    implementation project(':@adobe_react-native-acpanalytics')
    implementation project(':@adobe_react-native-acpcore')
   ...
}

And my Package.json npm dependency file:

"dependencies": {
    "@adobe/react-native-acpanalytics": "^1.1.3",
    "@adobe/react-native-acpcore": "^1.2.1",
    ....
}

iOS Installation

Back in the Launch installation instructions modal, you’ll notice that it says to add the following to the Podfile. These are the five extensions I have provisioned for Launch:

pod 'ACPGriffon', '~> 1.0'
pod 'ACPAnalytics', '~> 2.0'
pod 'ACPMobileServices', '~> 1.0'
pod 'ACPUserProfile', '~> 2.0'
pod 'ACPCore', '~> 2.0'

Since I am using the React Wrapper, I won’t need all of these. Specifically, I won’t need ACPCore, ACPUserProfile, and ACPAnalytics. Versions of those libraries will be provided by the React Wrappers. In fact, leaving them in the Podfile and installing the wrapper will cause a conflict when running pod install. That leaves me with the Griffon and Mobile Services extensions. I won’t be working with those, but I just left them in to illustrate the process of adding extensions that aren’t in the React library.

Installing Pods

Now it's time to install my pods (Remember that linking the react-native-acpcore and react-native-acpanalytics package added them as dependencies in the Podfile). Inside the iOS folder of my project (where my Podfile is), I run:

pod install

The terminal output will show a bunch of messages about things being installed and finally an output of: 

Pod installation complete! There are 56 dependencies from the Podfile and 54 total pods installed.

Note that your numbers may be different depending on your extensions. If you experience trouble installing Pods at this point, check the installation and troubleshooting guides in each of the wrapper’s Github pages.

AppDelegate.m

Next up is importing the libraries into the AppDelegate.m file and initializing the SDKs starting with React Native ACPCore. Although you can initialize these SDKs in Javascript, it is recommended (by Adobe) that you do so in native code.  

Inside the AppDelegate.m file I need to import the React Native libraries. If I were going to use the Griffon or Mobile Services extensions, I would need to import those libraries here as well.

// Adobe React Wrapper & Analytics
#import <RCTACPCore/ACPCore.h>
#import <RCTACPCore/ACPLifecycle.h>
#import <RCTACPCore/ACPIdentity.h>
#import <RCTACPCore/ACPSignal.h>
#import "ACPAnalytics.h"

Once these are in place, I would try building and running the app at this point to make sure everything is running okay. As long as there were no installation problems, everything should run as expected. You can run it out of Xcode or via the terminal with npm commands.

Back to my Launch instructions, I can utilize the second half of the AppDelegate.m instructions and paste the following in my application:didFinishLaunchingWithOptions instance method.

Note: For brevity, I am only covering the installation of a single development environment. To install staging and production environments, swap out the app ID with the corresponding environment. Also, depending on the environment, you may also want to disable debug logging entirely.

[ACPCore setLogLevel:ACPMobileLogLevelDebug];
[ACPCore configureWithAppId:@"launch-EN8e7238ddae154ec38b93572ecddfdb96-development"];

The first line sets my log level to debug so I can see messages in the JS console similar to a Launch web experience. More on that later. And the second snippet configures my Launch environment. Here it is a development environment (noted by the -development). This environment should only be placed in development levels of my app. The value for configureAppId here is the Environment ID for my Launch environment. You can switch out IDs here to switch environments.

Although the imports are different, the process registering them in my application:didFinishLaunchingWithOptions instance method is the same since the names of the libraries are the same. 

At this point, I have installed and initiated Launch/AEP SDK in my App and should see some output in the console from Adobe when I build and run the app. 

Launch debug output from the Xcode console:

Note: My Xcode project here is called rnEject4. I should see output messages about rule sets being downloaded from Launch, Lifecycle metrics events being queued and/or sent, etc. This console can get a bit noisy at times, you can filter it on the bottom right.

Android Installation

The Android instructions in Launch are the same story. Since I am using the React Wrapper I can use these as a guide, but some adjustments are necessary. The First being that I do not need to add to my Gradle file what has already been placed as a dependency by using npm link (As seen in the snippet a few paragraphs above in the React Native Wrappers section):

When I open my Android project in Android studio for the first time, it should sync the project’s dependencies with the Gradle file and download them. If it doesn’t, I can click this button in the top right. 

My Android dependencies are now installed and ready to use. To do so, I need to import them and initialize the SDK. 

MainApplication.java

Inside my MainApplication.java file, first I need to import the libraries:

import com.adobe.marketing.mobile.MobileCore;
import com.adobe.marketing.mobile.Identity;
import com.adobe.marketing.mobile.Lifecycle;
import com.adobe.marketing.mobile.Signal;
import com.adobe.marketing.mobile.WrapperType;
import com.adobe.marketing.mobile.Analytics;
import com.adobe.marketing.mobile.LoggingMode;

Notice that I am using a library called WrapperType that is not present in my Launch instructions. In my onCreate function, I will initialize the SDK.

Note: For brevity, I am only covering the installation of a single development environment. To install staging and production environments, swap out the app ID with the corresponding environment. Also, depending on the environment, you may also want to disable debug logging entirely.

I have now installed the AEP SDK into the native Android code of my React Native app. Once I rebuild the app I can start collecting data.

Next Steps

Head over to Part Three: Importing Adobe Experience Platform React Native Functionality into Javascript for next steps.