Animated.Loop prevents VirtualizedList updates

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 6.9.1 Yarn: 0.17.9 npm: 3.10.10 Watchman: 4.7.0 Xcode: Xcode 8.3 Build version 8E162 Android Studio: 2.2 AI-145.3537739

Packages: (wanted => installed) react: 16.0.0-alpha.12 => 16.0.0-alpha.12 react-native: 0.48.3 => 0.48.3

Steps to Reproduce

1. Create any VirtualizedList and add a getItemLayout handler.
2. Start an Animated.Loop animated.
3. Scroll the list.

Expected Behavior

I would expect the new cells to render.

Actual Behavior

New cells do not render, only the cells that rendered initially are visible.

Reproducible Demo

https://snack.expo.io/H18xSNvi-

Comments

I believe part of the issue lies in _scheduleCellsToRenderUpdate: https://github.com/facebook/react-native/blob/3649fce12916f81a55be953dd14946d6101e71fa/Libraries/Lists/VirtualizedList.js#L1090-L1099. When scrolling, cell updates are scheduled and never called. Adding useNativeDriver: true to the child animation doesn’t seem to help.

Removing the getItemLayout handler causes the list to calculate an averageCellLength. Now, the cell updates aren’t scheduled but rendered immediately. Perhaps if a getItemLayout handler is provided an averageCellLength could be calculated which would let hiPri updates be rendered immediately.

Thanks

[janicduplessis]

VirtualizedList is probably using InteractionManager to schedule work but get’s blocked by your looping animation. You can add isInteraction: false to your animation config and it should fix the issue.

[rawrmaan]

@willdawsonme I submitted a doc update in #16136.