React-Native TextInput with focus but without keyboard showing

Question

I'm developing an inventory system for my father's company 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 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, Jan 08 '20 at 05:01
This may be what you are after: https://stackoverflow.com/questions/49199745/how-do-i-listen-to-keyboard-input-in-react-native — CampbellMG, Jan 08 '20 at 05:35
I don't find any requrement of using TextInput if not at all you need user interaction. — Ravi, Jan 08 '20 at 12:11
@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, Jan 08 '20 at 14:45
If scanner is writing I believe you will be getting data in string format, in that case you can directly have simple text/label. — Ravi, Jan 08 '20 at 15:57
@GustavoMartinsdoSantos Did you find any alternative solution to this? Facing the exactly same issue — Necmettin Sargın, Mar 29 '21 at 12:33

score 1 · Answer 1 · answered Feb 11 '20 at 10:54

1

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

answered Feb 11 '20 at 10:54

FLash

696
9
27

score 0 · Answer 2 · answered Mar 29 '22 at 11:58

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>

React-Native TextInput with focus but without keyboard showing

2 Answers2

Linked