How to fix scrollTo is undefined on animated ScrollView with React Native?

Sometimes, we want to fix scrollTo is undefined on animated ScrollView with React Native.

In this article, we’ll look at how to fix scrollTo is undefined on animated ScrollView with React Native.

How to fix scrollTo is undefined on animated ScrollView with React Native?

To fix scrollTo is undefined on animated ScrollView with React Native, we can assign it it a ref.

For instance, we write:

import * as React from 'react';
import { View, Animated, ScrollView, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

export default function App() {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current.scrollTo({ y: 100, animated: true });
  }, []);

  return (
    <View>
      <AnimatedScrollView ref={ref} style={{ height: 200 }}>
        {Array(200)
          .fill()
          .map((_, i) => (
            <Text key={i}>{i}</Text>
          ))}
      </AnimatedScrollView>
    </View>
  );
}

to create an animated scroll view with createAnimatedComponent.

Then we assign a ref to that by calling useRef to create a ref and assign the ref as the value of the ref prop.

Next, we get the value of the ref with ref.current and call scrollTo on it to scroll it.

Conclusion

To fix scrollTo is undefined on animated ScrollView with React Native, we can assign it it a ref.