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.

How to expose ref set by onRef (need to call scrollToIndex from another file)

See original GitHub issue

Issue Description

I 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:open
  • Created 2 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

creambyemutecommented, Oct 28, 2020

@nicoglennon @eric-om

I’m using it pretty much like this, though Mobx is observable so it might be different with Redux/Context.

class MyComponentList extend React.PureComponent<...> {
    draggableListRef: React.RefObject<AnimatedFlatListType<InspectionGroupItem>>;

    onDraggableFlatlistRef = (ref: React.RefObject<AnimatedFlatListType<InspectionGroupItem>>) => {
        this.draggableListRef = ref;
        // Mobx State management
       // Redux do something else, context as well


In another component:
class MyParentComponent extend React.Component<...> {
    onSwitchEditMode = () => {
            index: this.props.activeIndex
eric-omcommented, Dec 3, 2020

@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.

Read more comments on GitHub >

github_iconTop 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 >

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 Post

No results found

github_iconTop Related Hashnode Post

No results found