0

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.

Firman Jamal
  • 113
  • 2
  • 12

3 Answers3

3

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

Firman Jamal
  • 113
  • 2
  • 12
0

Try adding useNativeDriver:

onScroll={
    Animated.event([
        {
         nativeEvent: {
            contentOffset: {
                y: scrollY,
           },
         },
      },
    ], 
    { useNativeDriver: true })
}

But I think in React Native, ScrollView is not supposed to work with extremely long duplicated content. I suggest you to use a flatlist for your use case.

Andus
  • 1,713
  • 13
  • 30
  • Hi there, thanks for your reply. Well, the long duplicated content is used for demo purposes in Snack. The problem still persists even when I tried to limit down the number of components in my real project code to simulate a shorter scroll length. I'm not quite sure if FlatList fits my use case. Adding useNativeDriver will give me an error "this.props.onScroll is not a function" – Firman Jamal Jan 20 '20 at 03:52
0

Adding removeClippedSubviews = {true} on top most ScrollView solved my issue and app performance feels so light.

Wahas Ali Mughal
  • 187
  • 2
  • 11