Android Barcode Scanner Module

Question

I have a Barcode Scanner peripheral attached to my phone (see attached image) and cannot seem to find a way to access the readings of the scanner. The phone is reading the barcodes as there is an emulator app within the phone which displays the numeric values of barcodes once scanned.

My question is, how can the Barcode peripheral be accessed? Similar to how the Camera is accessed via the NPM package RNCamera (React Native).

Source - https://www.amazon.com/MUNBYN-Ergonomic-Warehouse-Inventory-Management/dp/B0885ZY3DV

Answer 1

For react-native you can use this library for barcode scanner.

Library link https://github.com/react-native-camera/react-native-camera

Here is the explanation in react-native:-

https://medium.com/@dinukadilshanfernando/implementing-a-barcode-scanner-by-using-react-native-camera-b170de4b7f51

Answer 2

MUNBYN Barcode Scanner Device Integration for React Native

I had an experience with the same brand of barcode scanner and their attached scanner device acts like a keyboard actually. When it scans, it writes some texts and presses Enter automatically. After i realized it then i created a component for myself.

The idea is, you have to focus to an input. Because after scanning, some texts will be placed on somewhere, so the quick way is focus to an input and catch the scanned informations inside the input.
And also after scanning you need to handle "editing end" case, because scanner will press enter automatically. That's all you have to know actually.

import React, { useEffect, useState, useRef } from "react";
import { Center, Spinner, Input, VStack, Button, Stack } from "native-base";

const QuickBarcodeReader = ({ getSingleCode, getArrayOfCodes, endEditingCb, inputStyle }) => {
    const [code, setCode] = useState("");
    const [codeList, setCodesList] = useState([]);
    const inputRef = useRef(null);

    useEffect(() => {
        if (codeList.length > 0) getArrayOfCodes?.(codeList);
    }, [codeList]);

    const endEditing = () => {
        setCodesList(i => [...i, code]);
        inputRef?.current?.focus();
        endEditingCb?.();
        setCode("");
    };

    const textChange = text => {
        setCode(text);
        getSingleCode?.(text);
    };

    return (
        <>
            <Stack w="full">
                <Stack
                    style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "transparent", zIndex: 2 }}
                />
                <Input
                    ref={inputRef}
                    w="full"
                    {...inputStyle}
                    placeholder={codeList[codeList.length - 1]}
                    showSoftInputOnFocus={false}
                    autoFocus
                    value={code}
                    onChangeText={textChange}
                    onEndEditing={endEditing}
                />
            </Stack>
            <Button opacity={0} h="0" w="0" m="0" p="0" />
        </>
    );
};

export default QuickBarcodeReader;

For design purpose i was using native-base, so please ignore the component just focus on how i handle scanner with some functions and hooks.

I successfully created an app for pickers and delivery guys on the market.

Happy scanning, cheers...