react-hook-form useFieldArray with React-Native

Viewed 22

Is it possible to use ReactNative with useFieldArray from react-hook-form? I couldn't find any reference for that.

I'm trying to use it but I can't get the output data from the TextInputs. It looks like the onChange is not working, I tried to use the onChange prop but still couldn't make it.

Example:

  const {
    control,
    formState: {errors},
    register,
    getValues,
    handleSubmit,
  } = useForm({
    defaultValues: {
      playerNameInput: [{playerName: ''}, {playerName: ''}],
    },
  });

  const {fields, append, remove} = useFieldArray({
    control,
    name: 'playerNameInput',
  });
return(
<>
{fields.map((player, index) => (
    <View>
        <Controller
            control={control}
            rules={{required: true}}
            name="playerNameInput"
            render={() => (
                <TextInput
                style={{width: 100}}
                defaultValue={`${player.playerName}`}
                {...register(`playerNameInput.${index}.playerName`)}
                />
            )}
        />
</View>)}

<Button onPress={handleSubmit(data => console.log(data))}>
        Save Changes
</Button>
</>

)
0 Answers
Related