React Native Vision Camera Frame Processor Plugin of Dynamsoft Barcode Reader.

If you only need to scan barcodes and do not want to use Vision Camera, you can use Dynamsoft Capture Vision.

npm install vision-camera-dynamsoft-barcode-reader

make sure you correctly setup react-native-reanimated and add this to your babel.config.js

[
  'react-native-reanimated/plugin',
  {
    globals: ['__decode'],
  },
]

-keep class com.swmansion.reanimated.** { *; }
-keep class com.facebook.react.turbomodule.** { *; }
-keep class com.dynamsoft.dbr.** { *; }
-keep class androidx.camera.core.** {*;}

1. Scan barcodes from the camera preview.

   import * as React from 'react';
   import { StyleSheet, Text } from 'react-native';
   import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
   import { DBRConfig, decode, TextResult } from 'vision-camera-dynamsoft-barcode-reader';
   import * as REA from 'react-native-reanimated';
   
   export default function App() {
     const [hasPermission, setHasPermission] = React.useState(false);
     const [barcodeResults, setBarcodeResults] = React.useState([] as TextResult[]);
     const devices = useCameraDevices();
     const device = devices.back;
     const frameProcessor = useFrameProcessor((frame) => {
       'worklet'
       const config:DBRConfig = {};
       config.template="{\"ImageParameter\":{\"BarcodeFormatIds\":[\"BF_QR_CODE\"],\"Description\":\"\",\"Name\":\"Settings\"},\"Version\":\"3.0\"}"; //scan qrcode only
   
       const results:TextResult[] = decode(frame,config)
       REA.runOnJS(setBarcodeResults)(results);
     }, [])
   
     React.useEffect(() => {
       (async () => {
         const status = await Camera.requestCameraPermission();
         setHasPermission(status === 'authorized');
       })();
     }, []);
   
     return (
       device != null &&
       hasPermission && (
         <>
           <Camera
             style={StyleSheet.absoluteFill}
             device={device}
             isActive={true}
             frameProcessor={frameProcessor}
             frameProcessorFps={5}
           />
           {barcodeResults.map((barcode, idx) => (
             <Text key={idx} style={styles.barcodeText}>
               {barcode.barcodeFormat +": "+ barcode.barcodeText}
             </Text>
           ))}
         </>
       )
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
     },
     barcodeText: {
       fontSize: 20,
       color: 'white',
       fontWeight: 'bold',
     },
   });

2. Scan barcodes from a base64-encoded static image.

   let results = await decodeBase64(base64);

3. License initialization (apply for a trial license).

   await initLicense("your license");

TextResult:

 TextResult{
    barcodeText:string;
    barcodeFormat:string;
    barcodeBytesBase64:string;
    x1:number;
    x2:number;
    x3:number;
    x4:number;
    y1:number;
    y2:number;
    y3:number;
    y4:number;
}

Configuration:

DBRConfig{
  template?:string;
  license?:string;
  isFront?:boolean;
  rotateImage?:boolean;
}

isFront and rotateImage are Android-only. Since the natural camera sensor's orientation in Android is landscape, the camera image may be rotated for preview while the raw image we get is still not rotated. If we enable rotateImage, the plugin will rotate the image automatically to match the camera preview. If it is disabled, the plugin will rotate the returned coordinates instead of the image which may have a slight performance gain. isFront is needed for rotating the coordinates since the image of front camera is mirrored.

• Android
• iOS

• Code 11
• Code 39
• Code 93
• Code 128
• Codabar
• EAN-8
• EAN-13
• UPC-A
• UPC-E
• Interleaved 2 of 5 (ITF)
• Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5)
• ITF-14
• QRCode
• DataMatrix
• PDF417
• GS1 DataBar
• Maxicode
• Micro PDF417
• Micro QR
• PatchCode
• GS1 Composite
• Postal Code
• Dot Code

Let's create a new react native project and use the plugin.

1. Create a new project: npx react-native init MyTestApp
2. Install required packages: npm install vision-camera-dynamsoft-barcode-reader react-native-reanimated react-native-vision-camera. Update relevant files following the react-native-reanimated installation guide. You can use jsc instead of hermes
3. Update the babel.config.js file
4. Add camera permission for both Android and iOS
5. Update App.tsx to use the camera and the plugin
6. For Android, register the plugin in MainApplication.java following the guide
7. Run the project: npx react-native run-andoid/run-ios

You can check out the example for more details.

• Build a React Native Vision Camera Frame Processor Plugin to Scan Barcodes for Android
• Build a React Native Vision Camera Frame Processor Plugin to Scan Barcodes for iOS
• Build a React Native QR Code Scanner using Vision Camera

For versions >= 0.4.0, Dynamsoft Barcode Reader 9.x is used.

For versions < 0.4.0, Dynamsoft Barcode Reader 8.x is used.

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT