Using the Animated.Flatlist or Animated.ScrollView to animate an Animated.View is not smooth

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.