React-native: Using the Animated.Flatlist or Animated.ScrollView to animate an Animated.View is not smooth

[KakarN]

Is this a bug report?

Yes

Environment

1. react: 16.0.0-alpha.12,
2. react-native -v: ^0.47.0,
3. node -v: v7.7.3
4. npm -v: 4.1.2
5. yarn --version: 0.21.3

• Target Platform:
  iOS and Android

• Development Operating System:
  macOS

• Build tools:
  expo

Steps to Reproduce

1. Created an animated component of FlatList.
2. Used the onScroll function to update the animated value.
3. Placed a view (Animated.View) as the header above the animated FlatList using position absolute.
4. Interpolate the animated value to change the view (Animated.View) using transform properties.

Expected Behavior

I saw this issue of how using scrollEventThrottle helps the smoothness. So I thought using FlatList would be smooth.

Actual Behavior

However, when scrolling the FlatList, the animated view does animate, but the animation is not smooth. If your scroll while pressing, it's smooth. But if you scroll and leave the finger, it's jumpy ( I don't know how to describe it. Sorry). The animated view (Header) animation is not smooth at all.

Reproducible Demo

Snack link for animated FlatList and animated header
Animated Flat List

Update

So, I tried to implement the same functionality using ScrollView. However, I think, its even worse using ScrollView when compared to FlatList.

Here is the expo snack demo: Animated ScrollView Header

I think I need to mention how I got here at the first place. So, I tried to implement this by a very nice tutorial in Medium, and also by watching this awesome youtube react conf viedo by @brentvatne . However, the exact code used on youtube video has the same effect. Also, on the Medium tutorial, the author has given a Link to his expo Animated header link, which works very smoothly on the device. But the same code doesn't work smoothly when I copy paste the code and test it. So, I think the problem is with the react or react native version. I will update if I have any new update. Thank you.

[jevakallio]

I can reproduce this, seems like binding Animated.Views to ScrollView scroll position with Animated.event and useNativeDriver has gotten deoptimised on Android. It seems to mainly affect momentum scrolling, and is not noticeable while scrolling with finger held down.

Doing some bisecting on Snack, seems like this broke between Expo 18 (React Native 0.45) and Expo 19 (React Native 0.46).

Between those versions, seems like there were two commits landed to Animated, both by @janicduplessis:

• Native Animated - Call x.__makeNative before super.__makeNative https://github.com/facebook/react-native/commit/08f41bcbf4bfa208ce32572cb3e934a66fa97481
• Native Animated: Prevent views driven by native animated from being optimized away https://github.com/facebook/react-native/commit/c87524e0a6f1b411adc3d54741f7ff58faa1e38a

Neither of them seems to be the obvious candidate.

The diff is https://github.com/facebook/react-native/compare/v0.45.1...v0.46.4#diff-f048d92ca0be679bc38d38147b311100

Additional steps to reproduce:

1. Open this Snack on Android
2. Swipe the screen up and down to show/hide the header bar
3. Note that header bar animation is glitchy.
4. Switch to Expo version 18 with the Snack version switcher
5. Reopen Expo app, scan the QR code again
6. Swipe the screen up and down to show/hide the header bar
7. Note that header bar animation is no longer glitchy

[janicduplessis]

There has been a regression with scroll events on Android. https://github.com/facebook/react-native/commit/e964a7f4ef93fcadf5cfd1c269b77b13cb3be374 fixes it, I'll try to get it cherry picked in the next 0.48 patch.

[eladgel]

This also happens on RN v0.46.4 ios

[bitcrumb]

+1

I am experiencing this behavior on iOS as well. I also tried out setting scrollEventThrottle to 16. But the experience was still jittery.

[KakarN]

I think this is solved with the new updates. I have tested this both with the ScrollView and FlatList, and it's fine now.

@jevakallio Can you please confirm? So that I can close this issue?

[ssssssssssss]

Looks good now.

[MSSPL-PiyaleeMaiti]

@KakarN what is your version of react-native?

[bitcrumb]

@KakarN Which version are you referring to? I would like to update as well since we are facing the issues too.

[KakarN]

@MSSPL-PiyaleeMaiti @bitcrumb hi! I am actually using expo. And when this question was asked, the expo SDK was 20 which was based on react native 0.47 (which had the android regression issue). But yesterday expo released SDK 21 which is based on react native 0.48, (and the regression was fixed). Now I don't see any regression issue and the scrolling and animation are working smoothly.

[bitcrumb]

Thanks for the quick feedback. We updated our React Native version to 0.48.3 and it is indeed resolved. Thanks for pointing this out to us!

[KakarN]

@bitcrumb No problem!

[yaronlevi]

The code in the expo link you attached saved me hours of googling and got me started quickly. Thank you!