Animation done in onScroll flickers on iOS
See original GitHub issueVibrating while scrolling.
const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
<AnimatedFlatList
style={{transform: [{ translateY: headerHeight }]}}
contentContainerStyle={{
minHeight: SCREEN_HEIGHT - HEADER_MAX_HEIGHT,
paddingTop: 0,
paddingBottom: HEADER_MIN_HEIGHT,
marginTop:3,
}}
scrollEventThrottle={16}
onScroll={Animated.event(
[{nativeEvent: { contentOffset: {y: this.scrollY}}}],
{ useNativeDriver: true }
)}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={()=>alert(2)}
/>
}
refreshing={()=>alert(99)}
keyExtractor={(item, i) => i.toString()}
data={[
{key: 'acc'}, {key: 'b'},{key: 'a'}, {key: 'b'},{key: 'a'}, {key: 'b'},
{key: 'acc'}, {key: 'b'},{key: 'a'}, {key: 'b'},{key: 'a'}, {key: 'b'},
{key: 'acc'}, {key: 'cc'},{key: 'a'}, {key: 'b'},{key: 'a'}, {key: 'b'},
{key: 'acc'}, {key: 'b'},{key: 'a'}, {key: 'b'},{key: 'a'}, {key: 'b'},
{key: 'acc'}, {key: 'cc'},{key: 'a'}, {key: 'b'},{key: 'a'}, {key: 'b'},
{key: 'acc'}, {key: 'b'},{key: 'a'}, {key: 'b'},{key: 'a'}, {key: 'b'},
{key: 'a'}, {key: 'zzzz'},]}
renderItem={({item}) => (
<VendorListItem
item={item}
style={{margin:7, marginLeft:10, marginRight:10}}
/>
)}
/>
React Native version: React Native Environment Info: System: OS: Linux 4.13 Ubuntu 16.04.4 LTS (Xenial Xerus) CPU: (4) x64 Intel® Core™ i3-2328M CPU @ 2.20GHz Memory: 418.91 MB / 9.60 GB Shell: 5.1.1 - /usr/bin/zsh Binaries: Node: 8.11.1 - /usr/bin/node Yarn: 1.9.4 - /usr/bin/yarn npm: 6.2.0 - /usr/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Android Studio: 3.0 AI-171.4443003 npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.5 => 0.59.5 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7 react-native-rename: 2.2.2 react-native-run-android: 0.0.1 svg-to-react-native-cli: 0.0.3
Steps To Reproduce
Add translateY to FlatList animated component.
Issue Analytics
- State:
- Created 4 years ago
- Comments:15 (2 by maintainers)
Top Results From Across the Web
iPhone WebKit CSS animations cause flicker - Stack Overflow
For us, we found that overflow-y: scroll on an absolute or fixed positioned element was causing major flickering on iOS.
Read more >Safari causing "flickering" with scroll animation [SOLVED]
In Safari the links appearing in the top nav bar keep flickering like crazy. Anyone have any suggestions or advice on how to...
Read more >Let's Make One of Those Fancy Scrolling Animations Used on ...
By synchronizing each frame to the user's scroll position, we can play the animation as the user scrolls down (or back up) the...
Read more >ScrollTrigger flickering when pinned - GSAP - GreenSock
Hi! We're building a site where different sections gets pinned as you scroll down. ScrollTrigger is really great for this and has saved...
Read more >Avoid CSS flickering - Maxime Lafarie
If you have several HTML elements that are nested into a common element (the parent) and you attached a transform effect with a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks for the info, I’ll try to have that commit in the next 0.59 (since it’s already in the 0.60 rc).
There was a bug in scroll throttling that caused this - should be fixed in https://github.com/facebook/react-native/commit/c87de765f6a9ebf656c188fa2115a1ba01b7939c