javascript - How to capture physical barcode scanner's scanned input text inside a screen in React Native? - Stack Overf

admin管理员组

文章数量:1022989

I am working on an application using React Native version 0.68.2.

I would like to detect a barcode scanning event from a physical scanner hardware available in the mobile itself (it is a handheld scanner).

The application must be able to detect the scanned input without focusing on any visible TextInput.

How to do such task?

I am working on an application using React Native version 0.68.2.

I would like to detect a barcode scanning event from a physical scanner hardware available in the mobile itself (it is a handheld scanner).

The application must be able to detect the scanned input without focusing on any visible TextInput.

How to do such task?

• javascript
• typescript
• react-native
• mobile
• barcode-scanner

Share Improve this question Follow asked Aug 5, 2022 at 11:01 holydragonholydragon 6,73877 gold badges4545 silver badges7575 bronze badges 3

• Do you want a scanner like expo app. or you want to attach a connect a device to your mobile phone and then detect the bar code reader – Engr.Aftab Ufaq Commented Nov 2, 2022 at 7:38
• @Engr.AftabUfaq The mobile device itself already contains the scanner hardware as part of the product from the factory. It normally scans the barcode and writes whatever it reads to an input field that is currently focused. I just want a solution to be able to capture the scanned text without focusing on any input; so that I can process the data from that event and do other tasks when the barcode is scanned. – holydragon Commented Nov 2, 2022 at 7:43
• 1 there are multiple solution for this. first you can create a textinput field that is always focused but display is none. the second solution for this is to add some event listener and store the scanned text into a state varaible. if you can share a minimal git repos of your work so i will try to find out some souolution for that. – Engr.Aftab Ufaq Commented Nov 2, 2022 at 7:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7 +25

It seems like there's no window.onkeypress events available like you'd use in a normal webapp. But, could one option be to automatically focus an invisible/transparent/hidden TextInput when no other TextInputs are focused?

import React, { useEffect } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
    const invisibleRef = React.useRef(null);

    useEffect(() => {
        invisibleRef.current.focus();
    }, []);

    const focusInvisibleInput = (e) => {
        e.preventDefault();
        if (invisibleRef.current) {
            invisibleRef.current.focus();
        }
    };

    return (
        <View style={styles.container} onTouchStart={focusInvisibleInput}>
            <TextInput
                ref={invisibleRef}
                autoFocus={true}
                autoCorrect={false}
                autoComplete={false}
                style={{ opacity: 0 }}
                onChangeText={(text) => console.log("hidden", text)}
            />

            <TextInput
                style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
                placeholder="Type something here"
                onChangeText={(text) => console.log("visible", text)}
            />

            <Text>A nice react native app!</Text>

            <TextInput
                style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
                placeholder="Type some thing else here!"
                onChangeText={(text) => console.log("visible", text)}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

And after this, you may want to add a generic input handler that times the speed of the input of the text, to figure out if it's a scan, rather than manual text input. (if you get 20 characters within 50ms, you can be pretty sure it's a scan, right?)

There's probably tons of other ways of doing this way better, but none that I could find right now.

Hope that helps!

I am working on an application using React Native version 0.68.2.

I would like to detect a barcode scanning event from a physical scanner hardware available in the mobile itself (it is a handheld scanner).

The application must be able to detect the scanned input without focusing on any visible TextInput.

How to do such task?

I am working on an application using React Native version 0.68.2.

I would like to detect a barcode scanning event from a physical scanner hardware available in the mobile itself (it is a handheld scanner).

The application must be able to detect the scanned input without focusing on any visible TextInput.

How to do such task?

• javascript
• typescript
• react-native
• mobile
• barcode-scanner

Share Improve this question Follow asked Aug 5, 2022 at 11:01 holydragonholydragon 6,73877 gold badges4545 silver badges7575 bronze badges 3

• Do you want a scanner like expo app. or you want to attach a connect a device to your mobile phone and then detect the bar code reader – Engr.Aftab Ufaq Commented Nov 2, 2022 at 7:38
• @Engr.AftabUfaq The mobile device itself already contains the scanner hardware as part of the product from the factory. It normally scans the barcode and writes whatever it reads to an input field that is currently focused. I just want a solution to be able to capture the scanned text without focusing on any input; so that I can process the data from that event and do other tasks when the barcode is scanned. – holydragon Commented Nov 2, 2022 at 7:43
• 1 there are multiple solution for this. first you can create a textinput field that is always focused but display is none. the second solution for this is to add some event listener and store the scanned text into a state varaible. if you can share a minimal git repos of your work so i will try to find out some souolution for that. – Engr.Aftab Ufaq Commented Nov 2, 2022 at 7:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7 +25

It seems like there's no window.onkeypress events available like you'd use in a normal webapp. But, could one option be to automatically focus an invisible/transparent/hidden TextInput when no other TextInputs are focused?

import React, { useEffect } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
    const invisibleRef = React.useRef(null);

    useEffect(() => {
        invisibleRef.current.focus();
    }, []);

    const focusInvisibleInput = (e) => {
        e.preventDefault();
        if (invisibleRef.current) {
            invisibleRef.current.focus();
        }
    };

    return (
        <View style={styles.container} onTouchStart={focusInvisibleInput}>
            <TextInput
                ref={invisibleRef}
                autoFocus={true}
                autoCorrect={false}
                autoComplete={false}
                style={{ opacity: 0 }}
                onChangeText={(text) => console.log("hidden", text)}
            />

            <TextInput
                style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
                placeholder="Type something here"
                onChangeText={(text) => console.log("visible", text)}
            />

            <Text>A nice react native app!</Text>

            <TextInput
                style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
                placeholder="Type some thing else here!"
                onChangeText={(text) => console.log("visible", text)}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

And after this, you may want to add a generic input handler that times the speed of the input of the text, to figure out if it's a scan, rather than manual text input. (if you get 20 characters within 50ms, you can be pretty sure it's a scan, right?)

There's probably tons of other ways of doing this way better, but none that I could find right now.

Hope that helps!

本文标签：