React Native Sample App

Complete reference implementation demonstrating Verisoul integration in a React Native application

This guide will help you set up and run the React Native Sample App, which demonstrates how to integrate Verisoul into a React Native application.

About the Sample App

The Verisoul React Native SDK is a demonstration project that showcases Verisoul’s fake user detection technology in a React Native environment. The app includes:

Complete integration of Verisoul’s React Native SDK
Touch event tracking for fraud detection
Platform-specific configurations for Android and iOS

Prerequisites

Before you begin, you’ll need:

Node.js and npm installed on your system
React Native development environment set up
For Android: Android Studio and Android SDK
For iOS: Xcode and CocoaPods
A Verisoul Project ID (obtain this by scheduling a call)

Installation Steps

1. Add the Dependency

Choose one of the following methods to add the Verisoul SDK to your project: Using NPM:

npm install verisoul-reactnative

Using Yarn:

yarn add verisoul-reactnative

2. EXPO Configuration

The Verisoul SDK is not supported in Expo Go. If you’re using Expo’s managed workflow, follow these steps:

Install the Expo development client:

npx expo install expo-dev-client

Modify the scripts section in your package.json:

"scripts": {
  "start": "expo start --dev-client",
  "android": "expo run:android",
  "ios": "expo run:ios",
  ...
}

Install the Verisoul SDK:

npm install verisoul-reactnative

If you encounter download issues with the ai.verisoul:android package, add this Maven repository to your android/build.gradle file:

allprojects {
    repositories {
        // ...
        maven { url = uri("https://us-central1-maven.pkg.dev/verisoul/android") }
    }
}

3. Implementation

Initialize the SDK

In your app’s main component:

import Verisoul, {
  MotionAction,
  VerisoulEnvironment,
} from '@verisoul_ai/react-native-verisoul';

useEffect(() => {
  Verisoul.configure({
    environment: VerisoulEnvironment.dev,
    projectId: 'YOUR_PROJECT_ID',
  });
}, []);

Get Session ID

Get the session ID after initialization:

const sessionData = await Verisoul.getSessionID();

Implement Touch Tracking

Wrap your app with the touch tracking component:

<VerisoulTouchRootView>
  {/* Your app components */}
</VerisoulTouchRootView>

4. Platform-Specific Setup

Android Setup

Modify your MainActivity.kt file to track touch events:

import ai.verisoul.sdk.Verisoul
import android.view.MotionEvent

class MainActivity : ReactActivity() {
  override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
    Verisoul.onTouchEvent(event)
    return super.dispatchTouchEvent(event)
  }
  // Other code...
}

iOS Setup

Add the App Attest capability to your project
Update your entitlements file:

<key>com.apple.developer.devicecheck.appattest-environment</key>
<string>production</string> <!-- or development -->

Add the privacy manifest file (PrivacyInfo.xcprivacy) to your project

What to Expect

Once integrated, the Verisoul SDK will:

Monitor touch events and device motion
Gather necessary data to detect automation and fraud
Generate a session ID for risk assessment through Verisoul’s API
Provide fraud prevention for your React Native application

Next Steps

After exploring the sample app, you can use it as a reference for implementing Verisoul in your own React Native applications. For more detailed documentation, see the Verisoul Integration Guide.

Apps

Verifications

React Native Sample App