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