Since its release in 2013, React has been gaining more and more traction in the world of software development. Reactive Design Pattern has become a well-known term in itself, although its origin was slightly controversial.
In 2015, Facebook’s development team delved into the world of mobile development and created its framework called React Native. As of the past few years, React Native has proven itself to be a formidable force in Cross-Platform Mobile Development. Let's build a Scanbot Barcode Scanner App with React Native.
First off, React Native does not work magically. In layman's terms, it's just a blanket on top of a native iOS and Android app that offers a unified API for rendering views. Therefore, we require the same basic mobile development tools as if we were doing it in Java or Objective-C:
Then, it's wise to have Java and path set in your way. If you're on a clean installation of Android Studio and haven't made any previous Java- or Gradle-related installs, it shouldn't be necessary. This will let the React CLI know which Java to use if you've downloaded several versions of it. OpenJDK 8, which you can easily download and install, is the most beneficial option for Android development (11 should be fine, 14 is iffy with older versions of Gradle).
Then, on a Mac or Linux, go to /Users/$USER/ and open .bash_profile, .zshrc or .bashrc with your preferred text editor and add the following lines to it:
After that, source <filename> to reload the file. That's it!
Note that platform-tools have been added to the path as well. That is not required, but very handy for debugging all possible things, most notably, the command adb devices will show whether you have a debuggable device available or not.
And finally, the tools required for the React Native layer to properly function:
It is preferable to install everything through brew. The setup is quite simple. First, install brew:
Then, make sure it's up to date and install node:
You're now just about ready to start coding. One last hint from the official React Native environment setup guide:
React Native has a built-in command-line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using npx, which ships with Node.js. With npx react-native <command>, the current stable version of the CLI will be downloaded and executed at the time the command is run.
That should take a couple of minutes, but it's also an awesome one-liner that does everything for you: From creating and configuring the native projects to npm install. After this has been done, simply:
Then, the following should appear:
Now we finally get to the good stuff – Scanbot! If you're reading this, you're probably aware of what npm is; nevertheless, in short, your "Hello World" app has a file called package.json that defines all the dependencies you have. As you can see, React Native itself already defines a lot of them, everything from linters to typescript to jsx syntax.
Let's add another one (to dependencies, not devDependencies, as we need the ScanbotSDK during runtime as well, not just for development purposes) and then install it via npm install:
Since the Scanbot SDK for React Native is a wrapper of the native version, an additional step is also to download the native SDK. As of React Native version 0.62, native dependencies are resolved automatically. You do not need to add anything to the Podfile (iOS native equivalent of package.json), but you still have to go to the iOS folder and install native dependencies:
That was almost too easy, wasn't it? Well, this isn't over yet.
As with most things in mobile development, you expect the android equivalent of something to be a bit more difficult to configure. This isn't necessarily a bad thing, quite the opposite, having more options to configure is mostly a good a thing. It can get somewhat frustrating, though.
To configure Gradle-level requirements, we recommend using Android Studio, as it supports better syntax highlighting and a visual interface. You are, of course, free to use any text editor – even Notepad will do the trick.
First, you should enable MultiDex. That's done via adding multiDexEnabled true to your android/app/build.gradle as such:
Enabling MultiDex is just a fancy way of saying "Yes, I know this app has a heavy-weight ML-based document scanning SDK and I don't care".
Right there in the same file, you should also specify that it should pick the first instance of libc++_shared.so that it finds, on the same level as defaultConfig, as follows:
This needs to be specified because many third-party dependencies have native binaries that use the c++ shared library (in the context of Gradle, React Native itself is a third dependency that uses it, and so does the Scanbot SDK).
Another thing you should add is android:largeHeap="true" and that under your application tag of android/app/src/main/AndroidManifest.xml file, as such:
Next, you should also add Scanbot SDK paths to your application-level Gradle (android/build.gradle). That way, Gradle knows precisely where to find our SDK:
Right there in your application-level Gradle, you should also increase the minSdkVersion to 21, which is a requirement for the latest version of the Scanbot SDK (and, unless specifically requested otherwise, in general, a good idea – supporting backward compatibility below Android 5.0 is a nightmare).
And finally, specify where react-native-scanbot-sdk is located in your repository. That can be achieved by adding the following lines to android/settings.gradle:
If you’re using the same app template, you should also be able to do the following. For the sake of simplicity, slap a click-handler to the to a TextView, e.g. the following line:
Then, let's just create a global variable to decide what our click-handler should do:
Now that the basics are out of the way, it's time to start working with the SDK.
Before you begin, you should define the imports. For this example, you just need three things: the SDK itself, and then two option and configuration classes:
The first real step is initialization. That goes as follows:
Similarly, to start the QR- and Barcode scanner, the snippet is as follows:
Just to review, your entire onPress should look like this:
Now that we've got everything sorted out, go ahead and scan the following QR code:
While every cross-platform solution does have its problems, such as internal inconsistencies, React’s simplicity and elegance make software development very smooth and fun.
If you’d like to know more about the possibilities of React Native and the Scanbot SDK, check out the following links:
As always, feel free to contact one of our experts for further information about the Scanbot SDK and its integration. We'd love to find the perfect solution for you. For further information, please check out our blog posts about the SDK Demo App and the integration with Flutter!
Get the Scanbot fact sheet as a PDF for an overview of our solutions and services.