Back to main website
Docs

React Native SDK Integration

Suggest Edits

The minimal supported version of React Native is 0.60.0 or higher
The minimal supported iOS version is 11.0 or higher
The minimal supported Android API version is 21 or higher

🚧

If iOS Iovation plugin is used then the minimum supported iOS version is 12.0 or higher

1. Declare dependencies

Add dependency to your project in the package.json file:

"dependencies": {
    "@credolab/react-core": "X.Y.Z",
  
    "@credolab/react-android-account": "X.Y.Z",
    "@credolab/react-android-audio": "X.Y.Z",
    "@credolab/react-android-calendar": "X.Y.Z",
    "@credolab/react-android-contact": "X.Y.Z",
    "@credolab/react-android-images": "X.Y.Z",
    "@credolab/react-android-video": "X.Y.Z",
  
    // Please note that if the Core plugin (react-core) version 5.4.0 or higher is used, 
    // there is no need to include the Application plugin
    // "@credolab/react-android-application": "X.Y.Z",
    
    "@credolab/react-ios-calendar-events": "X.Y.Z",
    "@credolab/react-ios-calendar-reminders": "X.Y.Z",
    "@credolab/react-ios-contact": "X.Y.Z",
    "@credolab/react-ios-media": "X.Y.Z",
    "@credolab/react-ios-music": "X.Y.Z",
    
    "@credolab/react-behavioral": "X.Y.Z",
  
  }

⚠️

Note

Please replace X.Y.Z with module versions from React Native SDK page.
The final result should look like this:

	"@credolab/react-core": "X.Y.Z"

Add .npmrc file at the root level of the project with the path to the plugin repository

@credolab:registry=https://npm.cloudsmith.io/credolab/hybrid/

Open a terminal window on the root path of your project and execute:

npm install

Add repositories for Android

Open android/build.gradle file and add the repository according to your flow:

allprojects {
    repositories {
        // ...
        maven { url "https://dl.cloudsmith.io/$TOKEN/credolab/proxyen-sdk/maven/" }
    }
}

Add repositories for iOS

Add the Cocoapods repository to the beginning of the ios/Podfile file

source 'https://token:[email protected]/basic/credolab/proxyen-sdk/cocoapods/index.git'

📘

Unable to find a specification for library_name?

In certain cases you may see the error with similar title during pods installation.
To fix this, please add the following CocoaPods CDN to the Podfile

source 'https://cdn.cocoapods.org/'

Install Pods

Install pods by executing

pod install

2. Build and Use CredoAppService

In your React Native app code open the file where theCredoAppService planned to be used.

Add plugins import

import CredoAppService from '@credolab/react-core';
import AndroidCalendarModule from '@credolab/react-android-calendar';
import AndroidContactModule from '@credolab/react-android-contact';
import AndroidAccountModule from '@credolab/react-android-account';
import AndroidImagesModule from '@credolab/react-android-images';
import AndroidAudioModule from '@credolab/react-android-audio';
import AndroidVideoModule from '@credolab/react-android-video';
// Please note that if the Core plugin (react-core) version 5.4.0 or higher is used, 
// there is no need to include the Application plugin
// import AndroidApplicationModule from '@credolab/react-android-application';


import IosMusicModule from '@credolab/react-ios-music';
import IosCalendarEventsModule from '@credolab/react-ios-calendar-events';
import IosCalendarRemindersModule from '@credolab/react-ios-calendar-reminders';
import IosContactModule from '@credolab/react-ios-contact';
import IosMediaModule from '@credolab/react-ios-media';
import IosApplicationModule from '@credolab/react-ios-application';

import { BehavioralModule } from '@credolab/react-behavioral'

Build CredoAppService with required modules

// When using the BehavioralModule, you can invoke the startTracking method at any point, 
// even before the SDK is initialized. Call this method at the beginning of a certain user flow
BehavioralModule.startTracking()

var service = new CredoAppService()
await service.addModuleAsync(new AndroidCalendarModule())
await service.addModuleAsync(new AndroidContactModule())
await service.addModuleAsync(new AndroidAccountModule())
await service.addModuleAsync(new AndroidImagesModule())
await service.addModuleAsync(new AndroidAudioModule())
await service.addModuleAsync(new AndroidVideoModule())

await service.addModuleAsync(new IosMusicModule())
await service.addModuleAsync(new IosCalendarEventsModule())
await service.addModuleAsync(new IosCalendarRemindersModule())
await service.addModuleAsync(new IosMediaModule())
await service.addModuleAsync(new IosContactModule())
await service.addModuleAsync(new IosApplicationModule())

await service.addModuleAsync(new BehavioralModule())

// Stop the behavioral tracking to conserve resources or mark the end of a user flow
BehavioralModule.stopTracking()

📘

Note - Behavioral module

Please refer to BehavioralModule section for additional information about module integration.


🚧

To integarte CredoAppApplication module, the initial step involves adding URL Schemas into the Info.plist file within your iOS React Native project (maximum 50 schemas are allowed). To define the particular schemas, it's recommended to get in touch with Credolab team for precise specifications.

Below is a list of common app schemas along with a detailed guide on how to declare them in the Info.plist file.

🦉
iOS Default URL schemas - Application module
Open Recipe

Call collectAsync() method to start the data collection process

await service.collectAsync()

📘

Note

Relevant for Android only
Add functionality for requesting permissions before starting the data collection process in case there are used modules that require granting dangerous permissions. The detailed info about modules can be found here.

❗️

Behavioral data is cleared on collectAsync() method call

Once collectAsync() method is called BehavioralModule clears its data stored on user the device.

Thus, for data consistency, our strong recommendation is to call the method only once: at the end of the user flow.

3. Run an App

To run an app on an Android device:

react-native run-android

To run app on an iOS device:

react-native run-ios

4. Upload from an Mobile Device (Testing purposes only)

🚧

Direct Upload Note:

In a production environment, datasets should only be uploaded via your organization's proxy server.

For testing, integration, or generating insights, you may use the following code snippet:

🦉
Upload Dataset - React Native
Open Recipe

If you have any further questions, please do not hesitate to contact us.

Next Steps

After successfully integrating our SDK, it is recommended to proceed with the following steps to utilise our platform effectively:

  1. Setting up your Reverse Proxy
  2. Uploading your Dataset. Once the server is configured, you can upload your dataset using the server address.
  3. Collecting your Dataset Insight or TruValidate(formerly known as iovation) Fraud Check. With the dataset uploaded, you can now get insights or perform TruValidate Fraud Checks to assess risk based on the device and transaction details provided.

If you have any further questions, please do not hesitate to contact us.


Video Tutorials

Core Module Integration Tutorial

Optional Modules Integration Tutorial

Behavioral Module Integration Tutorial

Updated 2 months ago