I want to be able to move the focus from one input onto the next after the user has entered 2 numbers in the input box. Instead of the user manually clicking the next field I'd like the focus to switch there automatically.
Below is how I've currently implemented my two input fields.
I've tried the things mentioned here using refs but doesn't seem to work at all https://www.codegrepper.com/code-examples/csharp/react+native+textinput+focus
<Controller control={form.control} defaultValue={initialMonthValue} name={monthName} render={({ onChange, onBlur, value }) =><Input containerStyle={{ width:80 }} editable={!isSubmitting} autoCapitalize="none" numberOfLines={1} multiline={false} keyboardType='number-pad' placeholder="MM" maxLength={2} placeholderTextColor={Colors.Grey} onChangeText={onChange} onBlur={onBlur} secureTextEntry={false} invalid={!!monthError} value={value} />} /><Slash text="/" /><Controller control={form.control} defaultValue={initialYearValue} name={yearName} render={({ onChange, onBlur, value }) =><Input containerStyle={{ width:80 }} editable={!isSubmitting} autoCapitalize="none" numberOfLines={1} multiline={false} keyboardType='number-pad' placeholder="YY" placeholderTextColor={Colors.Grey} onChangeText={onChange} onBlur={onBlur} secureTextEntry={false} invalid={!!yearError} value={value} />} />