question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type error using useRef hook with TextInput

See original GitHub issue

When i use the hook useRef<TextInput>(null) this gives me this type error 'TextInput' refers to a value, but is being used as a type here. And the same when i use React.forwardRef<TextInput, MyProps>. This does’t happend with the RN TextInput

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

8reactions
lafioscacommented, Sep 25, 2020

I have not yet verified this solution by testing the app, but it seems to me that the ref attribute is referring to the React Native TextInput type rather than the react-native-paper type. Specifically, this clears up the ts errors for me:

import { TextInput as RNTextInput } from 'react-native';
import { TextInput } from 'react-native-paper';
const fieldRef = useRef<RNTextInput>(null);

const focusField = useCallback(
	() => {
		fieldRef.current?.focus();
	},
	[],
);
<TextInput
	ref={fieldRef}
	[...]
>

Again, this is hot off the presses from my code, in the middle of a large refactor, and I’m not able to verify the functionality yet.

5reactions
Alain00commented, Jan 29, 2020

No @sangdth, I just avoid it using the any type

Read more comments on GitHub >

github_iconTop Results From Across the Web

I can't type the ref correctly using useRef hook in typescript
I'm trying to pass a ref from a parent component (an EditableCell) to a Child component (Input) and use its .current.focus property when...
Read more >
TypeScript: Typing React useRef hook - Alex Khomenko
This post will demonstrate how to type useRef hook in TypeScript on example of controlling the focus state of an input element.
Read more >
How to use useRef with TypeScript - Atomized Objects
Discover how to use useRef with TypeScript in React and React native, and how to fix issues with MutableRefObject and object is possibly...
Read more >
TypeScript: React useRef Hook - Robin Wieruch
When using this function component with its useRef hook in TypeScript, you will most likely encounter an error. The best practice would be ......
Read more >
useRef "Object is possibly null" error in React [Solved]
Use a type guard to solve the "Object is possibly null" error with the useRef hook in React, e.g. if (inputRef.current) {} ....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found