CODEWITHSUNDEEP
react-nativekeyboardtextinputandroid-hardware-keyboard
cweilguny
cweilguny

Reputation: 121

React Native TextInput: no newline with hardware keyboard Enter key

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?

Upvotes: 5

Views: 15085

Answers (5)

Israel Ojeifo
Israel Ojeifo

Reputation: 11

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

Upvotes: 1

Hassan
Hassan

Reputation: 51

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

This works for me

Upvotes: 1

arled
arled

Reputation: 2690

You're welcome: blurOnSubmit={true}

Upvotes: 9

Вика Шелестенко
Вика Шелестенко

Reputation: 45

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
}

}

Upvotes: 0

Bruna Almeida
Bruna Almeida

Reputation: 73

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

returnKeyType='none'

Upvotes: 4

Related Questions