I'm developing an inventory system for my father's pany and on of its requisites is to be able to use an external Barcode/QR Code scanner.

I've developed everything using the camera as well, but I really need to use the scanner whithout showing the keyboard.

Do any of you guys know if it's possible? if not, can it be done in any other way?

I'm developing an inventory system for my father's pany and on of its requisites is to be able to use an external Barcode/QR Code scanner.

I've developed everything using the camera as well, but I really need to use the scanner whithout showing the keyboard.

Do any of you guys know if it's possible? if not, can it be done in any other way?

• javascript
• android
• ios
• react-native
• qr-code

• I have made a little search about this and seen that there is still not a solution for this on react native side. So I think you might need to right some native code to achieve that. – Bora Sumer Commented Jan 8, 2020 at 5:01
• This may be what you are after: stackoverflow./questions/49199745/… – CampbellMG Commented Jan 8, 2020 at 5:35
• what is the purpose of using the TextInput here? – Gautam Shrivastav Commented Jan 8, 2020 at 5:49
• I don't find any requrement of using TextInput if not at all you need user interaction. – Ravi Commented Jan 8, 2020 at 12:11
• 1 @Ravi The scanner works as an axternal keyboard, it writes the content and presses enter, thats why i nees a TextInput, so i can register the data – Gustavo Martins do Santos Commented Jan 8, 2020 at 14:45

2 Answers 2

There is a property called showSoftInputOnFocus in newer react-native versions. Setting this to false keeps the keyboard hidden.

<TextInput showSoftInputOnFocus={false} autoFocus={true}..../>

Working for me on v0.60.0

Wrap TouchableOpacity with ScrollView without any props which enables tapto open keyboard work. This Works both on ios and android now!

const [openKeyboard, setOpenKeyboard] = useState(autoFocus);

const onPressInput = useCallback(() => {
    inputRef.current.focus();
    setOpenKeyboard(true)
}, [inputRef]);

  <ScrollView
    >
        <TouchableOpacity
            activeOpacity={1}
            style={[styles.container, style]}
            onPress={onPressInput}

        >
            {renderInputBox()}
            <View style={{ width: 0, height: 0 }}>
                <TextInput
                    keyboardType="numeric"
                    returnKeyType="done"
                    autoFocus={openKeyboard}
                    maxLength={codeLength}
                    ref={inputRef}
                />
            </View>
        </TouchableOpacity>
    </ScrollView>