react-native create reuseable myController component

[yossimenash]

Hey, is it possible to create reuseable Controller componet that recives 'name' prop instead of copy-pasting the same Controller tags with diffrent 'name' prop again and again?

i mean 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"
            />
          )}
        />

write something like this:
MyScreen.tsx

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

and:
MyControllerComponet.tsx.tsx

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 working - the data of the object doesn't passes from child to parent screen.
how i can make this work?

Thank for helping :)

[bluebill1049]

reproduce this problem in a codesandbox plz.

[yossimenash]

their is a problem with the data transfering.
i want use the data i enter from 'MyControllerComponet.tsx' on 'MyScreen.tsx' screen when i clicking onSubmit. but the data is not forwarded.

[bluebill1049]

try to create a CSB with above setting to reproduce the problem

[yossimenash]

cant see this.

[yossimenash]

but here some screenshoots from my project:
my MainScreen:

the exported component which i try to use:

the result:

as you can see, only 1,2 values (the first and second controllers in the MainScreen) logged to console.

[bluebill1049]

it's confusing to have the same Controller as name, i would name to something else, also i would try a naked Controller first, because add your abstraction. then you would be able to identify the problem.

[yossimenash]

if you face the same issue use the following link there is a solution.
https://stackoverflow.com/q/64480040/14491996