CODEWITHSUNDEEP
reactjsreact-nativeecmascript-6
Titus Joyson
Titus Joyson

Reputation: 345

How to focus next feald on next is clicked in react native?

Hi i am trying to focus next input field( Which is extended from parent ) while next(in android keyboard) is clicked android keyboard closes and not focusing the next field.

I tried some of the codes like onSubmitEditing= this.refs.passwordFeald.focus() its not working and i am little confused about naming component if some one explains it also be better

the following is my current code

export default class InputBox extends Component {
    focusNextField = (nextField) => { this.refs[nextField].focus(); };

    render(){
        return(
            <TextInput
                style = {style.input}
                underlineColorAndroid='rgba(255,255,255,0.7)' 
                placeholderTextColor = "rgba(255,255,255,0.6)"
                placeholder = {this.props.placeholder}
                secureTextEntry={this.props.typePassword}
                returnKeyType = {this.props.returnKeyType}
                ref = {this.props.inputRef}
                focusNextField = {() => this.focusNextField(this.props.onSubmitEditing)}
            />
        )
    }
}

export default class Login extends Component {

  render(){
    return(
      <View style={[styles.container, commonStyle.background]}>
        <View style={[headerContStyle.topContainer]}>
          <MainHeading/>
        </View>
        <View style={[formStyle.container]}>
          <InputBox
            placeholder = "Email or username"
            returnKeyType = "next"
            inputRef = {el => this.usenameFeald = el}
            onSubmitEditing= 'passwordFeald'
          />
          <InputBox
            placeholder = "Password"
            secureTextEntery = {"true"}
            returnKeyType = "go"
            inputRef = {el => this.passwordFeald = el}
            typePassword = {true}
          />
          <CommonButton
              title = "Login"
          />
          <CommonButton
              title = "Sign Up"
          />
          <ForgotPassword />
        </View>
      </View>
    )
  }
}

Upvotes: 0

Views: 630

Answers (1)

Nguy&#234;n Ho&#224;ng
Nguy&#234;n Ho&#224;ng

Reputation: 1053

Ref the document about TextInput here.

You can see the example focus the next TextInput at the class BlurOnSubmitExample. At your project, I suggest you change the properties like this on the first input:

<InputBox
  placeholder="Email or username"
  returnKeyType="next"
  onSubmitEditing={() => this.nextInput.focus()}
 />

And the second one: 

<InputBox
  placeholder="Password"
  returnKeyType="next"
  inputRef={(nextInput) => this.nextInput = nextInput}
 />

On the InputBox component, we send the ref to the parent component:

ref={(nextInput) => {this.props.inputRef && this.props.inputRef(nextInput)}}
{ ...this.props }

onSubmitEditing will call when the user press the enter key and this will focus the second TextInput.

Upvotes: 1

Related Questions