CODEWITHSUNDEEP
react-nativeexpo
Gersom
Gersom

Reputation: 671

React Native: Optimized SectionList does not rerender after scrollToLocation

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

Upvotes: 10

Views: 1945

Answers (2)

Gersom
Gersom

Reputation: 671

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.

Upvotes: 10

ShaneG
ShaneG

Reputation: 1518

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!

Upvotes: 0

Related Questions