Guides
Sign Up
Start typing to search…

React Native

Fingerprint React Native is an official open-source 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.

Requirements

The React Native SDK uses the Android and 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:

  • NPM:

    npm install @fingerprintjs/fingerprintjs-pro-react-native --save

  • Yarn:

    yarn add @fingerprintjs/fingerprintjs-pro-react-native

  • PNPM:

    pnpm add @fingerprintjs/fingerprintjs-pro-react-native

2. Configure iOS dependencies (if developing on iOS)

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), you likely manage repositories in the dependencyResolutionManagement block in {rootDir}/android/settings.gradle. Add the Maven repositories in this block:

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:

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.

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

// 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. The repository also contains an example app demonstrating usage of the library.

Limitations

Updated 2 months ago