How do you build a custom scroll interpolation using useAnimatedScrollHandler?

Short answer

Use useAnimatedScrollHandler to record the scroll offset (contentOffset.y) in a Shared Value, then use interpolate to smoothly link it to changes in a header's opacity or size.

Explanation

useAnimatedScrollHandler listens to scroll events at 60 fps on the UI Thread. With interpolate, map an input range (for example, scrolling from 0 to 150 pixels) to an output range (shrinking the title from 1 to 0.8 and changing the header background from transparent to opaque).

Code example

const scrollY = useSharedValue(0);

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

const headerStyle = useAnimatedStyle(() => ({
  opacity: interpolate(scrollY.value, [0, 100], [0, 1], Extrapolation.CLAMP),
}));

<Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16}>
  {/* content */}
</Animated.ScrollView>;

Common mistakes

• Forgetting to set scrollEventThrottle={16}, causing iOS to send scroll events too infrequently for smooth animation.

Follow-up questions

• What are Shared Values in Reanimated, and how do they differ from useState?

Sources

• Reanimated docs — interpolate
• Reanimated docs — useAnimatedScrollHandler