React Native (Android/ iOS)
Step by step guide to help you with Leap React Native Library Integration
This guide will help you set up the Leap platform for Android/iOS devices. You can follow the steps below to integrate Leap SDK before using your dashboard to create in-app experiences.

Prerequisites

  • You will need the API key.
  • For React Native, you need to add tags to the views. Here is how you can do it.
  • Leap ReactNative SDK is incompatible with managed workflow. If you are using expo to start your react-native project, please make sure to eject to the bare workflow.
  • Android
    • The minimum API version support for Leap SDK is API 16. But Leap works only for API levels greater or equal to 21.
    • An Android 5.0 or newer device or emulator with Google Play services installed.
    • Leap ReactNative SDK only supports androidX so your project should be using react native version 0.61.0 and above.
  • iOS
    • Leap SDK's minimum deployment target is iOS 10. But Leap works only for devices running on iOS 11 and above
    • Leap currently doesn't support iPads; works only in iPhones.

SDK Installation

Note: Ensure that you complete both the steps in order to create and test the in-app experience in your integrated build.

Step 1. Integrate Leap SDK

1.a Add Leap AUI dependency

Download leap-react-native package from npm using the following command
Android
iOS
1
// Using npm
2
npm install leap-react-[email protected]1.2.6 --save
3
4
// Using yarn
5
yarn add leap-react-[email protected]1.2.6
Copied!
1
// Using npm
2
npm install leap-react-[email protected]1.2.6 --save
3
4
// Using yarn
5
yarn add leap-react-[email protected]1.2.6
6
7
cd ios && pod install
Copied!
For release notes check here

1.b Start Leap SDK

To start Leap add the following inside componentDidMount() {} in your App.js
Android
iOS
1
import LeapReactNative from 'leap-react-native';
2
3
export class App extends React.Component {
4
componentDidMount() {
5
Platform.select({
6
android: () => LeapReactNative.start('API_KEY')
7
})()
8
}
9
}
10
Copied!
1
import LeapReactNative from 'leap-react-native';
2
3
export class App extends React.Component {
4
componentDidMount() {
5
Platform.select({
6
ios: () => LeapReactNative.start('API_KEY')
7
})()
8
}
9
}
10
Copied!

Step 2. Enable 'Creator mode' in your app

To create in-app experiences in the Leap Studio, you will need to enable the 'Creator mode' in your app. This can be done by integrating the Leap Creator SDK.
2.a Add Dependencies
Note - The Leap Creator SDK must be removed before going live to PlayStore
Download leap-creator-react-native package from npm using the following command
Android
iOS
1
// Using npm
2
npm install leap-creator-react-[email protected]1.2.6 --save
3
4
// Using yarn
5
yarn add leap-creator-react-[email protected]1.2.6
Copied!
1
// Using npm
2
npm install leap-creator-react-[email protected]1.2.6 --save
3
4
// Using yarn
5
yarn add leap-creator-react-[email protected]1.2.6
6
7
cd ios && pod install
Copied!
2.b Start Leap Creator SDK
To start Leap creator add the following inside componentDidMount() {} in your App.js
Android
iOS
1
import LeapCreatorReactNative from 'leap-creator-react-native';
2
3
export class App extends React.Component {
4
componentDidMount() {
5
Platform.select({
6
android: () => LeapCreatorReactNative.start('API_KEY')
7
})()
8
}
9
}
10
Copied!
1
import LeapCreatorReactNative from 'leap-creator-react-native';
2
3
export class App extends React.Component {
4
componentDidMount() {
5
Platform.select({
6
ios: () => LeapCreatorReactNative.start('API_KEY'),
7
})()
8
}
9
}
10
Copied!