Search code examples
react-nativereact-native-scrollviewreact-native-animatablereact-native-component

How to solve React Native Scroll Animation issue during slow scroll?


I have made an example code here with Snack expo Animated Header

The issue that I'm having is that my animation is not smooth enough. It looks like it's shaking.

Demo video YouTube Video

I can't seem to find what's the issue here and also tried to fiddle around with the scrollEventThrottle, alwaysBounceVertical, bounces, bouncesZoom props in ScrollView.


Solution

  • I figure out what the problem is and the issue is not because of the performance.

    The problem is because of the styling on the header. Adding the position to absolute will solve this problem.

    But there's another issue that appeared when having the position as absolute, the component inside the header such as TextInput won't appear when a touch event occurs.

    To solve this new issue, you have to add the zIndex. More tutorial about zIndex

    Animated Header Fixed