0

I am using react-native-reanimated v1. 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)

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • Why are not you moving that fixed text outside of the `ScrollView`? – Leri Gogsadze Mar 29 '21 at 18:45
  • @LeriGogsadze it's just a simplified case of a bigger thing where this was needed. I can definitely share that insight with you, but it might lead to a big discussion, and a XY discussion. – Noitidart Mar 29 '21 at 19:08

0 Answers0