using react hook form on react native app

Question

I'm trying to create reusable Controller component that receives a 'name' prop instead of copy-pasting the same Controller tags with different 'name' prop again and again.

Instead of writing this:

MyScreen.tsx

       <Controller
          name="name"
          control={control}
          rules={{
            required: {value: true, message: 'Name is required'},
          }}
          defaultValue=""
          render={({onChange, value}: any) => (
            <Input
              error={errors.name}
              errorText={errors?.name?.message}
              onChangeText={(text: any) => onChange(text)}
              value={value}
              placeholder="Name"
            />
          )}
        />
       <Controller
          name="email"
          control={control}
          rules={{
            required: {value: true, message: 'Email is required'},
          }}
          defaultValue=""
          render={({onChange, value}: any) => (
            <Input
              error={errors.name}
              errorText={errors?.name?.message}
              onChangeText={(text: any) => onChange(text)}
              value={value}
              placeholder="Email"
            />
          )}
        />

I would like to have something like this:

MyScreen.tsx

<MyControllerComponet name ="name"/>
<MyControllerComponet name ="email"/>

And export the MyControllerComponet like this:

const MyControllerComponet= (props)=>{
const {handleSubmit, control, errors} = useForm();
 return (
    <View>
      <Controller
        name={props.name}
        control={control}
        rules={{
          required: {value: true, message: 'Email is required'},
          pattern: {
            value: EMAIL_REGEX,
            message: 'Not a valid email',
          },
        }}
        defaultValue=""
        render={({onChange, value}: any) => (
          <TextInput
            style={[styles.inputContainer, props.error, props.style]}
            {...props}
          />
        )}
      />
    </View>
  );
};

This example doesn't work- the input/data doesn't pass from the Controller component to the MyScreen screen (from child to parent). any ideas how can I make it work?

extra screenshots:

MainScreen

MyControllerComponet

final result

as you can see, only 1,2 values (the first and second controllers in the MainScreen) logged to console when clicking onSubmit but the 3rd value doesn't.

Thanks for helping

Answer 1

in parent component

const from = useForm({})

then you can extract other values from form like,

const {handleSubmit} = form;

You can pass form as a prop to MyControllerComponet.

<MyControllerComponet name ="name" form={form} />

Then inside MyControllerComponent

const { control, errors} =props.form;