React Native: Optimized SectionList does not rerender after scrollToLocation

user_196655 0
Viewed 1540

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?

Screenshot of example

expo react-native
2 Answers

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.

user_1966550

For the sectionList to update dynamically you need to place the data its using into State. This Expo example(done by someone else), is a good example:

https://snack.expo.io/Syy1bqKxW

His panResponder has all its data in state and on every "handlePanResponderMove" he calls setState() to update the position every time it moves. All in all, if your data is not in state, it will not update dynamically for you. Placing your data into state in React-Native is how it keeps track of your data changes dynamically.

Hope this helps!

user_22467030
Related