I am trying to create a TextInput component, that has 3 required parameters, and other should be passed as ...rest
, so i can reuse this components in any shape with any props that TextInput can accept.I have declared a component and interface accordingly:
interface IInput { styles: ViewStyle name: string control: Control rest: TextInputProps[]}export const Input = (props: IInput): JSX.Element => { const { control, name, styles, ...rest }: IInput = props const { field } = useController({ control, defaultValue: '', name, }) return (<TextInput value={field.value} onChangeText={field.onChange} style={styles} {...rest} /> )}
But when i try to use it
<Input styles={styles.input} name="asd" control={control} keyboardType="email-address"/>
I get a Type '{ styles: { width: string; height: number; marginLeft: number; fontSize: number; color: string; }; name: string; control: Control<FieldValues>; keyboardType: string; }' is not assignable to type 'IntrinsicAttributes & IInput'. Property 'keyboardType' does not exist on type 'IntrinsicAttributes & IInput'.
warning.
How it can be done? Any help would be appreciated.