yamankatby / react-native-material

Modular and customizable Material Design UI components for React Native
https://rn-material.js.org
MIT License
223 stars 38 forks source link

Fix types of components with ref forwarding #41

Open kowczarz opened 1 year ago

kowczarz commented 1 year ago

Currently e.g. TextInput allows using ref, it's defined as a React.FC<TextInputProps>. This cause TypeScript throws the given error:

TS2322: Type '{ ref: ForwardedRef<any>; style: any; inputContainerStyle: any; inputStyle: any; label: string | undefined; editable: boolean; variant: "outlined"; keyboardType: KeyboardTypeOptions; ... 11 more ...; onBlur: ((args: any) => void) | undefined; }' is not assignable to type 'IntrinsicAttributes & TextInputProps & { children?: ReactNode; }'.   Property 'ref' does not exist on type 'IntrinsicAttributes & TextInputProps & { children?: ReactNode; }'.

Easiest solution is removing the explicit type declaration, other approach would be replacement the current type with ForwardRefExoticComponent<PropsWithoutRef<TextInputProps>> & RefAttributes<RNTextInput>.

The reason I'm creating this issue is I don't have time to ensure if there is no other places where this issue occurs.

yamankatby commented 1 year ago

Hi @kowczarz, Thank you for filing this issue, I'll try to separate a time for it soon. If you have some free time and you would like to help, please go ahead and make a PR.

Jeffreyoboe1 commented 1 year ago

Seeing same issue, any progress here? What I see is that I cannot use ref without an error here.

<TextInput
              ref={emailField} // will see little red line here 
/>

Error for ref is: Type '{ ref: MutableRefObject; label: string; value: string; tintColor: string; textColor: string; baseColor: string; blurOnSubmit: false; onChangeText: (text: any) => void; ... 5 more ...; filledColor: string; }' is not assignable to type 'IntrinsicAttributes & TextInputProps'. Property 'ref' does not exist on type 'IntrinsicAttributes & TextInputProps'.ts(2322)

jorgtz commented 1 year ago

I do have the same issue when assigning ref to TextInputs

Type '{ value: string; label: string; onChangeText: (value: string) => void; ref: React.MutableRefObject<any>; onSubmitEditing: () => void; }' is not assignable to type 'TextInputProps'.
  Object literal may only specify known properties, and 'ref' does not exist in type 'TextInputProps'.ts(2322)

Any solution or workaround?