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 keyboard be dismissed for multiline TextInput in React native?

I did some research. I found that clicking on the View outside the TextInput does not blur the TextInput, which is causing the keyboard to remain visible.

<View style={styles.container}>   <TextInput     placeholder="To"     style={styles.input}     value={this.state.to}     onChangeText={(to) => this.setState({to})}   />   <TextInput     placeholder="Text"     style={styles.textarea}     multiline={true}     numberOfLines={4}     value={this.state.text}     onChangeText={(text) => this.setState({text})}   /> </View> 

For ScrollView, there is a prop - keyboardShouldPersistTaps which causes the TextInput to blur. Is there any equivalent of that for View? I want the multiline TextInput to blur so that the keyboard gets dismissed.

Answer 1

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 2

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