React Native focus next TextInput on Keyboard Next button press

[KiranRadish]

I have installed version 7 and trying to use ref but its not working (using javascript code not typescript).

I want to focus TextInput like we do in hooks with useRef

[bluebill1049]

can you share a codesandbox or snack?

[KiranRadish]

This is how my code is

<Controller
name="email"
defaultValue=""
control={control}
rules={{
required: { value: true, message: errorMessage.required },
pattern: { value: Keys.EMAIL_REGEX, message: 'Not a valid email' }
}}
render={({ field: { onChange, onBlur, value, ref } }) => (
<View style={[Metrics.mt6, Metrics.mb15]}>
<AppTextInput
inputStyle={AppStyles.inputBox}
error={errors.email}
errorMessage={errors?.email?.message}
keyboardType={'email-address'}
onChangeText={(text) => onChange(text)}
value={value}
onBlur={onBlur}
returnKeyLabel="next"
returnKeyType="next"
autoCapitalize={'none'}
// ref={register({ name: 'email' })}
/>

            <Controller
        name="password"
        defaultValue=""
        control={control}
        rules={{ required: { value: true, message: errorMessage.required }, }}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <View style={[Metrics.mt6, Metrics.mb15]}>
            <AppTextInput
              inputStyle={AppStyles.inputBox}
              error={errors.password}
              errorMessage={errors?.password?.message}
              keyboardType={'default'}
              secureTextEntry={true}
              onChangeText={(text) => onChange(text)}
              value={value}
              onBlur={onBlur}
              returnKeyLabel="next"
              returnKeyType="next"
              autoCapitalize={'none'}
            // ref={ref}
            />
          </View>

        )}
      />

I want to focus password textInput on press of Next button when keyboard opens
we will use onSubmitEditing for that but here how can i implement its throwing error

[Moshyfawn]

You gotta show us some usage code (codesanbox ideally). We can't magically know what your issue is ;)

In V7, for uncontrolled components, instead of ref={register} you need to do <input {...register("name")} />. For controlled, it's render={({ field: { ref } }) => } instead of render={{ ref }}

If your input exposes a different ref prop name instead of ref, you can do

const { nameFieldRef, ...nameField } = register("name")

<input { ...nameField } inputRef={nameFieldRef} />

[KiranRadish]

I got the answer, Thanks man for the wonderful library

[vagnerwentz]

Hi, could you share the answer for your question?

[pke]

@KiranRadish so what's the answer/solution to your problem?

[KiranRadish]

@vagnerwentz & @pke the answer worked for me is -

we have to use setFocus from useForm.

In render we can use it like this

`render={({ field: { onChange, onBlur, value, ref } }) => (

         <View style={[Metrics.mt3, Metrics.mb15]}>
                  <AppTextInput
                    inputStyle={AppStyles.inputBox}
                    error={errors.firstName}
                    errorMessage={errors?.firstName?.message}
                    keyboardType={'default'}
                    onChangeText={text => onChange(text)}
                    value={value}
                    onBlur={onBlur}
                    returnKeyLabel="next"
                    returnKeyType="next"
                    autoCapitalize={'none'}
                    ref={ref}
                    onSubmitEditing={() => setFocus('lastName')} // next defaultValues key for focus
                  />
          </View>
      )}

`

onSubmitEditing={() => setFocus('lastName')}

[praweshlamsal]

Is there any global way of achieving this, as i have lots of text input in my application and mannually setting setfocus is pretty tedious?