CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativeref
Isaac
Isaac

Reputation: 12894

How to type properly with ref?

I have a simple custom component as below

import {View, TextInput} from 'react-native'

interface ICustomProps extends TextInputProps {
  iconName?: WhateverType;
}

const CustomInput: React.FC<ICustomProps> = React.forwardRef((props, ref) => {
  const [someState, setSomeState] = useState(false);

  return (
    <View>
      {props.iconName && renderIcon()}
      <TextInput 
        ref={ref}
        {...props}
      />
    </View>
  )
})

export default CustomInput

With the code above, i'm expecting it to be able to work as I would like to implement auto focus for the textinput, however, im getting below error when I define ref

No overload matches this call.
  Overload 1 of 2, '(props: TextInputProps | Readonly<TextInputProps>): TextInput', gave the following error.
    Type 'ForwardedRef<unknown>' is not assignable to type 'LegacyRef<TextInput> | undefined'.
      Type 'MutableRefObject<unknown>' is not assignable to type 'LegacyRef<TextInput> | undefined'.
        Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<TextInput>'.
          Types of property 'current' are incompatible.
            Type 'unknown' is not assignable to type 'TextInput | null'.
              Type 'unknown' is not assignable to type 'TextInput'.
  Overload 2 of 2, '(props: TextInputProps, context: any): TextInput', gave the following error.

Cant seems to be able to understand which part of the component gone wrong, appreciate some help here

Upvotes: 1

Views: 1951

Answers (2)

Arťom Pozdnyakov
Arťom Pozdnyakov

Reputation: 617

const CustomInput = React.forwardRef<TextInput, ICustomProps>((props, ref) => { ... }

Would adding types to forward ref help?

Upvotes: 2

Saeed Hemmati
Saeed Hemmati

Reputation: 515

You should pass ref as props for inputRef.

interface ICustomProps extends TextInputProps {
  iconName?: WhateverType;
}

const CustomInput: React.FC<ICustomProps> = React.forwardRef((props, ref) => {
  const [someState, setSomeState] = useState(false);

  return (
    <View>
      {props.iconName && renderIcon()}
      <TextInput 
        inputRef={ref}
        {...props}
      />
    </View>
  )
})

export default CustomInput

Upvotes: -1

Related Questions