CODEWITHSUNDEEP
react-nativereact-native-scrollviewreact-native-animatablereact-native-component
Firman Jamal
Firman Jamal

Reputation: 123

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.

Upvotes: 0

Views: 6923

Answers (3)

Wahas Ali Mughal
Wahas Ali Mughal

Reputation: 188

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

Upvotes: 0

Firman Jamal
Firman Jamal

Reputation: 123

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

Upvotes: 4

Andus
Andus

Reputation: 1731

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.

Upvotes: 0

Related Questions