3

I'm developing an app for a scanning device which does not use the virtual keyboard at all. So currently, I only show the keyboard when the user want to open it (by tapping the keyboard icon)

Virtual Keyboard opened

And tab again to turn the virtual keyboard off.

Virtual Keyboard closed .

However, when I type the Input by hard keyboard (from PC / scanning device) or tap the input, the virtual keyboard still showing up and there is no way to prevent that. I can catch the event and dismiss the virtual keyboard by:

onKeyPress={() => {
  Keyboard.dismiss();
}}

But it still create an annoying opening - closing virtual keyboard animation. Is there anyway to stop this animation or hide the virtual keyboard completely?

hrtlkr29
  • 383
  • 1
  • 7
  • 21
  • Have you tested it on a device with the physical keyboard? IIRC the android OS handles this automatically when a physical keyboard is present – LonelyCpp May 26 '20 at 05:45
  • try enabling the hardware keyboard in your emulator. [stackoverflow](https://stackoverflow.com/questions/27136585/how-enable-physical-keyboard-on-emulator-in-android-studio-used-to-work) – LonelyCpp May 26 '20 at 05:48
  • I have not tested with a real device with physical keyboard yet. I will try right away, thank you! – hrtlkr29 May 26 '20 at 07:26
  • Oh, I've already enable the hardware keyboard. If i type with the hardware keyboard, the Virtual Keyboard still show up!!! – hrtlkr29 May 26 '20 at 07:30

2 Answers2

1

This is a known limitation of React Native. You can try disabling pointer events as follows but I am not sure that will prevent the physical keyboard from creating events and you will lose text scrolling: 

    <View pointerEvents="none">
      <Input
        value={String(value)}
        placeholder={placeholder}
      />
    </View>
CampbellMG
  • 2,090
  • 1
  • 18
  • 27
  • 1
    Unfortunately the virtual keyboard still appear after i set pointerEvents. Thank you for your suggestion anyway xD – hrtlkr29 May 26 '20 at 07:24
1

use props of textInput 'showSoftInputOnFocus' example:

<TextInput showSoftInputOnFocus={false} />

documentation here https://github.com/facebook/react-native/commit/d88e4701fc46b028861ddcfa3e6ffb141b3ede3d

delfio francisco
  • 19
  • 1