React Native: Capture Text Input without a TextInput - Stack Overflow

I have a app on an Android Scanner which can accept scanned input as if it were user typed. No keyboard required. We're wanting to be able to listen for that input without a TextInput similar to how React Web would work with onKeyDown functionality. Is such a thing possible in Reach Native?

Closest thing I've found but it seems to be no longer maintained and brittle, so I'm hesitant to put this in and hack it to get it working.

I have a app on an Android Scanner which can accept scanned input as if it were user typed. No keyboard required. We're wanting to be able to listen for that input without a TextInput similar to how React Web would work with onKeyDown functionality. Is such a thing possible in Reach Native?

Closest thing I've found https://www.npmjs.com/package/react-native-keyevent but it seems to be no longer maintained and brittle, so I'm hesitant to put this in and hack it to get it working.

• react-native
• react-native-textinput

Share Improve this question Follow asked Jan 22 at 22:40 Zachery StuderZachery Studer 3144 bronze badges 2

• What do you mean by android scanner? Are you talking about a QR code scanner? – PhantomSpooks Commented Jan 22 at 23:59
• In our case a Zebra MC9300 or a Honeywell CK65. The are android OS hand scanners that have scanners built into the hardware. They can scan both QR and Barcodes and pass that directly into a TextInput or any other field as if it was a user typing it directly. – Zachery Studer Commented Jan 23 at 18:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

1. Using a WebView to Capture Input If you're embedding a web-based form or input field, you can use the WebView component to render HTML content and capture input from there. You can communicate between the WebView and your React Native app using the postMessage API.

Example:

javascript

import React, { useRef } from 'react'; import { WebView } from 'react-native-webview';

const App = () => {   const webViewRef = useRef(null);

  const handleMessage = (event) => {
    const data = event.nativeEvent.data;
    console.log('Captured input:', data);   };

  return (
    <WebView
      ref={webViewRef}
      source={{ html: '<input type="text" id="inputField" />' }}
      onMessage={handleMessage}
      injectedJavaScript={`
        document.getElementById('inputField').addEventListener('input', (e) => {
          window.ReactNativeWebView.postMessage(e.target.value);
        });
      `}
    />   ); };

export default App;

2. Simulating Text Input with Buttons or Gestures If you don't want to use a traditional TextInput, you can create a custom input method using buttons, gestures, or other UI elements. For example, you could create a numeric keypad or a custom keyboard.

Example:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  const [input, setInput] = useState('');

  const handleButtonPress = (value) => {
    setInput((prev) => prev + value);
  };

  return (
    <View>
      <Text>Input: {input}</Text>
      <View>
        <Button title="1" onPress={() => handleButtonPress('1')} />
        <Button title="2" onPress={() => handleButtonPress('2')} />
        <Button title="3" onPress={() => handleButtonPress('3')} />
      </View>
    </View>
  );
};

export default App;

4. Using Clipboard or External Input You can use the Clipboard API to paste text or capture input from external sources like barcode scanners, QR code readers, or voice-to-text tools.

javascript

import React, { useState } from 'react';
import { View, Text, Button, Clipboard } from 'react-native';

const App = () => {
  const [input, setInput] = useState('');

  const handlePaste = async () => {
    const text = await Clipboard.getString();
    setInput(text);
  };

  return (
    <View>
      <Text>Input: {input}</Text>
      <Button title="Paste from Clipboard" onPress={handlePaste} />
    </View>
  );
};

export default App;

5. Using Native Modules If none of the above solutions work for your use case, you can create a custom native module to handle text input in a way that suits your needs. This requires knowledge of native development (Java/Kotlin for Android, Objective-C/Swift for iOS).