Permalink
Browse files

Update Animated docs to mention potential issues with VirtualizedList

Summary:
Doc update to clarify how to prevent `Animated.loop` and other animations from pre-empting `VirtualizedList` rendering as discussed in #16092.
Closes #16136

Differential Revision: D6057466

Pulled By: hramos

fbshipit-source-id: 946bcde97b364c623b48ddaeb643309630c072c9
  • Loading branch information...
rawrmaan authored and facebook-github-bot committed Oct 14, 2017
1 parent e268883 commit a59d157df4cc80b3a11e4a43c51adf56301416eb
Showing with 7 additions and 2 deletions.
  1. +5 −2 Libraries/Animated/src/AnimatedImplementation.js
  2. +2 −0 docs/Animations.md
@@ -827,8 +827,11 @@ module.exports = {
/**
* Loops a given animation continuously, so that each time it reaches the
* end, it resets and begins again from the start. Can specify number of
* times to loop using the key 'iterations' in the config. Will loop without
* blocking the UI thread if the child animation is set to 'useNativeDriver'.
* times to loop using the key `iterations` in the config. Will loop without
* blocking the UI thread if the child animation is set to `useNativeDriver: true`.
* In addition, loops can prevent `VirtualizedList`-based components from rendering
* more rows while the animation is running. You can pass `isInteraction: false` in the
* child animation config to fix this.
*/
loop,
View
@@ -360,6 +360,8 @@ things like `transform` and `opacity` will work, but flexbox and position proper
When using `Animated.event`, it will only work with direct events and not bubbling events.
This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
### Bear in mind
While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place.

0 comments on commit a59d157

Please sign in to comment.