[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 ?

Answer 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>}
/>

• Rohit Aggarwal: Isn't showSoftInputOnFocus used to show or hide soft keyboard? This will still show default keyboard.
• Leri Gogsadze: Are you using iOS or Android?
• Leri Gogsadze: @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: I am testing on Android, but it will be used for iOS too.
• Leri Gogsadze: Did you try to dismiss it on focus?