The scrolling following will jitter

[yujingwyh]

Why does the Animated.View shake when the Animated.ScrollView scrolls?
if you use react-native's Animated with useNativeDriver, there will be no jitter.

export default function ScrollWithBox() {
  const y = useSharedValue(0);


  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      y.value = event.contentOffset.y;
    },
  });

  const boxStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: -y.value }],
  }));

  return (
    <View style={{ flex: 1 }}>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        {[...Array(40)].map((_, i) => (
          <Text key={i} style={{ height: 60 }}>{`Row ${i}`}</Text>
        ))}
      </Animated.ScrollView>
      <Animated.View
        style={[
          {
            position: "absolute",
            right: 0,
            top: 200,
            width: '100%',
            height: 80,
            backgroundColor: "tomato",
          },
          boxStyle,
        ]}
      />
    </View>
  );
}

[tomekzaw]

Hi @yujingwyh, this is a known problem, should be fixed in React Native 0.82. For now, you can use the following workaround described here: https://docs.swmansion.com/react-native-reanimated/docs/guides/feature-flags#disable_commit_pausing_mechanism

[yujingwyh]

Do I have to use version 0.81?

[tomekzaw]

Yes