after typing focus to next text input

Question

let say I have 3 views with TextInput inside it.

<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled} />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled} />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled} />
</View>

notice ref={'cell_'+i} where i equal to 0..2. now when I type in a char inside cell_0 how to focus (move the cursor) to the next TextInput ie.cell_1?

This link might be helpful: https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar — ankit_morker, Jun 30 '18 at 05:30

score 0 · Answer 1 · answered Jun 30 '18 at 05:46

Try this code :

<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled}
        onSubmitEditing={() => this.focusNextField('cell_' + (i+1))}
        />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled}
        onSubmitEditing={() => this.focusNextField('cell_' + (i+1))}
        />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled}
        />
</View>

onSubmitEditing:

focusNextField = nextField => {
   this.refs[nextField].focus();
};

after typing focus to next text input

1 Answers1