React Native + Redux Form - Use keyboard next button to go to next TextInput field
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 propertyref = {refField}
. This will add the input object to the refs property.I assigned a
onEnter
function in the FieldI 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 ifonSubmitEditing
gets invoked theonEnter
function gets invoked as wellFinally, refer to the local field
field2
, get the rendered Component and use the refs, which we assigned in theInput
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.