Adding type for useRef on ScrollView react-native

Question

Looking to create a ref to a ScrollView component like so: const ref = useRef<ScrollView>(null); (or something to this effect) essentially I need access to the flashScrollIndicators method like this:

<ScrollView
  ref={ref}
  onContentSizeChange={() => ref?.current?.flashScrollIndicators()}>
  {children}
</ScrollView>

The code does work in my app however typescripts definitions for ScrollView doesn't seem to include flashScrollIndicators? I'm getting Property 'flashScrollIndicators' does not exist on type 'ScrollView'.ts(2339) looking through the types I can see SectionList and Flatlist so unsure if this is an bug with the definitions or just me not using it properly.

Luiz Baldi · Accepted Answer · 2020-12-14 13:30:28Z

14

After some research, I couldn't find any official documentation or blog post with the correct solution but declaring the ref using ScrollView itself worked for me. So you can do something like:

const scrollViewRef = React.useRef<ScrollView>(null);

And then autocomplete will take care of the rest, hope it helps!

answered Dec 14, 2020 at 13:30

Luiz Baldi

1561 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kieran Osgood Over a year ago

Appreciate the response, unfortunately thats something I've already tried (if you re-read the question you'll see i mentioned that on the first line), the typing for ScrollView doesn't seem to contain the flashScrollIndicators function, for now I'm just @ts-ignore'ing the call as I know it works

crati Over a year ago

Awesome. Worked for me.

Kieran Osgood Over a year ago

This was previously not working, but I've accepted now as the official declaration file for ScrollView has been updated since this answer was submitted so it does now :)

Mr.Jerry. · Accepted Answer · 2021-01-25 09:36:54Z

2

Since the flashscrollindicators does exist on ScrollView in documentation (and works in app) https://reactnative.dev/docs/scrollview#flashscrollindicators I assume this is bug in type definition.

I think the cleanest solution is to define your own ScrollViewRef using intersection.

import { ScrollView } from 'react-native';

export type ScrollViewRef = ScrollView & {
    flashScrollIndicators: () => void;
};

then use this type to define the ref

const scrollViewRef = React.useRef<ScrollViewRef | null>(null);

answered Jan 25, 2021 at 9:36

Mr.Jerry.

1,1891 gold badge8 silver badges8 bronze badges

Collectives™ on Stack Overflow

Adding type for useRef on ScrollView react-native

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related