Prevent system Keyboard from showing when TextInput is pressed in react native

Question

I want to show my custom keyboard component when an input field is press. I want to prevent the system default keyboard from getting triggered at all.

I have tried dismissing the keyboard on onFocus but this triggers the keyboard and then dismisses the keyboard.

 <TextInput placeholder="type here" onFocus={Keyboard.dismiss} />

I have tired wrapping the TextInput inside TouchableWithoutFeedback but this solution doesn't work.

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()} accessible={false} > <View> <TextInput placeholder="type here" /> </View> </TouchableWithoutFeedback>

Any ideas how can I achieve the desired results?

You don't necessarily have to use a TextInput for that. You could just put a Text inside TouchableWithoutFeedback which triggers the keyboard, save your custom keyboard input in a state or something and then pass the value to Text — VilleKoo
– VilleKoo, Commented Dec 31, 2019 at 15:10
I thought of that idea but Text component won't behave like TextInput. — Akash Sarkar
– Akash Sarkar, Commented Jan 1, 2020 at 9:18

gran33 · Accepted Answer · 2019-12-31 15:46:05Z

You can use showSoftInputOnFocus on Android, see the docs: https://facebook.github.io/react-native/docs/textinput#showsoftinputonfocus

Your case is the same as avoiding showing the keyboard when an external keyboard is connected (on iPad it common).

Karan Mehta · Accepted Answer · 2019-12-31 11:14:16Z

Open AndroidManifest file in (android > app > src > main) folder of your project and then add :

android:windowSoftInputMode="stateHidden"

to your activity tag like this :

<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="stateHidden">

android:windowSoftInputMode="stateHidden" still triggers the keyboard.
You can refer to this link : reactnativecode.com/manually-hide-soft-keyboard

Collectives™ on Stack Overflow

Prevent system Keyboard from showing when TextInput is pressed in react native

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related