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

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.

[creambyemute]

@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
        });
     }
}

[eric-om]

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