Skip to content

veryfi/veryfi-lens-react-native-expo-demo

Repository files navigation

License: MIT

Veryfi Lens

Veryfi Lens is code (a framework) with UI for your mobile app to give it document capture superpowers in minutes.

Let Veryfi handle the complexities of frame processing, asset preprocessing, edge routing, and machine vision challenges in document capture. We have been at this for a long time and understand the intricate nature of mobile capture. That’s why we built Lens. Veryfi Lens is built by developers for developers; making the whole process of integrating Lens into your app fast and easy with as few lines as possible.

Veryfi Lens is a Framework: a self-contained, reusable chunks of code and resources you can import into you app.

Lens is built in native code and optimized for fast performance, clean user experience and low memory usage.

You can read further about Lens in Veryfi's dedicated page: https://www.veryfi.com/lens/

Table of content

  1. Configuration
  2. Expo EAS Configuration
  3. iOS Localization
  4. Other platforms
  5. Get in contact with our team

Configuration

Min SDK Android 6.0 (API level 23)

Min iOS version 12

  • Go to Lens: Maven (Android) section and generate your access credentials here.
  • Add your Maven credentials to your system environment. Replace [USERNAME] and [PASSWORD] with the credentials that were set up in the previous step.
export MAVEN_VERYFI_USERNAME=[USERNAME]
export MAVEN_VERYFI_PASSWORD=[PASSWORD]
  • Go to Lens: React Native (iOS + Android) section and generate your access credentials here.
  • Add your NPM credentials to your system enviroment. Replace [USERNAME] and [PASSWORD] with the credentials that were set up in the previous step.
export NPM_USERNAME=[USERNAME]
export NPM_PASSWORD=[PASSWORD]
  • Clone this repository
  • Check if the .npmrc file in the root of this project has this structure
@veryfi:registry=https://nexus.veryfi.com/repository/npm/
config=set
//nexus.veryfi.com/repository/:username=${NPM_USERNAME}
//nexus.veryfi.com/repository/:_password=${NPM_PASSWORD}
  • Your NPM_PASSWORD should be base64 encoded before storing it in an enviroment variable.
  • Run npm i @veryfi/react-native-veryfi-lens
  • Replace your API credentials in app/index.tsx with yours
const veryfiLensCredentials = {
  url: 'yourUrl',
  clientId: 'yourClientId',
  userName: 'yourUsername',
  apiKey: 'yourApiKey',
};

or create a .env file in the root folder with:

EXPO_PUBLIC_VERYFI_URL='yourUrl'
EXPO_PUBLIC_VERYFI_CLIENT_ID='yourClientId'
EXPO_PUBLIC_VERYFI_USERNAME='yourUsername'
EXPO_PUBLIC_VERYFI_API_KEY='yourApiKey'
  • For Android, check if the android/app/build.gradle has the following configuration:
android {
    androidResources {
        noCompress += 'veryfi'
    }
}

This is necessary to avoid the compresion of the Veryfi machine learning models

  • Also check in the android/app/src/main/AndroidManifest.xml that the <application> tag has tools:replace="android:usesCleartextTraffic,android:allowBackup" and set the value that you want for that configration in your project
  • Run npm install to install all the dependencies
  • Run your desired platform using: npx expo run:android or npx expo run:ios

In case npx expo run:android does not find the Veryfi's Maven repository, add the following lines to android/app/build.gradle:

repositories {
    maven {
        url "https://nexus.veryfi.com/repository/maven-releases/"
        credentials {
            username = System.getenv("MAVEN_VERYFI_USERNAME")
            password = System.getenv("MAVEN_VERYFI_PASSWORD")
        }
        authentication {
            basic(BasicAuthentication)
        }
    }
}

Expo EAS Configuration

If you use EAS to build your iOS or Android project, you need to add in the Secrets section of your EAS project the variable enviroments that you set in the previous step with your credentials.

MAVEN_VERYFI_USERNAME=[USERNAME]
MAVEN_VERYFI_PASSWORD=[PASSWORD]
NPM_USERNAME=[USERNAME]
NPM_PASSWORD=[PASSWORD]

iOS Localization (Optional)

  • In order to be able to enable iOS Lens native localization you need to enable a supported language on the project file: Step 1

  • Generate localization files for the desired language (for example in storyboard): Step 2

  • At the end you should have at least 1 file localized for each language that you want to enable localization, see example: Step 3

Other platforms

We also support the following wrappers for native and hybrid frameworks:

If you don't have access to our Hub, please contact our sales team, you can find the contact bellow.

Get in contact with our sales team

Contact [email protected] to learn more about Veryfi's awesome products.