Search code examples
react-nativekeyboardtextinput

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

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?

Solution

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