CODEWITHSUNDEEP
react-nativetextinput
Syed
Syed

Reputation: 530

React Native: e.nativeEvent.key == 'Enter' doesn't work

this question is very similar to this, however, for some reason every key tends to work except the return key (Enter key). what i want is to proceed the user to the next page if password is correct. any help would be really appreciated

//Code

        <TextInput
                style={styles.txtfield}
                placeholder="Password"
                placeholderTextColor = 'rgba(249, 129, 37, 1)'
                secureTextEntry={true}
                onChangeText={ password => this.setState({ password })}
                keyboardType="default"
                returnKeyType="next"                        
                onKeyPress={ (event) => {
                    if(event.nativeEvent.key == "Enter"){
                        alert(event.nativeEvent.key) // doesn't output anything nor execute the signin function
                        // this.signIn();
                    } 
                    else {
                        alert('Something else Pressed') // show a valid alert with the key info
                    }
                }}
            />

Upvotes: 8

Views: 10228

Answers (1)

Patel Dhara
Patel Dhara

Reputation: 886

you will get the onPress event for Enter key only if there is multiline TextInput.

For single line TextInput, you will get 'Enter' or 'Submit' keypress event in the onSubmitEditing method.

  <TextInput
            style={styles.txtfield}
            placeholder="Password"
            placeholderTextColor = 'rgba(249, 129, 37, 1)'
            secureTextEntry={true}
            onChangeText={ password => this.setState({ password })}
            keyboardType="default"
            returnKeyType="next"
            onSubmitEditing={()=>{
                alert('on submit') // called only when multiline is false
            }}                        
            onKeyPress={ (event) => {
                if(event.nativeEvent.key == "Enter"){
                    alert(event.nativeEvent.key) //called when multiline is true
                    // this.signIn();
                } 
                else {
                    alert('Something else Pressed') 
                }
            }}
        />

Upvotes: 15

Related Questions