How to add 'Done' button on the number keypad using react-native

Question

i am using number-pad keyboard in react-native, i want to hide the keyboard when click on done button,for that i want to add done button above the keyboard, is there any possibility like IOS apps to hide the keyboard, Any help much appreciated

Answer 1

I'm not sure if this is exactly what you want, but you can add a 'done' button to the keyboard using the prop returnKeyType.

E.g: returnKeyType={ 'done' }

More info here https://facebook.github.io/react-native/docs/textinput.html#returnkeytype

Answer 2

Using React Native v.63 in 2021

• If you just use the returnKeyType='done' it will automatically hide the keyboard
• Notice you could also use your own function with onSubmitEditing={() => yourFunctionNameHere()}

This worked for me =>

                <TextInput
                  style={styles.textBox}
                  maxLength={5}
                  placeholder="Enter Zip Code"
                  placeholderTextColor={'#6D7376'}
                  autoCompleteType="postal-code"
                  keyboardType="number-pad"
                  returnKeyType="done"
                  onChangeText={text => setZip(text)}
                  onSubmitEditing={() => yourFunctionNameHere()}
                />

here is the direct documentation https://reactnative.dev/docs/textinput#returnkeytype