I have a TextInput
which I have enabled multiline
as true. Thing is the Keyboard won't hide after Return is pressed. It goes to a new line. So I was hoping to use react-native-dismiss-keyboard. To exploit this I need to identify the Return key action. How to do this?
<TextInput
style={styles.additionalTextInput}
multiline={true}
autoCapitalize="sentences"
autoCorrect={true}
onChangeText={(text) => this.setState({text})}
keyboardType="default"
returnKeyType="done"
onKeyPress={(keyPress) => console.log(keyPress)}
placeholder="Enter text here..."
/>
To detect the keycode or the key which the user has pressed from his keyboard then React has a predefined onKeyPress event for this. Although it is not fired for all keys like ALT, CTRL, SHIFT, ESC but it can detect other keys properly.
What I used is onSubmitEditing
props. e.g.
<TextInput style={[styles.textInput]}
placeholder='搜索'
placeholderTextColor='#bbb'
onChange={(event) => {
this.searchChange(event.nativeEvent.text)
}}
returnKeyType='search'
autoFocus={true}
value={ this.props.searchName }
selectionColor={colors.orangeColor}
onSubmitEditing={this.searchSubmit}
clearButtonMode="while-editing"
/>
Okay, found the solution.
<TextInput
style={styles.additionalTextInput}
multiline={true}
autoCapitalize="sentences"
autoCorrect={true}
onChangeText={(orderInstructions) => this.setState({orderInstructions})}
keyboardType="default"
returnKeyType="done"
onKeyPress={this.handleKeyDown}
placeholder="Enter text here..."
/>
handleKeyDown: function(e) {
if(e.nativeEvent.key == "Enter"){
dismissKeyboard();
}
},
The method dismissKeyboard is from react-native-dismiss-keyboard.
This works perfectly for me.
In case you are using with multiline={true}
, the return
key would also add the newline in the text before calling onSubmitEditing
. Also, the keyboard won't get dismissed automatically making you import { Keyboard } from 'react-native'
and calling Keyboard.dismiss()
in onSubmitEditing.
An easier solution would be to use the blurOnSubmit={true}
to automatically dismiss the keyboard and prevent return
key from registering as newline
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With