status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 https://github.com/facebook/react-native/pull/16136

Differential Revision: D6057466

Pulled By: hramos

fbshipit-source-id: 946bcde97b364c623b48ddaeb643309630c072c9
This commit is contained in:
Arman Dezfuli-Arjomandi 2017-10-13 17:36:42 -07:00 committed by Facebook Github Bot
parent e268883fdc
commit a59d157df4
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Libraries/Animated/src/AnimatedImplementation.js
View File

@ -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,

2
docs/Animations.md
View File

@ -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.