Unlock the Power of React Native Camera

What is React Native Camera?

React Native Camera is a comprehensive camera component that gives you full control over the camera, communicating seamlessly with the native OS and device hardware. This open-source project supports a wide range of features, including:

• Photographs
• Videos
• Face detection
• Barcode scanning
• Text recognition

With 9.2k stars on GitHub and 175k user downloads per month on npm, React Native Camera is a trusted and widely-used solution.

Building a QR Scanner with React Native Camera

To demonstrate the power of React Native Camera, let’s create a simple QR scanner app. We’ll use an iOS device to build and test our project.

Setting Up the Project

First, we need to create a new React Native project and install the React Native Camera package. We’ll also add iOS permissions to our app’s Info.plist file and modify the android/app/src/main/AndroidManifest.xml file.

npx react-native init QRScannerApp
cd QRScannerApp
npm install react-native-camera

Styling the App

Next, we’ll update our App.js file to add a topBar with SafeAreaView and a title with View and Text. We’ll also import the RNCamera component to communicate with the camera and add a TouchableOpacity button to allow the user to scan a QR code.

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

const App = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  return (
    <SafeAreaView>
      <View>
        <Text>QR Scanner App</Text>
      </View>
      <RNCamera
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.auto}
        androidCameraPermissionOptions={{
          title: 'Permission to use camera',
          message: 'We need your permission to use your camera',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
        onGoogleVisionBarcodesDetected={({ barcodes }) => {
          console.log(barcodes);
        }}
      >
        {scanned && (
          <TouchableOpacity onPress={() => setScanned(false)}>
            <Text>Scan Again</Text>
          </TouchableOpacity>
        )}
      </RNCamera>
    </SafeAreaView>
  );
};

export default App;

Scanning a QR Code

When the camera detects a QR code, we’ll use the onBarCodeRead method to retrieve barcode information. This function returns several properties, including data, rawData, uri, type, and bounds. We’ll update our App.js file to display the extracted information and save it in React state.

onBarCodeRead={(e) => {
  setScanned(true);
  console.log(e.data);
  console.log(e.rawData);
  console.log(e.uri);
  console.log(e.type);
  console.log(e.bounds);
}}

The Final App

With our QR scanner app complete, we can now scan QR codes in real-time and display their contents on the screen. If you want to see all of the code, you can check out the GitHub repo here.

Take Your App to the Next Level

React Native Camera is an incredible package that opens up a world of possibilities for developers. Whether you’re building a QR code scanner, text recognition app, or face detection feature, React Native Camera has got you covered. Happy coding!