React Native TextInput: no newline with hardware keyboard Enter key

Question

We have a React Native TextInput component in our app. Using the virtual keyboard, pressing enter creates a new line. If we use a hardware keyboard (attached to an Android 6 tablet using an USB OTG adapter), the Enter key (the large one in the middle of the keyboard) doesn't change the text, the TextInput only loses the focus. The Return key (the smaller one on the right side of common keyboards) creates a new line.

The TextInput is setup very basic:

<TextInput multiline={true} />

I tried different values for the returnKeyType attribute, but none of them created a new line. Am I missing something?

Cadmar

Answer 1

You're welcome: blurOnSubmit={true}

Kight

But blurOnSubmit will dismiss the keyboard. Is there a way to prevent dismissing the keyboard? – Gca

You're the real MVP <3 – Kindred

Answer 2

I was facing the same issue, but the following worked for me:

returnKeyType='none'

Paige

Answer 3

<TextInput 
    value={activity}
    onChangeText={setActivity}
    numberOfLines={5}
    multiline={true}
    style={styles.TextInput}
    placeholder={"Start your activity"}
    keyboardType="name-phone-pad"
/>

This works for me

Architect

Answer 4

What you want is <TextInput placeholder="Enter text..." style={styles.input} keyboardAppearance='dark' blurOnSubmit={false} multiline />

Ladysmith

Answer 5

Try it! It works in the middle of the line also!

<TextInput
                  placeholder={I18n.t('enterContactQuery')}

                  value={this.state.query}
                  onChangeText={text => this.setState({ query: text, allowEditing: true })}

                  selection = {this.state.selection}
                  onSelectionChange={(event) => this.setState({ cursorPosition: event.nativeEvent.selection, selection: event.nativeEvent.selection, allowEditing: true })}
                  onSubmitEditing={() => {
                    const { query, cursorPosition } = this.state;
                    let newText = query;
                    const ar = newText.split('');
                    ar.splice(cursorPosition.start, 0, '\n');
                    newText = ar.join('');
                    if (cursorPosition.start === query.length && query.endsWith('\n')) {
                      this.setState({ query: newText });
                    } else if (this.state.allowEditing) {
                      this.setState({
                        query: newText,
                        selection: {
                          start: cursorPosition.start + 1,
                          end: cursorPosition.end + 1
                        },
                        allowEditing: !this.state.allowEditing
                      });
                    }
                  }}
                  multiline = {true}
                  numberOfLines = {10}
                  blurOnSubmit={false}
                  editable={true}
                  // clearButtonMode="while-editing"
                />

constructor(props) {
super(props);
this.state = {
  query: '',
  cursorPosition: [0,0],
  selection: null,
  allowEditing: true
}

}

Danitadaniyal