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

react-native expo react-native-flatlist react-animated
Kakar picture Kakar · Sep 3, 2017 · Viewed 9.2k times · Source

I am would like to make an animated header.

  1. I 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. Finally, interpolate the animated value to change the view (Animated.View) using transform properties.

The animation works fine, but the animation is not smooth at all.

I saw this issue of how using scrollEventThrottle helps the smoothness. So I thought using FlatList would be smooth but it's not. 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 scrolling is smooth but the animated view (Header) animation is not smooth at all.

Environment

  • react: 16.0.0-alpha.12,
  • react-native: ^0.47.0,
  • node: v7.7.3
  • npm: 4.1.2
  • yarn: 0.21.3

Target Platform: iOS and Android

Build tools: expo

Link to snack demo

Update

So, I tried to implement the same functionality using ScrollView. However, I think, its event 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 Brent. 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. But the same code doesn't work smoothly when I copy paste the code. So, I think the problem is with the react or react native version. I will update if I have any new update. Thank you.

Answer

bend picture bend · Sep 15, 2017

There has been a regression in React Native 0.46 which, fortunately, has been fixed in 0.48.2 (see this issue and this PR). That's why you're having the issue with recent Expo versions. I've had this problem with custom parallax images, and this was solved by building a custom binary with RN 0.48.3.

Your code is fine, even though I would recommend setting scrollEventThrottle to 1 as this really helps smoothing things out on iOS.

Related questions

Hide header in stack navigator React navigation

I'm trying to switch screen using both stack and tab navigator. const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification}, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), }, }); In this case stacknavigator is used first and then tabnavigator. and …

Read More
What is the difference between Expo and React Native?

From the Expo website Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript. Isn't this what React Native does? What's the difference?

Read More
Cannot add task 'wrapper' as a task with that name already exists

When installing 'react-native init AwesomeProject' I get this error when I run react-native run-android: Could not determine java version from '11.0.1'. A quick google suggests I need to update the distributionUrl in the Gradle-wrapper. Having done this I am …

Read More