useRef with TypeScript

[bitttttten]

Is this a bug report, a feature request, or a question?

Bug report.

Have you followed the required steps before opening a bug report?

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] 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?

[enheit]

I also have such problem in my code

I was trying to use it like

const carouselRef = useRef<CarouselStatic<CarouselPage[]>>();

<Carousel ref={carouselRef} />
               ^^^^^^^^^^^ - shows warning

[igorwilliam]

I also have problem too. I trying with pagination

 const ref= useRef<any>();

//Here works
<Carousel ref={ref}/>

// Here not works
<Pagination carouselRef={ref} />

I try other ways like: const ref= useRef<CarouselStatic<any>>(); const ref= useRef<Flatlist<any>>();

But unsuccefully

[karltaylor]

I'm getting the same issue, I needed a workout for this at the moment which was to just declare any on the ref. Awful but I needed the build to pass.

const carouselRef: any = useRef(null)
//
carouselRef.current.snapToItem(index);

[shachardevops]

const ref = useRef() ref.current.anything is undefined

what to do 😭

[brunolrib]

Hey folks.

const carouselRef = useRef<Carousel<Item>>(null);

This way worked for me. I had to initialize ref with null value, and the warning is gone.

I hope this can be usefull for you.

[cuongn265]

Hey folks.

const carouselRef = useRef<Carousel<Item>>(null);

This way worked for me. I had to initialize ref with null value, and the warning is gone.

I hope this can be usefull for you.

Sorry but what is Item meaning here? Can you let me know please 🙏

[brunolrib]

@cuongn265 Item is the type that you want to use in carousel list, can be a TypeScript class, interface or type.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[LuridChang]

Can anyone help me ? I tried everything above, but nothing worked.

try to edit like this. const carouselRef = useRef<Carousel<any>>(null); carouselRef.current?.snapToNext

[emilegaspi]

I got this working by doing:

const carousel = useRef<Carousel<Item> & CarouselStatic<Item>>(null)

[hugolcouto]

Same problem here, but mine is triggering in Pagination component

Full component code for refference:

[ridafkih]

@hugolcouto Did you ever solve this? Having the same issue.

[Snouzy]

const carousel = useRef<Carousel<typeof renderItem>>()

where renderItem is your render function.

Btw, @hugolcouto what's your theme and font ? aha

[ridafkih]

This library is unmaintained. It's in your best interested to stop using it entirely.

Switch to dohooo/react-native-reanimated-carousel