Between stopping drag to end of scrolling, programmatic scrolling behavior incorrect on Android

[MaratSHU]

Description

Programmatically controlled ScrollView reacts with some shift when user remove finger from the main ScrollView. Same behavior with FlatList. In the video, you can see bouncing when dragging is over, and its absence if you do not take your finger off the screen. This behavior is observed on Android, it works fine on iOS.

SyncScrolls.mp4

Expected behavior

Synchronized movement of ScrollViews during all scroll events

Actual behavior & steps to reproduce

Synchronized movement of elements work fine only on drag, and buggy from drag end till scroll end. You can get rid of this if you set "decelerationRate={1}", but this is not the behavior that is expected.

Snack or minimal code example

It's not obvious to look at the ScrollView, and so I add elements that should stay on the left side of the screen when scrolling.

const topScrollerRef = useAnimatedRef()
const bottomScrollerRef = useAnimatedRef()
const scrollX = useSharedValue(0)

const scrollHandler = useAnimatedScrollHandler({
  onScroll: (event)=>{
    scrollX.value = event.contentOffset.x
    scrollTo(topScrollerRef, scrollX.value, 0, false)
  },
}, [])

return (
  <View style={styles.container}>
    <View style={styles.viewStyle}>
    <Animated.ScrollView
      horizontal
      ref={topScrollerRef}
      scrollEnabled={false}
      >
      {Array(10).fill(0).map((_, idx)=>{
        const animStyle = useAnimatedStyle(()=>{
          const translateX = interpolate(
            scrollX.value,
            [idx * 400, (idx+1) * 400],
            [0, 400],
            Extrapolate.CLAMP
            )
            return {
              transform: [{translateX}]
            }
          })
          return <Animated.View style={{
            width: 400, 
            height: 40, 
            backgroundColor: `#${idx}f0000`, 
            borderWidth: 1, 
            borderColor: 'green'
            }} 
            key={idx} >
          <Animated.View style={[
            {
              position: 'absolute',
              left: 0,
              top: 4,
              width: 80,
              height: 30,
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: 'orange',
            },
            animStyle
          ]} />
        </Animated.View>})}
    </Animated.ScrollView>
    </View>
    <Animated.ScrollView
      horizontal
      onScroll={scrollHandler}
      ref={bottomScrollerRef}
      >
      {Array(10).fill(0).map((_, idx)=><Animated.View style={{
        width: 400, 
        height: 40, 
        backgroundColor: `#${idx}f0000`, 
        borderWidth: 1, 
        borderColor: 'green'}} 
        key={idx}/>)}
    </Animated.ScrollView>
  </View>
)

Package versions

• React Native: 0.63.4
• React Native Reanimated: 2.2.0
• NodeJS: v14.17.5
• Xcode: 12.5.1
• Java & Gradle: 6.3

Affected platforms

• Android
• iOS
• Web

[github-actions]

Issue validator

The issue is valid!