Identify Return Key action in React Native

IosReact Native

Ios Problem Overview


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

Ios Solutions


Solution 1 - Ios

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

Solution 2 - Ios

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.

Solution 3 - Ios

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNimila HiranyaView Question on Stackoverflow
Solution 1 - IosBruce LeeView Answer on Stackoverflow
Solution 2 - IosNimila HiranyaView Answer on Stackoverflow
Solution 3 - IosshivanggView Answer on Stackoverflow