React Native: Optimized SectionList does not rerender after scrollToLocation

Question

I built an alphabet scrubber that scrolls a SectionList. The SectionList is optimized through the use of getItemLayout. If I scrub over the alphabet, the scrolling happens as planned, but the SectionList does not rerender until I release my finger from the screen.

See this expo snack

Anyone ideas on how to solve this?

Answer 1

Solved it by going through the source code of PanResponder. PanResponder sets an interaction handle through the InteractionManager. You can access this handle through this.panResponder.getInteractionHandle() (undocumented feature), and then clear it everytime you scroll to a location in the SectionList:

if (this.panResponder.getInteractionHandle()) {
    InteractionManager.clearInteractionHandle(
        this.panResponder.getInteractionHandle()
    );
}

This will move the SectionList up in the queue for doing its visibility calculations and renders.

I advice to heavily optimize this by clearing the interaction handle as few times as possible, since the InteractionManager is used for performance reasons.