The performance of the scrollTo function is very poor on Android, with severe jitter

[zyslife]

The performance of the scrollTo function is very poor on Android, with severe jitter

Description

When I operate the ScrollView to call the ScrollTo function at a certain frequency, I notice some page jitter, mostly on Android

Expected behavior

Hopefully the scrolling is smooth

Actual behavior & steps to reproduce

The scrolling is very uneven

Snack or minimal code example

import React, { useEffect } from 'react';
import {
    View,
    ScrollView,
} from 'react-native';
import {
    useAnimatedRef,
    useDerivedValue,
    useSharedValue,
    withTiming,
    scrollTo
} from 'react-native-reanimated'
const TestScrollTo = () => {
    const mRef = useAnimatedRef<ScrollView>()
    const testValue = useSharedValue(0)
    useEffect(() => {
        testValue.value = withTiming(2000, { duration: 10000 })
    }, [])
    useDerivedValue(() => {
        scrollTo(mRef, 0, testValue.value, false);
    })
    return <ScrollView ref={mRef}>
        {Array.from({ length: 200 }).map((item, index) => {
            return <View key={'Test_' + index} style={{ height: 200, borderColor: index % 2 ? 'red' : 'blue', borderWidth: 1 }} />
        })}
    </ScrollView>
}

export default TestScrollTo

Package versions

• React Native:0.63.4
• React Native Reanimated:2.0.0
• NodeJS:v14.15.3
• Xcode:12
• Java & Gradle:6.1

Affected platforms

• Android
• iOS
• Web

[github-actions]

Issue validator

The issue is valid!

[mrousavy]

Could you share a video of the lag?

[zyslife]

Could you share a video of the lag?

Okay, I'll upload it later.

[zyslife]

lag.mp4

@mrousavy Thank you for your attention. In this video, we should be able to see a clear sense of lag.
This video uses the code above.

[vonovak]

I know the repro code is taken from the example https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/api/nativeMethods/scrollTo/ but personally it seems weird to me to call scrollTo inside useDerivedValue - useDerivedValue should not have any side effects but just derive a value from another one.

Seems to me that using useAnimatedReaction is more appropriate or perhaps you could try animate contentOffset prop (probably needs a call to addWhitelistedUIProps) - but I never tried this, just an idea

[zyslife]

I know the repro code is taken from the example https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/api/nativeMethods/scrollTo/ but personally it seems weird to me to call scrollTo inside useDerivedValue - useDerivedValue should not have any side effects but just derive a value from another one.

Seems to me that using useAnimatedReaction is more appropriate or perhaps you could try animate contentOffset prop (probably needs a call to addWhitelistedUIProps) - but I never tried this, just an idea

Thank you for your reply. I'm sorry I just saw it. We should really do these things in useAnimatedReaction.But that doesn't affect what we end up seeing. In addition, the contentOffset has not been added to addWhitelistedUIProps yet.

[jishuxx]

validator
I've had this problem too, see when it can be resolved? Thank you very much @mrousavy

[tomekzaw]

Hello! Thanks for reporting this issue. We'll definitely take a look on that.

I know the repro code is taken from the example https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/api/nativeMethods/scrollTo/ but personally it seems weird to me to call scrollTo inside useDerivedValue - useDerivedValue should not have any side effects but just derive a value from another one.

That's right. We need to update our docs to call scrollTo within useAnimatedReaction instead of useDerivedValue.

[bartlomiejbloniarz]

Hi @zyslife, I tried to reproduce the issue with no success. Is it still happening for you?