I'm trying to create a generic custom FormInput component with React Hook Form but I'm struggling with the types
I would call my component like this ...
<FormInput control={control} name={"name"}></FormInput>
... and keep autocompletion on name property.
My FormInput looks like
type Props = { control: any name: any rules?: any shouldUnregister?: boolean style?: StyleProp<TextStyle> secureTextEntry?: boolean placeholder?: string}const FormInput = ({ name, control, rules, style, secureTextEntry, placeholder,}: Props) => { return (<Controller name={name} control={control} rules={rules} render={({ field: { onChange, onBlur, value }, fieldState: { error }, }) => (<><Input onBlur={onBlur} onChangeText={onChange} value={value} style={style} secureTextEntry={secureTextEntry} placeholder={placeholder} /> {error && <Text>{error.message || "Error"}</Text>}</> )}></Controller> )}export default FormInput
and I don't know what types {control, name, rules} should be.
I've tried this
type Props<T> = { control: Control<T, any> name: Path<T> rules?: {For this I have no Idea} [...]}const FormInput = <T,>({ [...]}: Props<T>) => { [...]//Call with <FormInput<Program> control={control} name={"name"}></FormInput>
I have this error on {control}:
Type 'T' does not satisfy the constraint 'FieldValues'.This type parameter might need an
extends FieldValues
constraint.
But even with extends it doesn't work.
Thanks in advance for your help !