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

6

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).

answered Dec 31, 2019 at 15:46

gran33

13k10 gold badges52 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akash Sarkar Over a year ago

This is exactly what I needed. Thanks a lot.

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

5

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">

answered Dec 31, 2019 at 11:14

Karan Mehta

1,53116 silver badges36 bronze badges

2 Comments

Akash Sarkar Over a year ago

android:windowSoftInputMode="stateHidden" still triggers the keyboard.

Karan Mehta Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related