Dismiss keyboard in multiline TextInput in React native

Question

When the user presses the Return key in a multiline TextInput, a new line is created and the keyboard continues to be visible. How should the keybo

Answer 1

To complete my comment about returnKeyType, you also need to set blurOnSubmit={true} which will trigger onSubmitEditing event handler too when Done is pressed.

See example https://rnplay.org/apps/0HIrmw for details.

Answer 2

TextInput has a blurOnSubmit prop; when set to true, the return key dismisses the keyboard.

However currently the prop does not work on Android. I've posted an issue on the subject: https://github.com/facebook/react-native/issues/8778

Answer 3

Hope it helps other , as wasted time on reading many github threads and issues..

By doing below code , you keyboard show return key you wanted for example "done", "go" and also dismiss the keyboard when you press return key in my case done key while using multi line seamlessly.

import {Textinput, ScrollView, Keyboard} from 'react-native';

// ...code 

 <TextInput
     keyboardType="default"
     returnKeyType="done"
     multiline={true}
     blurOnSubmit={true}
     onSubmitEditing={()=>{Keyboard.dismiss()}}
  />

Answer 4

Banged my head against this for a few hours and after fiddling around and some dumb luck finally figured out how to make a multiline TextInput dismiss by just touching outside the text box. Little Example for ya'll hope that someone else finds this useful because the docs do not make it all apparent that you can get multilines to dismiss easily...

import React, { Component}  from 'react'`
import {
keyboardAvoidingView,
Keyboard,
StatusBar,
StyleSheet,
TextInput,
View,
} from 'react-native';

class App extends Component {
constructor(props){
super(props)
this.state ={
        behavior: 'position',
}
this._keyboardDismiss =  this._keyboardDismiss.bind(this);
}
componentWillMount() {
this.keyboardDidHideListener = 
                  Keyboard
                 .addListener('keyboardDidHide',this._keyboardDidHide);                                                         
              }

componentWillUnmount(){
this.keyboardDidHideListener.remove();
}

_keyboardDidHide() {
Keyboard.dismiss();
}

render() {

return (
    <KeyboardAvoidingView 
      style{{flex:1}}
      behavior={this.state.behavior}
    >
    <TouchableOpacity
      onPress={this._keyboardDidHide}
    >
    <View>
      <TextInput
          style={ 
          color: '#000',
          paddingLeft: 15,
          paddingTop: 10,
          fontSize: 18,t}
          multiline={true}
          textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
          placeholder="Share your Success..."
          value={this.state.text}
          underlineColorAndroid="transparent"
          returnKeyType={'default'}
       />
    </View>
    </TouchableOpacity>

    </KeyboardAvoidingView>
  );
 }
}

Answer 5

This is a simplified version of austin's very helpful answer above.

If you convert the View you have for your screen/component into a TouchableOpacity with activeOpacity={1} (this prevents any fading or opacity effects), you can then pass it:

onPress={() => Keyboard.dismiss()}

Make sure you've imported TouchableOpacity and Keyboard from 'react-native' and you're good.