Typescript error using forwardRef with Input

[stefanosandes]

I'm getting this error using forwardRef with Input:

Type 'ForwardedRef<IInputComponentType>' is not assignable to type 'MutableRefObject<any>'.
  Type '(instance: IInputComponentType) => void' is not assignable to type 'MutableRefObject<any>'.ts(2322)
types.d.ts(105, 5): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & InterfaceInputProps & Partial<{}> & Partial<Record<string, any>>'

My code:

type KFramedInputProps = IInputProps & {
  label: string
}
const KFramedInput = forwardRef<IInputComponentType, KFramedInputProps>(({ label = 'Label', ...rest }, ref) => (
  <Input ref={ref} {...rest} />
))

KFramedInput.displayName = 'KFramedInput'

Some tip?

[rayan1810]

Hey @stefanosandes, Which version are you currently working on?

[stefanosandes]

Version is 3.4.5.

[stefanosandes]

@rayan1810 it works on 3.3.11. On this version the type is described as React.ForwardedRef<React.MutableRefObject<IInputComponentType>>, while on 3.3.12 onwards is React.MutableRefObject<any>.

[chris-chapin]

I ran into this as well (3.4.23) migrating to NativeBase from an implementation using TextInput react-native primitives. I used // ts-ignore for now and I also had to useRef<any>, but changing focus still works as before. My use case is filling out a form and changing focus to next input when "done" is tapped.

Only thing I have found in the docs about using refs is here. But the example is using React-native TextInput primitive and not NativeBase's own Input. Maybe this is the expectation with using refs, that they are used with the RN primitive and wrapped with Factory.

In any case, refs is typed on IInputComponentType and seems like some clarity is needed.

[chris-chapin]

Yeah, it seems like some work needs to be done to get this typed up correctly (it's a little beyond my skills at this point). I added this to the current ref typing:

node_modules\native-base\lib\typescript\components\primitives\Input\types.d.ts

ref?: MutableRefObject<any> | RefCallback<any> | React.ForwardedRef<React.MutableRefObject<IInputComponentType>>;

Then I had to do this:

const CustomTextInput = forwardRef<TextInput, CustomTextInputProps>(...

and finally:

const ref = useRef<TextInput>(null);

This solved all the TypeScript complaints.

If I tried const ref = useRef<typeof Input>(null); then I would get errors that focus() doesn't exist.

It's not great and I'll just go back to using // ts-ignore and useRef<any> for now (as I mentioned in my previous comment).

[stefanosandes]

The problem can be reproduced in this sandbox: https://codesandbox.io/s/quizzical-alex-x0zqrk?file=/src/App.tsx

[rayan1810]

Hey, thanks for sharing I'll look into this.

[bryanltobing]

any update on this ?

[Dinkelborg]

Same issue still there almost a year later