scrollTo

scrollTo lets you synchronously scroll to a given X or Y offset.

Reference

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

function App() {
  const animatedRef = useAnimatedRef();
  const scrollY = useSharedValue(0);

  useDerivedValue(() => {
    scrollTo(animatedRef, 0, scrollY.value, true);
  });

  return (
    <Animated.ScrollView ref={animatedRef}>{/* ... */}</Animated.ScrollView>
  );
}

Type definitions

function scrollTo<T extends Component>(
  animatedRef: AnimatedRef<T>,
  x: number,
  y: number,
  animated: boolean
): void;

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.

x

Value in pixels to scroll to on the horizontal X axis.

y

Value in pixels to scroll to on the vertical Y axis.

animated

Whether the scroll should be smooth (true) or instant (false).

Returns

scrollTo returns undefined.

Example

Loading...

Remarks

• The scrollTo function can only be called from the UI thread.

Platform compatibility

Android	iOS	Web
✅	✅	✅