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. Add @fingerprintjs/fingerprintjs-pro-react-native as a dependency to your application using your package manager.
npm install @fingerprintjs/fingerprintjs-pro-react-native --save
yarn add @fingerprintjs/fingerprintjs-pro-react-native
  1. Configure native dependencies on iOS and Android.
    1. iOS: cd ios && pod install
    2. Android: Add a declaration of the Fingerprint Android repository to your app's main build.gradle file to the allprojects section:
      maven {
        url("https://maven.fpregistry.io/releases")
      }
      maven {
        url("https://www.jitpack.io")
      }
      
  2. Wrap your application (or component) in FingerprintJsProProvider. You can specify multiple configuration options.
// src/index.js
import React from 'react';
import { AppRegistry } from 'react-native';
import { FingerprintJsProProvider } from '@fingerprintjs/fingerprintjs-pro-react-native';
import App from './App';

AppRegistry.registerComponent(
  'AppName',
  <FingerprintJsProProvider
      apiKey="fingerprintjs-pro-public-api-key"
  >
    <App />
  </FingerprintJsProProvider>
);

Usage

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

// src/App.js
import React, { useEffect } from 'react';
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react-native';

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

  useEffect(() => {
    getData();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>An error occured: {error.message}</div>;
  }

  if (!data) {
   return null
	}
  
  // perform some logic based on the visitor data
  return (
    <div>
      Visitor id is {data.visitorId}
    </div>
  );
}

export default App;

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