React Native + Redux Form - Use keyboard next button to go to next TextInput field

react-native, redux-form

Solution

This solution passes props from the `Form` component to the `RenderInput` component and passes a function call back.

Here's the code:

class RenderInput extends Component {
   const { input, refField, onEnter,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <TextInput
            ref = {refField}
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing={onEnter}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref={(componentRef) => this.field1 = componentRef}
            refField="field1"
            component={RenderInput}
            onEnter={() => { 
               this.field2.getRenderedComponent().refs.field2.focus()
            }}/>

         <Field
            name="field2"
            withRef
            ref={(componentRef) => this.field2 = componentRef}
            refField="field2"
            component={RenderInput}/>
      )
   }
}

So what happened here?

I assign the ref to local scope with `ref={(componentRef) => this.field1 = componentRef}` as @Ksyqo suggested. Thanks for the hint.

I pass `refField="field1"` to the RenderInput and assign the value to the input ref property `ref = {refField}`. This will add the input object to the refs property.

I assigned a `onEnter` function in the Field

I pass the function to the props of RenderInput and assign it to the `onSubmitEditing={onEnter}` function. Now we have bind the two functions together. That means if `onSubmitEditing` gets invoked the `onEnter` function gets invoked as well

Finally, refer to the local field `field2`, get the rendered Component and use the refs, which we assigned in the `Input` field, to set the focus. this.field2.getRenderedComponent().refs.field2.focus()

I don't know if this is the most elegant solution but it works.

Problem

I'm using Redux Form (RF) in a React Native application. Everything works fine but I can not figure out how to get the `refs` from the Field input to go to the next input field with Redux Form. Without RF this solution would work just fine. Here is my code: ``` class RenderInput extends Component { const { input, nextField, refs, meta: { touched, error, warning }, input: { onChange } } = this.props render() { return ( <Input returnKeyType = {'next'} onChangeText={onChange} onBlur={input.onBlur} onFocus={input.onFocus} onSubmitEditing = {(event) => { // refs is undefined refs[nextField].focus() }}/> ) } } class Form extends Component { render() { return ( <Field name="field1" focus withRef ref='field1' nextField = "field2" component={RenderInput}/> <Field name="vendor" withRef ref="field2" nextAction = "field3" component={RenderInput}/> ) } } ``` I'm passing on the property `nextField` to the component to determine the next input field when the `Next` key on the keyboard is clicked but I can not get the `refs` property inside the `RenderInput` component. Any idea how to get the refs property?

Original source

Related problems