How to prevent new line when enter is pressed in react-native

Question

for a multiline textinput, when user press enter key, I want to achieve the goals:

• keep textinput focus when user press enter key.
• prevent add a new line.

i have't see any props what can do it, anyone has ideas?

react-native version is 0.28+, need supports ios and android.

Answer 1

In TextInput passing the props

blurOnSubmit = {true} and then in onBlur props focus the textInput field using ref,these two will prevents from entering a new line and the focus is retained on the text input field. If you want only to prevent the user from entering a newline blurOnSubmit = {true} is sufficient

The drawback here is you can see keyboard hides for a moment then pops up. Its bit like a hack. Hope someone can come up with another or improvise this

Answer 2

You can setup your TextInput with multiline and blurOnSubmit to false. This will keep the keyboard and allow multiline in the input.

And use the onKeyPress props only for sending a message.

onKeyPress({ nativeEvent: { key: keyValue } }) {
    if (keyValue === "Enter") this.sendMessage();
}

with

onMessageInputChange(message) {
    this.setState({
        message,
    });
}

This should work in both Android and iOS.

            <TextInput
                value={message}
                onChangeText={this.onMessageInputChange}
                onKeyPress={this.onKeyPress}
                returnKeyType="send"
                blurOnSubmit={false}
                multiline
            />