React Native

This article is your first step to activating the Leanplum React Native SDK. Once completed, you will have access to all the goodness Leanplum provides.

Our ReactNative SDK wraps around the native iOS and Android SDKs. This setup allows us to provide feature parity on both the iOS and Android platforms while allowing the Leanplum functionalities through our TypeScript interface.

Follow the steps below for a quick setup.

STEP 1: Read Setup Intro

The Leanplum ReactNative SDK includes the minimum dependencies needed for the core of Leanplum functionality. Within each ReactNative SDK version you will also see included specific iOS and Android SDK versions which support the core of those functionalities.

For example, we do not include any push notifications dependencies or packages, by default.
Refer to the Push Notifications setup for ReactNative if you want to enable notifications or you can see more on dependencies below.

Additionally, Leanplum Variables can be configured directly from your ReactNative app. For more visit the Variables documentation for details.

You can find more on the functionality and versions in Github where we note then on our Releases page.

STEP 2: Install the SDK

To install the Leanplum React Native SDK, there are two main options, NPM and linking to a native depency.

Note that if you are installing Leanplum React Native SDK 2.0.0 or above, you need to also install the CleverTap React Native SDK (clevertap-react-native). No additional configuration is needed unless preparing for migration.

A. Using NPM

The Leanplum React Native SDK is available as an NPM package. To use NPM,
run the below command in your project to add

npm install @leanplum/react-native-sdk
// if using Leanplum React Native SDK 2.0.0, install also CT SDK
npm install clevertap-react-native

iOS
Run the following commands:

cd ios && pod install

B. Linking to native dependency

Generally if you are using ReactNative version 0.60 or greater, you can take advantage of autolinking. Below you will find how to implement React Native in both Android and iOS projects.

On older version, linking has to be done manually by executing:

npx react-native link @leanplum/react-native-sdk
cd ios && pod install

Additional Android setup

Generally with an Android setup, gradle will take care of all dependencies. However, in your generated Android MainApplication.java file, you will need to add additional code to properly setup Leanplum SDK. See that below.

import com.leanplum.Leanplum;
import com.leanplum.LeanplumActivityHelper;
...

public class MainApplication extends Application implements ReactApplication {
...
  
    @Override
    public void onCreate() {
        super.onCreate();
				...
        Leanplum.setApplicationContext(this);
        Parser.parseVariables(this);
        //  For session lifecyle tracking.
        LeanplumActivityHelper.enableLifecycleCallbacks(this);
    }
...
}

STEP 3: Initialize Leanplum

You can quickly add the below source code to your project to initialize Leanplum.

For an example project, you can check our internal testing app integrating the Leanplum ReactNative SDK here.

// This value should be set to true only if you're developing on your server.
const isDevelopmentMode = true;

// Sample variables. This can be any JSON object.
const variables = {
  items: {
    color: "red",
    size: 20,
    showBadges: true
  },
  showAds: true
};

// Get your App ID and Keys from https://www.leanplum.com/dashboard?#/account/apps
if (isDevelopmentMode) {
  Leanplum.setAppIdForDevelopmentMode("YOUR_APP_ID", "YOUR_DEVELOPMENT_KEY");
} else {
  Leanplum.setAppIdForProductionMode("YOUR_APP_ID", "YOUR_PRODUCTION_KEY");
}

Leanplum.setVariables(variables);
Leanplum.start();

Additionally, see the below for examples to adding events, states and additional calls available in the ReactNative SDK.

Track Events

Leanplum.track(EVENT)
Leanplum.track(EVENT, {[PARAMETER_KEY]: PARAMETER_VALUE})
// Example
Leanplum.track("Purchase", 4.99, {itemCategory: 'Apparel', itemName: 'Shoes'});

Track States

Leanplum.advanceTo(STATE, INFO, { [PARAMETER_KEY]: PARAMETER_VALUE });
// Example
Leanplum.advanceTo("Cart");

// The 'null' state. Causes the user to leave the current state and not enter another one.
Leanplum.advanceTo(null);

Leanplum.pauseState();

Leanplum.resumeState();

Additional React Native SDK settings

//Enables development mode, and sets the app ID and client key.
Leanplum.setAppIdForDevelopmentMode(YOUR_APP_ID, YOUR_DEVELOPMENT_KEY);

//Enables production mode, and sets the app ID and client key.
Leanplum.setAppIdForProductionMode(YOUR_APP_ID, YOUR_PRODUCTION_KEY);

//Sets a custom device ID. If this is not called, Leanplum will assign a device ID automatically.	
Leanplum.setDeviceId(DEVICE_ID)

STEP 4: Run Your Build

Build and run your app and see data start flowing into Leanplum. With your development key in your app delegate, you will be able to see all data flowing into Leanplum in our debugger. You can access our debugger dashboard at https://leanplum.com/dashboard#/help/debug

STEP 5: Register Your Test Device

Registering your device as a test device will allow you to preview your messages, variable changes, and any other Leanplum projects. Follow the below to register

Visit https://leanplum.com/dashboard#/account/devices and click on "Register test device" to register your device

STEP 6: Complete Your Integration (NEXT STEPS)

Success! You have now successfully installed the Leanplum ReactNative SDK and registered a test device for further testing. This is an exciting first step on the journey to full integration with Leanplum.

To complete your integration with Leanplum, check out the below articles to learn more about your user data, tracking with Leanplum, variables, importing data and setting up messages.

Articles to Visit Next

Collecting User Data
Event Tracking
State Tracking
Variables
Importing Data
Setting Up Push Notifications
Build Custom In-App Messages

Example Project

Make sure to check our internal testing app integrating the Leanplum ReactNative SDK here