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

Top GitHub Comments

2reactions

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
        this.props.rootStore.uiStore.setInspectionDraggableFlatlistRef(ref);
       // Redux do something else, context as well
      ...
    };

    <DraggableFlatlist
       onRef={this.onDraggableFlatlistRef}
       ...
    />
}

In another component:
class MyParentComponent extend React.Component<...> {
    onSwitchEditMode = () => {
        this.props.rootStore.uiStore.draggableInspectionFlatlistRef.current._component.scrollToIndex({
            index: this.props.activeIndex
        });
     }
}

1reaction

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.