React Native Sample App

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:

1. Install the Expo development client:

npx expo install expo-dev-client

2. Modify the scripts section in your package.json:

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

3. Install the Verisoul SDK:

npm install verisoul-reactnative

4. 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

1. Add the App Attest capability to your project

2. Update your entitlements file:

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

3. 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.