react native textInput; trigger event when "Done" is pressed

user_13546029 0
Viewed 3937

I am using textInput to get a users age so on iOS I have the numeric keyboard and the return key type set to "done" so I am using

returnKeyType={'done'}
keyboardType="numeric"

As of right now i am just trying to figure out how to do something when the user hits the "Done" button.

this is my current text input field

<TextInput
    placeholder="Age (Yr)"
    style={AuthScreenStyles.Input}
    autoCapitalize="none"
    autoCorrect={false}
    returnKeyType={'done'}
    keyboardType="numeric"
    ref={register({ name: 'age_year' }, { required: true })}
    onChangeText={(text) => setValue('age_year', text, true)}
    onSubmitEditing={() => {
        console.log('The button has been pressed');
    }}
/>

I am yet to get this console.log() to fire. Anyone know how to capture when the done button is pressed? onSubmitEditing() is not working.

react-native reactjs
2 Answers

In the past I remember it won't work with "multiline={true}"

I put an alert to test, and used the event itself to get the text. Should work :)

An example in expo : https://snack.expo.io/VPv8Axz4B

    <TextInput
    placeholder="Age (Yr)"
    style={AuthScreenStyles.Input}
    autoCapitalize="none"
    autoCorrect={false}
    returnKeyType={'done'}
    keyboardType="numeric"
    ref={register({ name: 'age_year' }, { required: true })}
    onChangeText={(text) => setValue('age_year', text, true)}
    onSubmitEditing = {(event) => (Alert.alert(event.nativeEvent.text))}
    multiline={false}
/>
user_143286620

To be a bit more explicit, @MattV's answer is correct, just note, if you use his example you need to also import {Alert} from 'React Native'

But if you want to use your own function when the Done button is pressed, like the screenshot below.

Then you could just add onSubmitEditing like this onSubmitEditing={() => yourFunctionNameHere()}

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

screenshot here enter image description here

user_86986790
Related