Animation done in onScroll flickers on iOS

[arshidkv12]

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(R) Core(TM) 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.

[kelset]

I don't understand, is this a question? A bug?

[arshidkv12]

Bug..

…

On Mon, May 13, 2019, 2:49 PM Lorenzo Sciandra ***@***.***> wrote: I don't understand, is this a question? A bug? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#24826 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABT5Y5OMHPL5GGPAKWNSOZLPVEXCHANCNFSM4HMM4YPQ> .

[kelset]

Ok then, can you create a repro (which means, a react-native init-ed project with the minimal changes that leads to creating the same issue you are reporting)?

Unfortunately, I have no way of helping you in a meaningful way – there is no easy way for me to recreate the situation and check that the issue reported is still there when changing the code.

[arshidkv12]

I added code in expo. https://snack.expo.io/ryuNM6U24

Please check header (blue color) animation. We can see, it is vibrating, if we observe closely.

[kelset]

Expo is still relying on RN 0.57.x, we'd need a react-native init-ed project to verify that it's still an issue on 0.59

[arshidkv12]

I tried with RN 0.59 in laptop. I am getting same issue in Android.

[holospeed]

I faced the same issue. At the version of 0.59.4 the animation was fluent, but at the version 0.59.8 the animation was "vibrating". I uploaded the "cleaned" version of my project so you can test it (I deleted every code from it except the animation).

Here a gif about the animation with React Native version of 0.59.4:

And here here the same project with React Native version of 0.59.8

The repo of the project:
https://github.com/holospeed/reactnativescrollviewanimation

[kelset]

Interesting, thanks for providing the repro! Given that now we know that it must be a commit we cherry picked between .4 and .8, do you have any idea of which one it may be?

[holospeed]

It's looks like the problem appears since 59.7

59.6 looks fluent

( I just tested on iOS simulator)

[kelset]

Thanks @holospeed for investigating - then I guess it's a matter of understanding which one of the commits cherry picked created this lag...

(btw AFAIK 0.59.7 is actually "not real", we had issues with releases, so I feel it's one of the commits from 0.59.8 so here -> https://github.com/facebook/react-native/releases/tag/v0.59.8 and I'd bet it's likely that this is connected to the root cause: 74d740c)

[holospeed]

I think this commit 39776a cause the issue. With the older version of React/Views/ScrollView/RCTScrollView.m the animations looks fluent. ( I just removed the added codes, brought back the deleted ones and the scroll animation looked fluent again)

[kelset]

Oh, interesting - thanks for looking into this! cc @sahrens, this sounds like it may need to be looked at

[sahrens]

There was a bug in scroll throttling that caused this - should be fixed in c87de76

[wcandillon]

This issue can be closed via c87de76

[kelset]

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