Skip to main content

useScrollValueY

This hook returns a shared animated scroll Y value (SharedValue<number> from react-native-reanimated). Use it to coordinate scroll-based animations across components, such as custom animated headers that respond to scroll position.

Must be used within an AnimatedValueProvider.

Import​

import { useScrollValueY } from '@appmaker-xyz/react-native';

Basic Usage​

import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';

const scrollY = useScrollValueY();

// Create animated styles based on scroll position
const headerStyle = useAnimatedStyle(() => ({
  opacity: interpolate(scrollY.value, [0, 100], [1, 0]),
  transform: [{ translateY: interpolate(scrollY.value, [0, 100], [0, -50]) }],
}));

return (
  <Animated.View style={headerStyle}>
    <Text>Custom Header</Text>
  </Animated.View>
);

Return Value​

PropertyTypeDescription
scrollYSharedValue<number>A Reanimated shared value representing the current vertical scroll offset. Updated as the user scrolls.