> ## 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

Fingerprint React Native is an official [open-source](https://github.com/fingerprintjs/fingerprintjs-pro-react-native) library for projects written in React Native for iOS and Android platforms. This library allows developers to use Fingerprint capabilities in the React Native context. All Fingerprint agent capabilities are fully supported. View our [React Native quickstart](/docs/react-native-quickstart) for a step-by-step guide to get started.

## Requirements

The React Native SDK uses the [Android](/docs/native-android-integration) and [iOS](/docs/ios) SDKs under the hood, so it has the same minimum OS version requirements:

* Android 5.0 (API level 21+) or higher
* iOS 12 or higher (or tvOS 12 or higher), Swift 5.7 or higher

## How to install

### 1. Install the package using your favorite package manager:

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprintjs/fingerprintjs-pro-react-native --save
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprintjs/fingerprintjs-pro-react-native
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprintjs/fingerprintjs-pro-react-native
  ```
</CodeGroup>

### 2. Configure iOS dependencies (if developing on iOS)

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

### 3. Configure Android dependencies (if developing on Android)

Add the repositories to your Gradle configuration file. The location for these additions depends on your project's structure and the Gradle version you're using:

#### Gradle 7 or newer

For Gradle 7.0 and higher (if you've adopted [the new Gradle settings file approach](https://developer.android.com/build#settings-file)), you likely manage repositories in the `dependencyResolutionManagement` block in `{rootDir}/android/settings.gradle`. Add the Maven repositories in this block:

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

#### Gradle 6.0 or older

For Gradle versions before 7.0, you likely have an `allprojects` block in `{rootDir}/android/build.gradle`. Add the Maven repositories within this block:

```groovy Groovy theme={"theme":"github-dark-dimmed"}
allprojects {
    repositories {
      mavenCentral()
      mavenLocal()
      maven {
        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
        url("$rootDir/../node_modules/react-native/android")
      }
      maven {
        // Android JSC is installed from npm
        url("$rootDir/../node_modules/jsc-android/dist")
      }
      maven {
        url("https://maven.fpregistry.io/releases") // Add this
      }
      google()
    }
}
```

## Usage

Configure the SDK by wrapping your application in `FingerprintJsProProvider`.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// src/index.js
import React from 'react';
import { AppRegistry } from 'react-native';
import { FingerprintJsProProvider } from '@fingerprintjs/fingerprintjs-pro-react-native';
import App from './App';
import { name as appName } from './app.json';

const WrappedApp = () => (
  <FingerprintJsProProvider apiKey={'your-fpjs-public-api-key'} region={'eu'}>
    <App />
  </FingerprintJsProProvider>
)

AppRegistry.registerComponent(appName, () => WrappedApp);
```

Use the `useVisitorData` hook in your components to perform visitor identification and get the data.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// src/App.js
import React from 'react'
import {Button, SafeAreaView, Text, View} from 'react-native'
import {useVisitorData} from '@fingerprintjs/fingerprintjs-pro-react-native'

export default function App() {
  const {isLoading, error, data, getData} = useVisitorData()

  return (
    <SafeAreaView>
      <View style={{ margin: 8 }}>
        <Button title='Reload data' onPress={() => getData()} />
        {isLoading ? (
          <Text>Loading...</Text>
        ) : (
          <>
            <Text>VisitorId: {data?.visitorId}</Text>
            <Text>Full visitor data:</Text>
            <Text>{error ? error.message : JSON.stringify(data, null, 2)}</Text>
          </>
        )}
      </View>
    </SafeAreaView>
  )
}
```

## Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/fingerprintjs-pro-react-native). The repository also contains [an example app](https://github.com/fingerprintjs/fingerprintjs-pro-react-native/tree/main/TestProject) demonstrating usage of the library.

### Limitations

* Fingerprint [request filtering](https://dev.fingerprintjs.com/docs/request-filtering) is not supported right now. Allowed and forbidden origins cannot be used.
* Using inside [Expo environment](https://docs.expo.dev) is not supported right now.