[React Native]Hide Text Input default Keyboard

Question

I have created a customized native keyboard component for my application. Now I want to render that keyboard instead of default one. How can I do this? I tried

<TextInput
              value={clientDetails.city}
              onFocus={() => onFocus('city')}
              onChangeText={value => onStateChange('city', value)}
              placeholderTextColor={colors.placeholderColor}
              placeholder={
                constants.sellerClosingCosts.clientDetailsCityPlaceholder
              }
              onEndEditing={event =>
                onEndEditing('city', event.nativeEvent.text)
              }
              style={styles.textInput}
            />

But even when I am not passing any prop value for keyboardType, the default one is opening.
In short
How can I stop keyboard from rendering while editing text input ?

Rohit Aggarwal · Accepted Answer · 2020-12-23 05:22:03Z

1

Set showSoftInputOnFocus false to your TextInput. This disables the device keyboard but the onFocus event still keeps listening and you can call your keyboard there.

<TextInput
    showSoftInputOnFocus={false}
    onFocus={() => <CALL_YOUR_KEYBOARD>}
/>

edited Dec 23, 2020 at 5:22

Rohit Aggarwal

1,2182 gold badges16 silver badges38 bronze badges

answered Dec 14, 2020 at 12:06

Leri Gogsadze

3,0932 gold badges20 silver badges27 bronze badges

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

10 Comments

Rohit Aggarwal Over a year ago

Isn't showSoftInputOnFocus used to show or hide soft keyboard? This will still show default keyboard.

Leri Gogsadze Over a year ago

Are you using iOS or Android?

Leri Gogsadze Over a year ago

@Rohit The second solution is that you can import Keyboard from react-native and call Keyboard.dismiss() on focus event. But this will hide the blinking cursor also.

Rohit Aggarwal Over a year ago

I am testing on Android, but it will be used for iOS too.

Leri Gogsadze Over a year ago

Did you try to dismiss it on focus?

|

Collectives™ on Stack Overflow

[React Native]Hide Text Input default Keyboard

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related