1

Hello I want to make 4 inputs for pin code and all is fine just I would like to add functionality so as we write numer in Field1 it takes us to Field2 etc. Here is my code:

Input Component:

 InputComponent = ({ input, meta, ...rest }) => (
    <Input {...rest} keyboardType="numeric" maxLength={1} value={input.value} onChangeText={input.onChange} />
  );

Form:

<Form style={styles.form}>
    <View style={styles.inputs}>
        <Field style={styles.input} name="pin1" component={this.InputComponent} placeholder="*" secureTextEntry />
        <Field style={styles.input} name="pin2" component={this.InputComponent} placeholder="*" secureTextEntry />
        <Field style={styles.input} name="pin3" component={this.InputComponent} placeholder="*" secureTextEntry />
        <Field style={styles.input} name="pin4" component={this.InputComponent} placeholder="*" secureTextEntry />
    </View>
</Form>
jake-ferguson
  • 315
  • 3
  • 11
  • 32

1 Answers1

0

Here What you can do is using Ref will solve your problem

here 

<FormInput
 ref='forminput'
 textInputRef='email'
 ...
 />

You should be able to access the refs like this.refs.forminput.refs.email.focus() . for every signle input.

using focus will focus the particular input according to ref here is a ref with examples on this for redux form REDUX_FORM

HpDev
  • 2,789
  • 1
  • 15
  • 20
  • can you supply more code, the best applied to mine? I tried to use refs but couldnt work it out... – jake-ferguson Jun 04 '18 at 08:56
  • did that you check that particular link redux_form, in that it is actually described how we can do that. as currently, i don't have working examples for it (: – HpDev Jun 04 '18 at 10:08
  • Yes and still it doesnt work for me. I have also used new syntax of refs and now described it here: https://stackoverflow.com/questions/50679769/react-native-redux-form-native-base-onchangeevent-function-doesnt-work-und – jake-ferguson Jun 04 '18 at 11:42