Fingerprint Pro React Native

Fingerprint is a device intelligence platform offering industry-leading accuracy. Fingerprint Pro React Native SDK is an easy way to integrate Fingerprint Pro into your React Native application to call the native Fingerprint Pro libraries (Android and iOS) and identify devices.

Table of contents

• Fingerprint Pro React Native
  • Table of contents
  • Requirements and limitations
  • Dependencies
  • How to install
    • Expo setup
      • 1. Add config plugin
      • 2. Rebuild the native code
      • 3. Rebuild the app
    • Bare react-native
      • 1. Configure iOS dependencies (if developing on iOS)
      • 2. Configure Android dependencies (if developing on Android)
  • Usage
    • Hooks approach
    • API Client approach
    • Response format
    • Error handling
    • Linking and tagging information
  • API Reference
  • Additional Resources
  • Version support
  • Support and feedback
  • License

Requirements and limitations

• React Native 0.80 or higher is supported (New Architecture only)

• Expo 54.0.0 or higher is supported

• Android 7.0 (API level 24+) or higher

• iOS 15.1+/tvOS 15.1+, Swift 5.9 or higher (stable releases)

• Fingerprint Pro request filtering is not supported right now. Allowed and forbidden origins cannot be used.

Dependencies

• Fingerprint Pro iOS
• Fingerprint Pro Android

How to install

Install the package using your favorite package manager:

• NPM:

  npm install @fingerprint/react-native --save
  

• Yarn:

  yarn add @fingerprint/react-native
  

• PNPM:

  pnpm add @fingerprint/react-native
  

Expo setup

ℹ️ Our SDK cannot be used in Expo Go because it requires custom native code.

• NPM:

  npm install @fingerprint/agent --save
  

• Yarn:

  yarn add @fingerprint/agent
  

• PNPM:

  pnpm add @fingerprint/agent
  

Then, use the SDK as you would with the native version.

1. Add config plugin

{
  "expo": {
    "plugins": [
      "@fingerprint/react-native"
    ]
  }
}

2. Rebuild the native code

npx expo prebuild --clean

3. Rebuild the app

For Android:

npx expo run:android

For iOS:

npx expo run:ios

Bare react-native setup

1. Configure iOS dependencies (if developing on iOS)

cd ios && pod install

2. 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:

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

Usage

To identify visitors, you need a Fingerprint Pro account (you can sign up for free).

• Go to the Fingerprint Pro dashboard.
• Open App Settings > API Keys to find your Public API key.

Hooks approach

Configure the SDK by wrapping your application in FingerprintProvider.

⚠️ Important: Applications should create only one client across the entire app, either through FingerprintProvider or through the API client (start()). If you create another client, it will overwrite the underlying native client of the first one.

// src/index.js
import React from 'react';
import { AppRegistry } from 'react-native';
import { FingerprintProvider } from '@fingerprint/react-native';
import App from './App';
import { name as appName } from './app.json';

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

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 '@fingerprint/react-native'

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

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

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗