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 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 https://barkoder.com, 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

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
BarcodeScanner.js: Implement the barcode scanner functionality:

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

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

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

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

    setIsScanning(true);
    barkoder.startScanning((result) => {
      setScannedResult({
        textualData: result.textualData,
        type: result.barcodeTypeName,
        thumbnailImage: "data:image/jpeg;base64," + result.resultThumbnailAsBase64,
      });
      setIsScanning(false);
    }, (error) => {
      console.error('Scanning error:', error);
      Alert.alert('Error', 'Scanning failed');
      setIsScanning(false);
    });
  };

  const stopScanning = () => {
    if (barkoder) {
      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={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>
          <Image
            style={styles.resultImage}
            source={{ uri: scannedResult.thumbnailImage }}
          />
        </View>
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    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.js 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

Enable VIN