react native animation not smooth - reactjs

Question

I'm writing a sticky header above a FlatList, I have what I want, look at the picture below, but there are two problems about it. The effect I want is:
At first, the picture's height is 170
As user scrolls up, the picture goes up as well
But when user has scrolled 100, the picture stops going up and stays there, (meaning that the bottom 70 of the picture is showing)
Meanwhile, the opacity reduces from 1 to 0.5 minimum when user scrolls
The code is below the GIF
const { width: SCREEN_WIDTH } = Dimensions.get('window');
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const FULL_HEADER_HEIGHT = 170;
const DEFAULT_HEADER_HEIGHT = 70;
const HEADER_DIFF = FULL_HEADER_HEIGHT - DEFAULT_HEADER_HEIGHT;
class TestScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
};
this.scrollY = new Animated.Value(0); // How many pixels scrolled
this.headerOpacity = this.scrollY.interpolate({
inputRange: [0, HEADER_DIFF, HEADER_DIFF + 1],
outputRange: [1, 0.5, 0.5]
});
this.headerPositionY = this.scrollY.interpolate({
inputRange: [0, HEADER_DIFF, HEADER_DIFF + 1],
outputRange: [0, -HEADER_DIFF, -HEADER_DIFF]
});
}
render() {
return (
<View style={{ ... }}>
<Animated.View
style={{
transform: [{ translateY: this.headerPositionY }],
opacity: this.headerOpacity
}}
>
<Image
source={...}
style={{ width: '100%', height: FULL_HEADER_HEIGHT }}
resizeMode='cover'
/>
</Animated.View>
<AnimatedFlatList
data={this.state.data}
keyExtractor={(item) => item}
renderItem={({ item }) => (...)}
onScroll={Animated.event([{ nativeEvent: contentOffset: { y: this.scrollY } }], { useNativeDriver: true })}
/>
</View>
);
}
}
export default TestScreen;
Problem 1
The animation is not smooth
Problem 2
When the image goes up, its container seems to have stayed still, when elements of FlatList disappear, they don't disappear at the bottom of the picture, they disappear at the bottom of the original picture, which is at height 170

Answer 1

I think I have a similar problem with react-native: 0.55.4 on an iPhone 6 (real device). I tried to add a listener to the animated value and here is what it looks like:
18:24:57.157 Object {value: -39.919418166496385}
18:24:57.175 Object {value: -39.76205524921881}
18:24:57.200 Object {value: -39.42250543249108}
18:24:57.235 Object {value: -38.74063147167402}
18:24:57.626 Object {value: -20.959873329014293}
18:24:57.720 Object {value: -15.215298200036738}
18:24:57.742 Object {value: -13.990965698770527}
...
I know that the console adds a bias in the experiment, but we can still see some big time differences between different tick times, here ~400ms (which you can definitively see happening on the screen):
18:24:57.235 Object {value: -38.74063147167402}
18:24:57.626 Object {value: -20.959873329014293}
Compared to what looks normal ~20ms (60FPS should result in ~17ms between each tick):
18:24:57.157 Object {value: -39.919418166496385}
18:24:57.175 Object {value: -39.76205524921881}
Strangely when I do the animation in the other way, everything is just fine. What's also stranger is that I use the same animation (literally the same code) to animate different objects and some do just fine (both increasing and decreasing).
Just for the sake of comparison, here is the decrementing part:
18:24:55.541 Object {value: -1.124358489855093}
18:24:55.566 Object {value: -1.804371440300843}
18:24:55.592 Object {value: -3.0104530710073063}
18:24:55.607 Object {value: -3.896255056788916}
18:24:55.630 Object {value: -5.484551217549029}
18:24:55.661 Object {value: -7.919857696074535}
18:24:55.691 Object {value: -10.712999608975895}
18:24:55.707 Object {value: -12.43977121139206}
18:24:55.725 Object {value: -14.376069524734937}
18:24:55.743 Object {value: -16.422698462753544}
18:24:55.763 Object {value: -18.833926735827166}
18:24:55.796 Object {value: -23.027717951856513}
18:24:55.832 Object {value: -27.17280894556397}
18:24:55.865 Object {value: -30.581203230966732}
18:24:55.893 Object {value: -33.16734858413125}
18:24:55.908 Object {value: -34.426713502779336}
18:24:55.928 Object {value: -35.95476927982921}
18:24:55.957 Object {value: -37.822663476915075}
18:24:55.992 Object {value: -39.40622189728781}
18:24:56.007 Object {value: -39.80367046402294}
18:24:56.030 Object {value: -40}
The maximum duration between two frames looks to be around ~40ms.
Solution
I think I found what was causing this, I had a huge component that was updating while the animation was taking place. I think this caused JS to have more work to do and I guess that gives less opportunities for the animation events to be scheduled.. I'm not sure how it works internally but there probably is a single event loop (and a single execution thread) and while another routine (here the update method from my heavy component) is running, the animation step is not executed.
You have two solutions:
Check for updates that take place in parallel of your animation and prevent them from happening by defining shouldComponentUpdate(nextProps, nextState) for any component that you think is causing this JS slowdown to happen.
Use the native driver as suggested by this article: Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time