Skip to main content
Version: 3.x

useScrollViewOffset

useScrollViewOffset lets you to create animations based on the offset of a ScrollView. The hook automatically detects if the ScrollView is horizontal or vertical.

Reference

import { useScrollViewOffset } from 'react-native-reanimated';

function App() {
const animatedRef = useAnimatedRef();
const scrollOffset = useScrollViewOffset(animatedRef);
return (
<Animated.ScrollView ref={animatedRef}>{/* ... */}</Animated.ScrollView>
);
}

Type definitions

function useScrollViewOffset(
animatedRef: AnimatedRef<AnimatedScrollView>,
initialRef?: SharedValue<number>
): SharedValue<number>;

Arguments

animatedRef

An animated ref connected to the ScrollView component you'd want to scroll on. The animated ref has to be passed either to an Animated component or a React Native built-in component.

initialRef
Optional

An optional shared value to be updated with the scroll offset. If not provided a new shared value will be created internally.

Returns

useScrollViewOffset returns a shared value which holds the current offset of the ScrollView.

Example

Loading...

Platform compatibility

AndroidiOSWeb