Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix types of components with ref forwarding #41

Open
kowczarz opened this issue Aug 24, 2022 · 3 comments
Open

Fix types of components with ref forwarding #41

kowczarz opened this issue Aug 24, 2022 · 3 comments

Comments

@kowczarz
Copy link

kowczarz commented Aug 24, 2022

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
Copy link
Owner

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
Copy link

Jeffreyoboe1 commented Mar 11, 2023

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
Copy link

jorgtz commented May 4, 2023

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants