React Native - Is there a way to hide the keyboard completely?

5.2k Views Asked by At

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?

2

There are 2 best solutions below

1
CampbellMG On

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>
0
delfio francisco On

use props of textInput 'showSoftInputOnFocus' example:

<TextInput showSoftInputOnFocus={false} />

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