question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation done in onScroll flickers on iOS

See original GitHub issue

Vibrating 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:closed
  • Created 4 years ago
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
kelsetcommented, May 31, 2019

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

1reaction
sahrenscommented, May 31, 2019

There was a bug in scroll throttling that caused this - should be fixed in https://github.com/facebook/react-native/commit/c87de765f6a9ebf656c188fa2115a1ba01b7939c

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found