React Native Camera

Introduction to React Native Camera

React Native Camera is a camera module in React Native that provides users with camera control and communication with native device hardware and operating systems. It facilitates various functionalities, including capturing photographs, recording videos, detecting faces, scanning barcodes, and recognising text.

Installation

To use React native camera in your project, install it using the below command.

Permissions:

To utilize the camera feature on Android devices, it is necessary to request permission to access the camera. By obtaining permission to access the camera, we can use camera functionality in our applications, allowing us to take pictures, record videos, and engage with various camera-related features within the app.

Adding the given code to the AndroidManifest.xml file is necessary for enabling the video recording feature in the application.

Finally, modify the Android/app/build.gradle file:

To enable the camera functionality on iOS, it is essential to update the Info.plist file with a usage description.

How to Build a QR Scanner with React-Native-Camera

Let's build a React Native project with a QR scanner to gain a comprehensive understanding of React Native Camera. For building and testing, I will be using an Android device.

Setting the Project

Let's create a new react native project by following the below commands.

To proceed further, we need to add the React Native Camera package to our project. We can install this package using the following commands:

Next, we need to add code dependencies for Android. To comply with the necessary permissions for the Android operating system, we will need to modify the file located at android/app/src/main/AndroidManifest.xml by adding the following permissions:

Add the below lines to the build.gradle file located in the android/app directory:

To begin, we will make changes to the App.js file by importing RNCamera from 'react-native-camera'. Then, we will update the render function to integrate RNCamera. It's essential to include the style attribute with appropriate settings for the camera to take up the entire screen. Neglecting to add these styles may cause the camera to not render on the screen as it won't occupy any space. Let's first see what will be the final app that we will be developing using React native camera to scan QR codes.

Add the below code in App.js.

Output:

Breaking the Code

Let's break the code step by step to understand how we will be creating the QR Scanner with React native camera.

Styling

The styles defined using the StyleSheet.create() method are used to set the visual appearance of the components in the React Native app.

• Container: It sets the style of the main container view of the app. The flex: 1 property allows the container to take up the entire screen. The backgroundColor property sets the background color of the container to white. The aligners and justifyContent properties are used to centre the contents of the container horizontally and vertically, respectively.
• Maintext: It sets the style of the text component that displays the scanned data. The font-size property sets the font size of the text to 16, and the margin property adds some spacing around the text.
• Barcodebox: It sets the style of the view component that displays the barcode scanner. The aligners and justifyContent properties centre the barcode scanner horizontally and vertically, respectively. The height and width properties set the dimensions of the box to 300, and the overflow property hides any content that overflows the box. The borderRadius property adds rounded corners to the box, and the backgroundColor property sets the background colour of the box to tomato.

Scanning the QR

The component has three state hooks initialized with default values:

• HasPermission is set to null initially, which will be updated based on user permissions to access the device camera.
• Scanned is set to false by default, which will be changed to true when the QR code is scanned.
• Text is initially set to 'Not yet scanned', which will display a message until a QR code is scanned.

Permission handling: The askForCameraPermission() function is defined to request access to the device camera. It is called using the useEffect() hook to ask for camera permission when the component mounts. The handleBarCodeScanned() function is defined to handle scanning the QR code. It sets the scanned state to true and displays the data from the scanned QR code. The data is also logged into the console.

Render Function: The render function returns different screens depending on the state of the app.

• If hasPermission is null, the user is prompted to grant access to the device camera.
• If hasPermission is false, the user is informed that they don't have access to the device camera and is provided with a button to grant camera access.
• If hasPermission is true, the camera preview is displayed along with a view to hold the barcode, which is defined by the styles.barcodebox. The BarCodeScanner component is used to capture the QR code. If a code is scanned, the handleBarCodeScanned() function is called to handle the scanned data. The text state is displayed, which shows the data from the scanned QR code. If a QR code has been scanned, a button is displayed to allow the user to scan another code.