Janky translateY on Reanimated View inside of ScrollView as user scrolls

[Noitidart]

I am using react-native-reanimated v1 (cannot yet use v2). I want to make a <Reanimated.View> appear as if it is fixed within the scroll view by using translateY. GIF of how of it should behave is at very end of post. I have simplified the code in the snippet below, and I have the full working code in the snack.

https://snack.expo.io/@noitidart/reanimated-scroll-view

As you scroll, you notice the position of the view is not staying fixed at the top. I attached a video taken on iOS of the snack.

If I add scrollEventThrottle={16} it fixes the issue on iOS, but on Android if you scroll even a little faster than normal you see the transform is lagging. I think there should be a way on iOS without the scrollEventThrottle property too, it doesn't make sense to me that we need this as reanimated is supposed to update every frame.

Any ideas on how to fix this?

const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);

export default function App() {
  const translateY = Reanimated.useValue(0);


  const handleScroll = Reanimated.event([
    {
      nativeEvent: nativeEvent => Reanimated.block([Reanimated.set(translateY, nativeEvent.contentOffset.y)])
    }])

  return (
    <ReanimatedScrollView onScroll={handleScroll}>
      <Reanimated.View style={{ transform: [{ translateY }] }} />
    </ReanimatedScrollView>
  );
}

Janky on iOS

Janky on Android (with and without scrollEventThrottle={16})

Here is video of how it should be (with scrollEventThrottle={16} on iOS, but it doesn't fix up Android)

[zhigang1992]

Would it be any difference with Animated.ScrollView?