React Native Vision Camera: a step by step guide

The need to configure camera for iOS and Android apps that are built with React Native is becoming more frequent. In this blog, we will tell you everything you need to know about React Native Vision Camera, including its QR code-related features.

What exactly is React Native Vision Camera?

Nowadays, people are increasingly using their cell phone cameras within apps. For example, if you are at a restaurant, you can probably access a QR code to see the menu (in fact, many restaurants don’t have the paper option anymore). The same is valid for integrating a feature to make payments by scanning a barcode.

Both situations are now popular. However, do you know how to code this feature within a React Native app? Well, first you should know what React Native Vision Camera is. Basically, it is a QR code scanner app, and it usually works with the following elements:

• Photos
• Face detection
• Bar code scanning
• Text recognition
• Videos

This project is open source. It is not at all difficult to use since it has great documentation that will support all your projects. 

How to install React Native Vision Camera simply?

Creating a QR scanner using React Native Vision Camera

We have already taken the initial steps. Now, if you want to understand more precisely how this system works, we can create a simple React Native project with a QR scanner. For that, we will need to use the following lines of code:

react-native init react_native_scanner
cd react_native_scanner
npm run ios

You have already created a React Native app! However, if you want to incorporate Camera features, you should install the following essential commands:

npm install react-native-vision-camera --save 
cd ios && pod install && cd..

It is essential to note that operating systems automatically block access to cameras as a security method. Therefore, it is indispensable that on iOS, for example, you can add the permissions to the Info.plist app. Below, you will know how to do it:

<key> NSCameraUsageDescription</key>.
<string> Your message to the user when the camera is accessed for the first time</string>.

<key> NSPhotoLibraryAddUsageDescription</key>.
<string> Your message to the user when the photo library is accessed for the first time</string>.

<key> NSPhotoLibraryUsageDescription</key>.
<string> Your message to the user when the photo library is accessed for the first time</string>.

<key> NSMicrophoneUsageDescription</key>.
<string> Your message to the user when the microphone is accessed for the first time</string>.

Other things you will have to do to have the function

This step is not complicated, but you must pay attention: you need to access Android/app/src/main/AndroidManifest.xml. Once this is done, add:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

You will also need to change the rows of Android/app/build.gradle. You will need to add:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

That’s it! Although now you could redesign the application to make it more stylish. Do you want to know how to do it? 

How to make React Native Vision Camera look better?

Enter App.js and change the file by adding the text:

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, SafeAreaView } from 'react-native';
import { RNCamera } from 'react-native-camera'.

Then, the RNCamera will communicate with the smartphone camera. If you want to change the main screen, you can delete the previously generated code, to add a TopBar with SafeAreaView. In addition, you can add a title with View and Text. However, do you want to know how to allow the user to scan a QR code? Then enter this: 

<View style={styles.screen}>
  <SafeAreaView style={styles.safeArea}>
    <View style={styles.topBar}>
      <Text style={styles.topBarTitleText}>React Native Scanner</Text>
    </View> 
  </SafeAreaView>
  <View style={styles.caption}>
    <Text style={styles.captionTitleText}> Welcome To React-Native-Camera Tutorial</Text>
  </View>
  <RNCamera style={styles.rnCamera} />
  <View style={styles.cameraControl}>
    <TouchableOpacity style={styles.btn}>
      <Text style={styles.btnText}>New QR Scan</Text>
    </TouchableOpacity>
  </View>
</View>

Now, you can modify the colors of the menu and text. Here is an example: 

const styles = StyleSheet.create({
  topBar: {
    height: 50,
    backgroundColor: '#62d1bc', // green
    alignItems: 'center',
    justifyContent: 'center',
  },
  topBarTitleText: {
    color: '#ffffffff', // white   
    fontSize: 20,
  },
  caption: {
    height: 120,
    justifyContent: 'center',
    alignItems: 'center',
  },
  captionTitleText: {
    color: '#121B0D', // black
    fontSize: 16,
    fontWeight: '600
  },
});

Now, you can use the useState to save the React Native Vision Camera QR code. Add the following line of code to the App.js null:

function App() {
  const [barcode, setBarcode] = useState(null);
  ...
}

You can save the QR code by calling it as setBarcode. If you want it to take up little space on the screen, you can add the following line: 

const styles = StyleSheet.create({
  ...
  rnCamera: {
    flex: 1,
    width: '94%',
    alignSelf: 'center',
  }
})

You’re done! You can now run the app. As you can see, React Native Vision Camera is essential for any app that needs access to the camera for various functionalities. It’s not difficult to apply, and the results are functional and stable.

We hope this information has been helpful to you! If you want to know more about React, we invite you to continue reading our blog.