React Native Integration with Veryfi Lens

May 10, 2023
4 mins read

An Easy Build for Structured Data in Seconds

Building a mobile app that seamlessly integrates with different software can be likened to constructing a complex Lego set. First and foremost, each piece needs to fit together perfectly to create a cohesive whole. Furthermore, in the world of mobile app development, React Native has become a popular choice for building cross-platform applications. In addition, for businesses that need to extract structured data from receipts and invoices, Veryfi Lens offers a powerful OCR solution. 

By integrating React Native with Veryfi Lens, developers can easily build mobile apps that extract structured data from receipts and invoices in seconds. As a result, this integration offers businesses a streamlined solution for managing their financial data with ease.

Add the Best Data Extraction in Seconds

Each project is like constructing a Lego set, where we carefully fit the right pieces together to create something meaningful. We constantly adjust and improve our projects to meet the demands of the modern world. In the market, we have access to a variety of Lego bricks to include in our creations. Some are indispensable, while others become obsolete over time.

Veryfi is the valuable LEGO kit that enhances your project with cutting-edge image processing technology. This ā€œkitā€ includes everything you need, including instructions, and can be used to build other projects like APIs.

Avoid Building from Scratch

When faced with adding OCR to your project, you may be faced with the question ā€œdo we build it ourselves or use a pre-built solution?ā€

Traditionally, companies have invested significant time and resources into manually extracting data from a range of documents including receipts, invoices, and checks. This process involves large groups of people who work to digitize the information and feed it into the accounting system. 

Product owners at B2B software companies face a classic ā€œDIY vs. buyā€ decision: ā€œDo we devote precious engineering resources to build this functionality in-house, or do we buy this functionality from a company that has already built what we need?ā€ The answer isnā€™t always straightforward; there are pros and cons to each approach, depending on a number of considerations.

Hereā€™s a side-by-side comparison: AI-Driven OCR ā€“ DIY vs. Buy Decision Criteria

Use Veryfi to Complete the Perfect Build the First Time 

Veryfi, however, offers a solution to this tedious and time-consuming process. Firstly, acting as a complete Lego kit, Veryfi helps to streamline the data extraction process with its advanced OCR system. Moreover, this system can quickly and accurately extract all relevant data with minimal effort, providing businesses with the necessary information for efficient processing. 

Veryfi eliminates the need for a large number of people to carry out this task, saving valuable time and resources. In addition, this advanced technology ensures a high level of certainty, increasing the accuracy of the data extraction process. Our advanced AI-driven OCR technology quickly extracts data with little effort and high certainty, making it available for processing.

So what does implementing OCR data extraction look like using Veryfi? Itā€™s as easy as following the instructions with the LEGO kit provided to you. Thereā€™s nothing included you donā€™t need, and with a fast and accurate execution, you can work on other tasks. 

Your Veryfi Lens Builderā€™s Instructions

Now that you understand how Veryfi Lens for Mobile works and its benefits, letā€™s read the instructions on adding Veryfi Lens for Mobile to your app using React Native.

Before You Begin

Here are the install dependencies and what you need to configure your project:

npm i @veryfi/react-native-veryfi-lens@[VERSION]

For iOS project specific configurations you should visit: https://hub.veryfi.com/lens/docs/react-native/#configuration-ios 
For Android project specific configurations you should visit: https://hub.veryfi.com/lens/docs/react-native/#configuration-android

Brick 1: Import Veryfi Lens

First, import Veryfi Lens:

import VeryfiLens from '@veryfi/react-native-veryfi-lens';

Brick 2: Configure Credentials

Configure your authentication credentials:

const veryfiLensCredentials = {
    "url": "XXX",       // replace XXX with your assigned Client ID
    "clientId": "XXX",  // replace XXX with your assigned Username
    "userName": "XXX",  // replace XXX with your assigned API Key
    "apiKey": "XXX"     // replace XXX with your assigned Endpoint URL
};

Brick 3: Configure Settings

Configure your Veryfi Lens settings:

const veryfiLensSettings = {
    blurDetectionIsOn: true,
    autoLightDetectionIsOn: false,
    backupDocsToGallery: true,
    autoDocDetectionAndCropIsOn: true,
    showDocumentTypes: true,
    documentTypes: ['long_receipt', 'receipt'],
    moreMenuIsOn: true,
    categories: ["Meals", "Entertainment", "Job supplies"],
    originalImageMaxSize: 2.0,
    stitchedPDFPixelDensityMultiplier: 2.0
};

Brick: Initialize

Initialize Veryfi Lens:

VeryfiLens.configureWithCredentials(veryfiLensCredentials, veryfiLensSettings);

Brick 5: Communicate

Communicate with Veryfi Lens:

const VeryfiLensEmitter = new NativeEventEmitter(VeryfiLens);
VeryfiLensEmitter.addListener(VeryfiLens.getConstants().onVeryfiLensClose, lensEventCallback);
VeryfiLensEmitter.addListener(VeryfiLens.getConstants().onVeryfiLensUpdate, lensEventCallback);
VeryfiLensEmitter.addListener(VeryfiLens.getConstants().onVeryfiLensError, lensEventCallback);
VeryfiLensEmitter.addListener(VeryfiLens.getConstants().onVeryfiLensSuccess, lensEventCallback);

Brick 6: Launch

Finally, Launch Veryfi Lens:

VeryfiLens.showCamera();

If you want to check out more documentation on Veryfi Lens using React Native, you can go here. After following along with our simple, six-brick build, now you have Veryfi Lens technology up and running to build amazing things! The limit is endlessā€¦

If you don’t have access to our Hub, please contact our sales team, sales@veryfi.com, to learn more about Veryfi’s awesome products or schedule a personalized demo.
Want more? Create your free trial now

Process your docs in less time than it takes to read this.

See for yourself.