How to focus the next field of input, in react-native component

Question

I have one component called ImageTextField:

import React from 'react';
import {TextInput, View } from 'react-native';

export default class ImageTextField extends React.Component {
  render() {
    const {
      placeHolderValue, value, editable
    } = this.props;
    return (
      <View>
        <TextInput
          placeholder={placeHolderValue}
          placeholderTextColor="#b1b1b1"
          value={value}
          editable={editable}
        />
      </View>
    );
  }
}

My screen:

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import ImageTextField from '../../custom-elements/ImageTextField';

export default class App extends React.Component {
  render() {
    return (
      <ImageTextField 
        onChangeText={text => this.onNameChange(text)}
        color={Colors.textFieldBlack}
        placeHolderValue="Name"
        value={this.state.name}
        autoCapitalize="words"
      />
      <ImageTextField
        onChangeText={text => this.onEmailChange(text)}
        color={Colors.textFieldBlack}
        placeHolderValue="E-mail"
        value={this.state.email}
        keyboardType='email-address'
      />
      <ImageTextField
        onChangeText={text => this.onPhoneChange(text)}
        color={Colors.textFieldBlack}
        placeHolderValue="Phone"
        value={this.state.phone}
        keyboardType="phone-pad"
      />
    );
  }
}

In above code, i have ImageTextField Component which i am using in my screen, i want to focus the next field, if user press next key in keyboard its need to be jump on second field.

Please see https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar/35070812 — Priya, Apr 09 '18 at 10:49
Take a look at https://reactjs.org/docs/refs-and-the-dom.html — Louis Lecocq, Apr 09 '18 at 10:49
@Priya In that question, he is using static two Textinput field, but i am passing component. — Mohamed Sameer, Apr 09 '18 at 10:50

score 8 · Accepted Answer · answered Apr 09 '18 at 10:52

Add a prop which will retrieve the ref of the input to your ImageTextField component. So your render function should look like:

render() {
const {
  placeHolderValue, value, editable, inputRef
} = this.props;
return (
  <View>
    <TextInput
      placeholder={placeHolderValue}
      placeholderTextColor="#b1b1b1"
      value={value}
      editable={editable}
      ref={inputRef}
    />
  </View>
);
}

Then your App component will look like:

render() {
return (
  <ImageTextField 
    onChangeText={text => this.onNameChange(text)}
    color={Colors.textFieldBlack}
    placeHolderValue="Name"
    value={this.state.name}
    autoCapitalize="words"
    onSubmitEditing={() => this.emailAddress.focus()}
  />
  <ImageTextField
    onChangeText={text => this.onEmailChange(text)}
    color={Colors.textFieldBlack}
    placeHolderValue="E-mail"
    value={this.state.email}
    keyboardType='email-address'
    inputRef={ref => this.emailAddress = ref}
    onSubmitEditing={() => this.phoneNumber.focus()}
  />
  <ImageTextField
    onChangeText={text => this.onPhoneChange(text)}
    color={Colors.textFieldBlack}
    placeHolderValue="Phone"
    value={this.state.phone}
    keyboardType="phone-pad"
    inputRef={ref => this.phoneNumber = ref}
  />
);
}

I tried this now, but in my keyboard, next button not showing. — Mohamed Sameer, Apr 09 '18 at 10:55
Attribute for all the components `ImageTextField` you are using react-native right?? — Rajendran Nadar, Apr 09 '18 at 11:11
@RaajNadar it works, but if i press next key, keyboard closes and open up again — Mohamed Sameer, Apr 09 '18 at 11:14
`blurOnSubmit={false}` add in all fields except the last one — Rajendran Nadar, Apr 09 '18 at 11:15

score 1 · Answer 2 · answered Aug 12 '18 at 12:38

Component Name= MyTextInput

render() {
return (
<View>
<TextInput
  onChangeText={this.props.onChangeText}
  placeholder="some text"
  value={this.state.value}
  ref={this.props.inputRef}
  onSubmitEditing={this.props.onSubmitEditing}
/>
  </View>
);
}

Then your App component will look like:

<MyTextInput 
    onChangeText={text => this.onNameChange(text)}
    color={Colors.textFieldBlack}
    placeHolderValue="Name"
    value={this.state.name}
    autoCapitalize="words"
    onSubmitEditing={() => this.email.focus()}
  />

  <MyTextInput 
    onChangeText={text => this.onNameChange(text)}
    color={Colors.textFieldBlack}
    placeHolderValue="email"
    value={this.state.name}
    autoCapitalize="words"
    inputRef={ref => this.email = ref}
    onSubmitEditing={() => alert('submitted')}
  />

How to focus the next field of input, in react-native component

2 Answers2