> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Quickstart

> Get started using the React Native SDK

## Overview

In this quickstart, you'll add Fingerprint to a new React Native project and identify the user's device.

The example use case in this quickstart is stopping new account fraud, where attackers create multiple fake accounts to abuse promotions, exploit systems, or evade bans. However, the steps you'll follow apply to most use cases. By identifying the device behind each sign-up attempt, login, or transaction, you can flag and block suspicious users early.

This guide focuses on the frontend mobile integration. You'll install the [Fingerprint React Native SDK](/docs/fingerprintjs-pro-react-native) and initialize the client agent to generate a request ID to send to your backend for analysis. **To see how to implement fraud prevention with this ID, continue to one of the [backend quickstarts](/docs/server-quickstarts-overview) after completing this quickstart.**

> Estimated time: \< 10 minutes

## Prerequisites

Before you begin, make sure you have the following:

* [Node.js](https://nodejs.org/) (v16 or later) and npm installed
* [React Native development environment](https://reactnative.dev/docs/set-up-your-environment) set up (Expo not yet supported)
* Android 5.0 (API level 21+) or higher
* iOS 13+/tvOS 15+, Swift 5.7 or higher (stable releases)
* [Xcode 15.0](https://developer.apple.com/xcode/) or higher
* Your favorite code editor
* Basic knowledge of [React Native](https://reactnative.dev/) and JavaScript

<Note>
  This quickstart only covers the **frontend setup**. You'll need a [backend
  server](/reference/server-sdks) to receive and process the device identification event to enable
  fraud detection. Check out one of the [backend quickstarts](/docs/server-quickstarts-overview)
  after completing this quickstart.
</Note>

## 1. Create a Fingerprint account and get your API key

1. [Sign up](https://dashboard.fingerprint.com/signup) for a free Fingerprint trial if you don't already have an account.
2. After signing in, go to the [**API keys**](https://dashboard.fingerprint.com/api-keys) page in the dashboard.
3. Copy your **public API key**; you'll need it to initialize the client agent.

## 2. Set up your project

To get started, create a new React Native project. If you already have a project you want to use, you can skip to the next section.

1. Create a new React Native project using the CLI:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx @react-native-community/cli init FingerprintQuickstart
cd FingerprintQuickstart
```

2. Install the project dependencies:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npm install
```

3. Test that your project runs correctly, run:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx react-native start
```

And then in another terminal, for iOS run:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx react-native run-ios
```

or, for Android:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx react-native run-android
```

You should see the default React Native welcome screen on your simulator or device. If you have trouble running your app, make sure your [development environment is properly set up](https://reactnative.dev/docs/set-up-your-environment) and if using an emulator that it is turned on.

## 3. Install the client agent

To integrate Fingerprint into your React Native app, first add the Fingerprint React Native SDK to your project.

1. Install the Fingerprint React Native SDK:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npm install @fingerprintjs/fingerprintjs-pro-react-native --save
```

2. Install iOS dependencies using [CocoaPods](https://cocoapods.org/):

```bash Terminal theme={"theme":"github-dark-dimmed"}
cd ios && pod install && cd ..
```

3. Add the Fingerprint Maven repository to your Android configuration. Open `android/settings.gradle` and add the repository to the `dependencyResolutionManagement` block:

```groovy android/settings.gradle theme={"theme":"github-dark-dimmed"}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        google()
        mavenCentral()
        maven {
            url("https://maven.fpregistry.io/releases")
        }
    }
}
```

If you're using Gradle 6.0 or older, modify `android/build.gradle` instead:

```groovy android/build.gradle theme={"theme":"github-dark-dimmed"}
allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url("https://maven.fpregistry.io/releases")
        }
    }
}
```

## 4. Initialize the SDK

Now that the SDK is installed, you can import and initialize it in your app.

1. Open `App.tsx` and replace the entire file with the following code to set up the Fingerprint provider and basic UI structure:

```tsx App.tsx theme={"theme":"github-dark-dimmed"}
import React from "react";
import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from "react-native";
import { FingerprintJsProProvider } from "@fingerprintjs/fingerprintjs-pro-react-native";
import CreateAccountScreen from "./CreateAccountScreen.tsx";

function App() {
  return (
    <FingerprintJsProProvider apiKey="PUBLIC_API_KEY" region="us">
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" />
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <CreateAccountScreen />
        </ScrollView>
      </SafeAreaView>
    </FingerprintJsProProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

export default App;
```

2. Replace `PUBLIC_API_KEY` with your actual public API key from the Fingerprint [dashboard](https://dashboard.fingerprint.com/api-keys). Note: For production, consider using [React Native Config](https://github.com/luggit/react-native-config) or environment variables to securely store your API key.

## 5. Create the account creation screen

Now you'll create a simple account creation form that will trigger device identification when the user submits it.

1. Create a new file called `CreateAccountScreen.jsx` in your project root with the following content:

```tsx CreateAccountScreen.tsx theme={"theme":"github-dark-dimmed"}
import React, { useState } from "react";
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from "react-native";
import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react-native";

const CreateAccountScreen = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const { isLoading, error, getData } = useVisitorData();

  const handleSubmit = async () => {
    if (!username.trim() || !password.trim()) {
      Alert.alert("Error", "Please fill in all fields");
      return;
    }

    try {
      const visitorData = await getData();
      const { visitorId, requestId } = visitorData;

      console.log("Visitor ID:", visitorId);
      console.log("Request ID:", requestId);

      Alert.alert("Account Created!", `Request ID: ${requestId}\nCheck console for details.`, [
        { text: "OK" },
      ]);
    } catch (err) {
      console.error("Fingerprint error:", err);
      Alert.alert("Error", "Failed to identify device");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Create Account</Text>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Username</Text>
        <TextInput
          style={styles.input}
          value={username}
          onChangeText={setUsername}
          placeholder="Enter username"
          autoCapitalize="none"
          autoCorrect={false}
        />
      </View>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Password</Text>
        <TextInput
          style={styles.input}
          value={password}
          onChangeText={setPassword}
          placeholder="Enter password"
          secureTextEntry
          autoCapitalize="none"
          autoCorrect={false}
        />
      </View>

      <TouchableOpacity
        style={[styles.button, isLoading && styles.buttonDisabled]}
        onPress={handleSubmit}
        disabled={isLoading}
      >
        <Text style={styles.buttonText}>
          {isLoading ? "Creating Account..." : "Create Account"}
        </Text>
      </TouchableOpacity>

      {error && <Text style={styles.errorText}>Error: {error.message}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: "center",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#F35B22",
    textAlign: "center",
    marginBottom: 30,
  },
  inputContainer: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "500",
    marginBottom: 8,
    color: "#333",
  },
  input: {
    borderWidth: 1,
    borderColor: "#F35B22",
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  button: {
    backgroundColor: "#F35B22",
    padding: 15,
    borderRadius: 8,
    marginTop: 20,
  },
  buttonDisabled: {
    opacity: 0.6,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
  },
  errorText: {
    color: "red",
    textAlign: "center",
    marginTop: 10,
  },
});

export default CreateAccountScreen;
```

## 6. Trigger visitor identification

The code you just added uses Fingerprint's `useVisitorData` hook to identify the visitor when they submit the form. Let's break down the key parts:

1. Import the hook

```tsx CreateAccountScreen.tsx theme={"theme":"github-dark-dimmed"}
import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react-native";
```

2. Initialize the hook

```tsx CreateAccountScreen.tsx theme={"theme":"github-dark-dimmed"}
const { isLoading, error, getData } = useVisitorData();
```

This gives you:

* `getData()`: A function to trigger visitor identification on demand
* `isLoading`: A flag to monitor identification progress
* `error`: Any errors that occur during identification

3. Trigger identification on form submit

```tsx CreateAccountScreen.tsx theme={"theme":"github-dark-dimmed"}
const handleSubmit = async () => {
  try {
    const visitorData = await getData();
    const { visitorId, requestId } = visitorData;

    console.log("Visitor ID:", visitorId);
    console.log("Request ID:", requestId);

    // const response = await fetch("https://your-api.com/create-account", {
    //   method: "POST",
    //   headers: {
    //     "Content-Type": "application/json",
    //   },
    //   body: JSON.stringify({
    //     username,
    //     password,
    //     requestId,
    //   }),
    // });
  } catch (err) {
    console.error("Fingerprint error:", err);
  }
};
```

When making the visitor identification request, you will receive the `visitorId` as well as a `requestId`. Instead of using the `visitorId` returned directly on the frontend (which could be tampered with), you'll send the `requestId` to your backend. This ID is unique to each identification event. Your server can then use the [Fingerprint Events API](/reference/server-api-get-event) to retrieve complete identification data, including the trusted visitor ID and other actionable insights like whether they are using a VPN or are a bot.

## 7. Run and test the app

1. Start your development server and build your app:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx react-native start
```

For iOS:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx react-native run-ios
```

For Android:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npx react-native run-android
```

2. In your app, enter a username and password, then tap **Create Account**.
3. You should see an alert showing the request ID, and in your development console (Metro bundler terminal), you should see output similar to:

```text Output theme={"theme":"github-dark-dimmed"}
Visitor ID: JkLmNoPqRsTuVwXyZaBc
Request ID: 1234566477745.abc1GS
```

4. If you're using a physical device, you can also use remote debugging tools like [Flipper](https://fbflipper.com/) or React Native Debugger to view console logs.

You're now successfully identifying the device and capturing the request ID, ready to send it to your backend for further fraud prevention logic!

## Next steps

To use the identification data for fraud detection (like blocking repeat fake account creation attempts), you'll need to send the `requestId` to your [backend](/docs/server-quickstarts-overview). From there, your server can call the [Fingerprint Events API](/reference/server-api-get-event) to retrieve the full visitor information and make decisions.

Check out these related resources:

* [React Native SDK reference](https://github.com/fingerprintjs/fingerprintjs-pro-react-native)
* [Node.js backend quickstart](/docs/node-server-quickstart)
* [API reference for the Events endpoint](/reference/server-api-get-event)
* [Use case tutorial: Detecting new account fraud](/docs/new-account-fraud-use-case-tutorial)
* [Protecting from client-side tampering and replay attacks](/docs/protecting-from-client-side-tampering)