Search code examples
react-nativetextinput

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

Solution

  • 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') 
                    }
                }}
            />