Passing refs on React Native with TypeScript: (property) React.MutableRefObject.current: null Object is possibly 'null'.ts(2531)

Question

I have several fields on a React Native form and I would like that the focus jump from one to the next one each time the user validate the field with the virtual keyboard.

I came up with something like that:

        <NamedTextInput
          name={'email'}
          ref={emailRef}
          ...
          onSubmitEditing={() => passwordRef.current.focus()}
        />
        
        <NamedTextInput
          name={'password'}
          ref={passwordRef}
          ...
        />

On current I get a TypeScript error:

(property) React.MutableRefObject<null>.current: null
Object is possibly 'null'.ts(2531)

I tried to add ! and ? marks but it ends into:

Property 'focus' does not exist on type 'never'.ts(2339)

Any idea to solve this ?

Thanks

score 9 · Accepted Answer · answered Aug 29 '20 at 22:54

Ok, I got this one. I forgot the typing in the useRef declaration:

const passwordRef = useRef<TextInput>(null)

Then I can add a ! mark or check the existence the current ref without getting the "never" error:

onSubmitEditing={() => (passwordRef.current && passwordRef.current.focus())}

Passing refs on React Native with TypeScript: (property) React.MutableRefObject.current: null Object is possibly 'null'.ts(2531)

1 Answers1