General React Native Example

Requirements: #

Before starting, ensure that your development environment is set up for React Native:

Install Node.js and npm.
Install React Native CLI (optional but recommended for native build).
Set up Android Studio and Xcode (for iOS development).

Create a New React Native Project #

Open your terminal and create a new React Native project:

                npx @react-native-community/cli@latest init BarkoderApp
cd BarkoderApp

Add the barkoder-react-native Package #

To add the barkoder-react-native package to your project, you have two options. You can either use the barkoder-react-native package from npm or from a local path.

To use the package from npm run this command:

                npm install barkoder-react-native

if you are using YARN run this command:

                yarn add barkoder-react-native

If you prefer to use a local package, download the package from the barKoder Developer Portal, unzip the archive and add the package with setting the package path

                npm install <path to barkoder-react-native package>

if you are using npm run this command:

                npm install <path to barkoder-react-native package>

if you are using YARN run this command:

                yarn add <path to barkoder-react-native package>

If you are having trouble with iOS, try to reinstall the dependencies by running pod install command inside ios folder:

                cd ios
pod install
cd ..

Add package #

Install the barkoder-react-native package:

                npm install barkoder-react-native

Import the barkoder-react-native package in your project with:

                import { Barkoder, BarkoderView } from 'barkoder-react-native';

Implement the Barcode Scanner Component #

Create a New Component: Create a file named
Create src/BarcodeScanner.tsx and add the following code:

                import React, { useState } from 'react';
import { SafeAreaView, View, Text, Button, StyleSheet, Image, Alert } from 'react-native';
import { Barkoder, BarkoderView } from 'barkoder-react-native';

type ScanResult = {
  textualData: string;
  type: string;
  thumbnailImage: string | null;
};

const BarcodeScanner = () => {
  const [barkoder, setBarkoder] = useState<Barkoder | null>(null);
  const [scannedResult, setScannedResult] = useState<ScanResult | null>(null);
  const [isScanning, setIsScanning] = useState(false);

  const onBarkoderViewCreated = (_barkoder: Barkoder) => {
    try {
      _barkoder.setBarcodeTypeEnabled(Barkoder.BarcodeType.qr, true);
      _barkoder.setRegionOfInterestVisible(true);
      _barkoder.setZoomFactor(2.0);
      _barkoder.setBarcodeThumbnailOnResultEnabled(true);
      _barkoder.setCloseSessionOnResultEnabled(true);
      setBarkoder(_barkoder);
    } catch (error) {
      console.error('Error initializing Barkoder:', error);
      Alert.alert('Error', 'Failed to initialize Barkoder');
    }
  };

  const startScanning = () => {
    if (!barkoder || isScanning) return;

    setScannedResult(null);
    setIsScanning(true);
    barkoder.startScanning((result) => {
      const decoded = result.decoderResults[0];
      if (!decoded) return;

      setScannedResult({
        textualData: decoded.textualData,
        type: decoded.barcodeTypeName,
        thumbnailImage: result.decoderResults.length === 1
          ? result.resultThumbnailsAsBase64?.[0] ?? null
          : null,
      });
      setIsScanning(false);
    });
  };

  const stopScanning = () => {
    if (!barkoder) return;

    barkoder.stopScanning();
    setIsScanning(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      <BarkoderView
        style={styles.barkoderView}
        licenseKey="ADD_YOUR_LICENSE_KEY_HERE"
        onBarkoderViewCreated={onBarkoderViewCreated}
      />
      <View style={styles.btnContainer}>
        <Button title="Start Scanning" onPress={startScanning} disabled={!barkoder || isScanning} />
        <Button title="Stop Scanning" onPress={stopScanning} disabled={!isScanning} />
      </View>
      {scannedResult && (
        <View style={styles.resultContainer}>
          <Text>Result: {scannedResult.textualData}</Text>
          <Text>Type: {scannedResult.type}</Text>
          {scannedResult.thumbnailImage && (
            <Image style={styles.resultImage} source={{ uri: scannedResult.thumbnailImage }} />
          )}
        </View>
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' },
  barkoderView: { width: '100%', height: 400 },
  btnContainer: { marginTop: 20 },
  resultContainer: { marginTop: 20, alignItems: 'center' },
  resultImage: { width: 200, height: 200, marginTop: 10, borderRadius: 5 },
});

export default BarcodeScanner;

Use the BarcodeScanner Component in Your App #

Replace the content in App.tsx to use the BarcodeScanner component:

                import React from 'react';
import BarcodeScanner from './src/BarcodeScanner';

const App = () => {
  return <BarcodeScanner />;
};

export default App;

Run the React Native Application #

For Android:

                npx react-native run-android

For iOS:

                npx react-native run-ios

How to enable South African Driving License parser

Enable MultiScan