QR-Barcode Scanner with React Native

image from jcomp

As of 2023, the optimal choice for code scanning in React Native is react-native-vision-camera, which is developed and maintained by Marc Rousavy. This library also have a well-structured website and an active community. Apart from its feature rich and high performant nature, version V3 of the library now includes a built-in Code Scanner feature. Consequently, other libraries built on top of vision-camera for code scanning are generally no longer maintained. They lack compatibility with version 3, as vision camera now manages this functionality internally.

This article provides a practical guide on how to effectively use Vision Camera for scanning various machine readible codes in your project.

Setting up

To start, create a new React Native project using the React Native CLI. Then install the react-native-vision-camera library. For iOS, the additional step ‘pod-install’ is required to install the dependencies using CocoaPods.

npx react-native@latest init CodeScanner
npm i react-native-vision-camera
cd ios &&  npx pod-install //For ios

Configuring Permissions

Ensure that the necessary permissions are set in both iOS and Android platforms.

• In the Info.plist, add the following key-string pair:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

• In the AndroidManifest.xml , add the following lines inside the <manifest> tag:

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

Implementing the QR/Barcode Scanner

Now, let’s create the core functionality for our scanner. Start by requesting camera permission from the user. Note that with this implementation the permission request will be prompted the first time the component is activated:

   const [hasPermission, setHasPermission] = useState(false);
   useEffect(() => {
      (async () => {
        const status = await Camera.requestCameraPermission();
        setHasPermission(status !== 'denied');
      })();
    }, []);
    

Then, you may utilize the useCodeScanner hook to handle code scanning and manage the scanned data:

const codeScanner = useCodeScanner({
    codeTypes: ['ean-13', 'code-128', 'code-93', 'code-39', 'ean-8'],
    onCodeScanned: codes => {
      if (scanning) {
        setBarcodes(codes);
        setScanning(false);
      }
    },
  });

• It is important to note that, in the specific implementation for this guide, a modal is triggered to open once a code is scanned. The scanning parameter is specifically configured for this purpose, preventing continuous scanning until a new session is deliberately initiated.

Now the only thing left is to add the codeScanner into the camera component:

<Camera
  style={StyleSheet.absoluteFillObject}
  device={device}
  isActive={scanning}
  codeScanner={codeScanner}
  enableZoomGesture={true}
 />

• Here is the full code for the CodeScanner Component

Example Output of the Code Provided

Feel free to explore the entire project code on its GitHub repository. Happy coding!

GitHub - yagmurse/CodeScanner at master