React Native + Redux Form - use the following keyboard button to go to the next TextInput field

Question

I am using Redux Form (RF) in a React Native application. Everything works fine, but I can’t figure out how to get Fieldrefs from input to go to the next input field using the Redux form.

Without RF, this solution will work 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 pass a property to the nextFieldcomponent to determine the next input field when a key is pressed Nexton the keyboard, but I cannot get the property refsinside the component RenderInput.

Any idea how to get property refs ?

Answer 1

Form RenderInput .

:

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}/>
      )
   }
} 

?

• ref ref={(componentRef) => this.field1 = componentRef}, @Ksyqo. .

• refField="field1" RenderInput input ref ref = {refField}. refs.

• onEnter

• RenderInput onSubmitEditing={onEnter}. . , onSubmitEditing onEnter

• , field2, refs, Input, . this.field2.getRenderedComponent(). Refs.field2.focus()

, , .

Answer 2

, Redux Form + React Native Elements, @Thomas Dittmar FormInput: textInputRef={refField}

React Native Element focus(), .

Answer 3

withRef , forwardRef.

Answer 4

I worked to get the answer that worked for me.

           const renderComp = ({
             refName,
             meta: { touched, error },
             input,
             ...custom
           }) => (
             <MyComponent
               ref={refName}
               {...custom}
             />
           )

            <Field
              name={name}
              component={renderComp}
              ref={node =>
                isLeft ? (this.compRef1 = node) : (this.compRef2 = node)}
              refName={node =>
                 (this.myRef= node) }
              withRef
            />

now refer to such instance functions.

this.myRef.anyFunc()

Answer 5

I had a slightly different use case, but I think it works for the above as well.

I used focal action

import { focus } from 'redux-form';
dispatch(focus('signIn', 'email'));

Then in the (custom) form field that contains TextInput, I added to the rendering function

<TextInput
    ref="email"
/>
formStates.filter((state) => meta[state]).map((state) => {
   if(state === 'active'){
      this.refs.email.focus()
   }
})

No more worries about nesting / hierarchy of components.