useRef with TypeScript
See original GitHub issueIs this a bug report, a feature request, or a question?
Bug report.
Have you followed the required steps before opening a bug report?
- I have read the guidelines regarding bug report.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- I have searched for existing issues and made sure that the problem hasn’t already been reported.
- I am using the latest plugin version.
- I am following the issue template closely in order to produce a useful bug report.
Have you made sure that it wasn’t a React Native bug?
Yes
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
TypeScript related.
Is the bug reproductible in a production environment (not a debug one)?
Yes
Environment
info Fetching system and libraries information...
System:
OS: macOS 10.15.5
CPU: (16) x64 AMD Ryzen 7 1700X Eight-Core Processor
Memory: 166.43 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.0/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
IDEs:
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
npmPackages:
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4
Expected Behavior
That TypeScript does not error when using useRef.
Actual Behavior
TypeScript warns that refs are not compatible.
Steps to Reproduce
const carouselRef = useRef<Carousel<Item>>(null)
<Carousel ref={carouselRef} />
Will error:
No overload matches this call.
Overload 1 of 2, '(props: Readonly<CarouselProperties<Item>>): Carousel<Item>', gave the following error.
Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'string | (string & ((instance: ScrollViewProps) => void)) | (string & RefObject<ScrollViewProps>) | (string & ((instance: CarouselStatic<Item>) => void)) | ... 22 more ... | (RefObject<...> & ... 1 more ... & RefObject<...>)'.
Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'React.RefObject<...> & React.RefObject<...> & React.RefObject<...>'.
Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'RefObject<CarouselStatic<Item>>'.
Types of property 'current' are incompatible.
Type 'Carousel<Item>' is missing the following properties from type 'CarouselStatic<Item>': currentIndex, currentScrollPosition, startAutoplay, stopAutoplay, and 4 more.
Overload 2 of 2, '(props: CarouselProperties<Item>, context?: any): Carousel<Item>', gave the following error.
Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'string | (string & ((instance: ScrollViewProps) => void)) | (string & RefObject<ScrollViewProps>) | (string & ((instance: CarouselStatic<Item>) => void)) | ... 22 more ... | (RefObject<...> & ... 1 more ... & RefObject<...>)'.
Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'React.RefObject<...> & React.RefObject<...> & React.RefObject<...>'.
Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'RefObject<CarouselStatic<Item>>'.
I also tried typing the useRef with CarouselStatic
but this didn’t help.
I see that I can also do:
<Carousel ref={(ref) => (carouselRef.current = ref)} />
Although I am not sure the typings are correct?
Issue Analytics
- State:
- Created 3 years ago
- Reactions:12
- Comments:12
Top Results From Across the Web
TypeScript: React useRef Hook - Robin Wieruch
A brief summary of how to use React's useRef Hook for using a ref with TypeScript. First, a ref in React is mainly...
Read more >How to use React useRef with TypeScript - Linguine Code
In today's short article, I will go over how to properly define, and use your useRef hook with TypeScript. The solution. As the...
Read more >React - useRef with TypeScript and functional component
I'm trying to call the child component method from the parent component using useRef . In the future, the SayHi method will update...
Read more >Hooks - React TypeScript Cheatsheets
In TypeScript, useRef returns a reference that is either read-only or mutable, depends on whether your type argument fully covers the initial value...
Read more >How to use useRef with TypeScript - Atomized Objects
To use useRef with TypeScript, it is actually pretty easy, all you need to do is provide the type that you want to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hey folks.
const carouselRef = useRef<Carousel<Item>>(null);
This way worked for me. I had to initialize
ref
withnull
value, and the warning is gone.I hope this can be usefull for you.
I also have problem too. I trying with pagination
I try other ways like:
const ref= useRef<CarouselStatic<any>>();
const ref= useRef<Flatlist<any>>();
But unsuccefully