React Native - react-hook-form and typescript usage

user_4978619 0
Viewed 1388

I wanted to write a generic Input component in react native with typescript for react-hook-form library.

type InputTextProps = {
    name: any,
    control: any
}

const InputText: FC<InputTextProps> = ({name, control, ...props}) => {
    const {field} = useController({
        name,
        defaultValue: '',
        control
    })
    return (
        <TextInput 
            value={field.value}
            onChangeText={field.onChange}
            {...props}
        />
    )
}

In the above code, what should i use in InputTextProps ? I also want to extend TextInput's Props.

PS: Is using typescript in react native convenient ? I find is very much to be written especially for react navigation etc...

react-hook-form react-native typescript
1 Answers

From what I understand, you want to have an exact type for name and control with other props in InputTextProps.

To do so, you can use UseControllerProps, it includes name and control property:

import { UseControllerProps, useController } from "react-hook-form";

type InputTextProps = {
  // other custom props 
} & UseControllerProps;

UseControllerProps in controller.d.ts

export declare type UseControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
    name: TName;
    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
    shouldUnregister?: boolean;
    defaultValue?: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
    control?: Control<TFieldValues>;
};
user_155694920
Related