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>
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.
Responses are generated using AI and may contain mistakes.