How to expose ref set by onRef (need to call scrollToIndex from another file)
See original GitHub issueI would like to expose the flatList ref so that I can call scrollToIndex from another component in my screen. Currently my draggable flat list lives in its own component file and I am able to use the ref within that file with the following code:
onRef={ref => {try {listRef = ref} catch {console.log("Failed to set ref.")}}}
(I am also unsure how listRef gets set because we do not declare it anywhere.)
I’m unable to set the ref to a predeclared variable or to the component’s state using the useState hook.
Issue Analytics
- State:
- Created 3 years ago
- Comments:13 (1 by maintainers)
Top Results From Across the Web
How to expose ref set by onRef (need to call scrollToIndex from ...
I would like to expose the flatList ref so that I can call scrollToIndex from another component in my screen. Currently my draggable...
Read more >React-Native: Ref is missing scrollToIndex() for FlatList
It is unable to call scrollTo because the ref has only been initialized and not assigned at the time of use: const ref...
Read more >Everything You Need to Know About Refs in React
You first define a ref, assign it to the element you want to manipulate and call focus on ref's current property.
Read more >FlatList scrollToIndex practical example. - Expo Snack
Try this project on your phone! Use Expo's online editor to make changes and save your own copy.
Read more >Ref.Current Is Always Return Null With React Hooks When I ...
useRef (null); // reference type const linkRef React. ... and various Cascade filing means one need only compare the object with one directory...
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 Free
Top 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
@nicoglennon @eric-om
I’m using it pretty much like this, though Mobx is observable so it might be different with Redux/Context.
@nicoglennon @creambyemute I wasn’t able to get it to work using hooks/context. I also tried experimenting with rxjs but I couldn’t figure out how to observe ref.
Something that I think could work is writing functions in your child component to interact with the flatlist and then exposing those functions through a ref. I wanted to try this but my child component is very complex and this feature isn’t worth the re-write at the moment.