Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6291

Types of custom input component's Props with React Hook Form

$
0
0

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 !


Viewing all articles
Browse latest Browse all 6291

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>