- 16 Sep 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Integrate Whatfix Mobile SDK with React Native Android
- Updated On 16 Sep 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
To create Whatfix Mobile in-app experiences on your React Native apps, you need to first set up Whatfix Mobile. You can add the Whatfix Mobile SDK provided for React Native apps to the source code of your app and then create and publish content.
Prerequisites
- API Key
- Add tags to views. For more information, see tag views.
- Whatfix Mobile React Native SDK is incompatible with managed workflow. If you are using expo to start your react-native project, make sure to eject to the bare workflow.
- The minimum API version support for Whatfix Mobile SDK is API 16. Also, the SDK works only for API levels greater than or equal to 21.
- An Android 5.0 or newer device or emulator with Google Play services installed.
- Whatfix Mobile React Native SDK supports only androidX so your project should use a React Native version of 0.61.0 and above.
Integration steps for React Native Android app
Use the following steps to integrate the Whatfix Mobile SDK with your React Native Android project:
Ensure that you complete both the steps, to create and test the in-app experience in your integrated build.
Step 1: Integrate Whatfix Mobile SDK
a. Add the Whatfix Mobile SDK dependency
Download the leap-react-native package from npm using the following command:
// Using npm
npm install leap-react-native@2.0.1--save
// Using yarn
yarn add leap-react-native@2.0.1
For more information on the latest version of the React Native project, see React Native Changelog.
b. Start the Whatfix Mobile SDK
To start Whatfix Mobile, add the following code inside componentDidMount() {} in your App.js file.
import LeapReactNative from 'leap-react-native';
export class App extends React.Component {
componentDidMount() {
Platform.select({
android: () => LeapReactNative.start('API_KEY')
})()
}
}
Step 2: Enable Creator mode in your app
To create in-app experiences in the Whatfix Mobile Studio, you have to enable the Creator mode in your app. This is done by integrating the Whatfix Mobile Creator SDK.
a. Add dependencies
- The Whatfix Mobile Creator SDK must be removed before the app goes live on the Play Store.
- While both Whatfix Mobile Creator SDK and Whatfix Mobile SDK need to be integrated in the development and testing versions, the production version should only have the Whatfix Mobile SDK.
Download the leap-creator-react-native package from npm using the following command:
// Using npm
npm install leap-creator-react-native@2.0.1 --save
// Using yarn
yarn add leap-creator-react-native@2.0.1
For more information on the latest version of the React Native project, see React Native Changelog.
b. Start the Whatfix Mobile Creator SDK
To start the Whatfix Mobile Creator, add the following code inside componentDidMount() {} in your App.js file.
import LeapCreatorReactNative from 'leap-creator-react-native';
export class App extends React.Component {
componentDidMount() {
Platform.select({
android: () => LeapCreatorReactNative.start('API_KEY')
})()
}
}
Proguard Rules
If you are using Proguard for your builds, use the following rules in your proguard-rules.pro file,
-dontwarn is.leap.android.**
-keep class is.leap.android.** {*;}
If you are using Android Gradle Plugin (AGP) version 8.0 or newer, it may be necessary to include specific OkHttp rules in your proguard-rules.pro file. This step is crucial to ensure the proper execution of release builds, as the LeapCreator SDK relies on the OkHttp library. The required rules are as following:
#For Okhttp
-dontwarn okhttp3.internal.platform.**
-dontwarn org.conscrypt.**
-dontwarn org.bouncycastle.**
-dontwarn org.openjsse.**
For more information, see Okhttp R8 / ProGuard.
After integrating the code, you can start creating your in-app experience using Whatfix Mobile.