CODEWITHSUNDEEP
androidreact-nativeonkeypress
FairyQueen
FairyQueen

Reputation: 2373

Why does the "Enter" key not trigger onKeyPress in React Native?

I have added an onKeyPress event listener to my text input so that when a user clicks done or go or "enter" on the phone keyboard it will call my searchProducts function. I was hoping for an onSubmit type of event listener option but was not able to find anything like that so now I have resorted to simply examining each key that was pressed. When a character key is pressed such as 'j' or 'x' it triggers the onKeyPress event and calls my searchProducts function. However, when I click done with the mouse OR hit the enter key on the keyboard nothing happens. How do I get this to trigger the onKeyPress event listener??

searchProducts = (e) => {
    if (e.nativeEvent.key == "Enter"){
        this.props.searchFunc(this.state.term);
    }
}

<TextInput 
    ref='searchBar'
    style={styles.searchInput} 
    placeholder={placeholder}

    onChangeText={this.searchSuggestions}
    onKeyPress={this.searchProducts.bind(this)}
    underlineColorAndroid="transparent" 
/>

Upvotes: 7

Views: 18990

Answers (2)

M Reza
M Reza

Reputation: 19698

You can use onSubmitEditing which is:

Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified.

It will be called after pressing 'done' button on keyboard.

Upvotes: 26

bennyh
bennyh

Reputation: 29

onKeyPress should be triggered when you hit return key, check if you have another event in this page that cancel this one from being triggered if yes use

event.stopPropagation()

Upvotes: -1

Related Questions