How to Set Up BlinkID SDK Wrapper for React Native

Dec 29, 2023 | Data Science

Welcome to your guide on integrating the **BlinkID SDK** with React Native! This guide is designed to help you easily kickstart a demo project, install and link the BlinkID library with iOS and Android apps, and troubleshoot any issues you may encounter along the way. Let’s embark on this journey into the world of ID scanning software!

1. Getting Started with BlinkID SDK

To get your demo project up and running, you will first need to have React Native installed. Here’s a quick checklist of what you need:

  • React Native version 0.75.0 or higher.
  • An integrated development environment (IDE) set up for React Native.
  • A valid license key from the Microblink Developer Hub.

2. Project Initialization

If you don’t have a React Native project set up yet, you can create one by running the following command:

react-native init --version=0.75.0 NameOfYourProject

3. Installing the BlinkID Library

Once your project is ready, navigate to your project directory and install the BlinkID library:

cd path_to_your_project
npm i --save blinkid-react-native

4. Linking the Library

4.1 For iOS:

  • Link the module to your project with:
  • react-native link blinkid-react-native
  • Install CocoaPods if using version 0.60 or later:
  • pod install
  • Don’t forget to add the Privacy – Camera Usage Description key in your info.plist file.

4.2 For Android:

Add the Microblink Maven repository to your project-level build.gradle file as follows:

allprojects {
    repositories {
        mavenLocal()
        jcenter() // other repositories
        maven { url 'http://maven.microblink.com' }
    }
}

5. Sample Application

You can also run a script to create a sample app with all dependencies:

initReactNativeSampleApp.sh

6. Video Tutorials

Check out these step-by-step video tutorials that guide you from cloning the repository to successfully deploying the application:

Watch on Vimeo

7. Using documentVerificationOverlay

Learn how to use the document verification overlay for improved scanning:

Watch on Vimeo

8. Troubleshooting

As with any integration, you might face some challenges. Here are some common troubleshooting ideas:

  • iOS Issue: If you encounter the error [NSURLResponse allHeaderFields]: unrecognized selector, ensure you are using Flipper version 0.37.0 in your Podfile.
  • Android Build Exception: For the error java.lang.NoClassDefFoundError: com.facebook.react.views.swiperefresh.ReactSwipeRefreshLayout, add this line to the dependencies section in android/app/build.gradle:
  • implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

9. Conclusion

You are now ready to dive into the exciting world of BlinkID SDK for React Native. By following these steps, you’ll set a robust foundation for implementing ID scanning functionality. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox