ScrollTo does not work on reanimated ScrollView

When using scrollTo on a reanimated ScrollView ref, an error is thrown: “TypeError: node.scrollTo is not a function”. I have reproduced it in a snack:

https://snack.expo.io/@jacobarvidsson/2c7078

const App = () => {
  const scrollViewRef = useRef(null);
  useEffect(() => {
    if (scrollViewRef.current) {
      const node = scrollViewRef.current;
      if (node) {
        node.scrollTo({ x: 0, y: 0 });
      }
    }
  }, [])
    return (
      <View style={styles.container}>
        <Animated.ScrollView ref={scrollViewRef}>
          <Text>Test</Text>
        </Animated.ScrollView>
      </View>
    );
};

[emzet93]

I’m facing the same issue. @jacobarvidsson did you find any workaround for this?

Edit: Actually the same problem occurs also when using default Animated API from react-native. The problem is that you get reference to the Animated component, not to the wrapped one. To access reference to ScrollView you can use getNode method. In your case it will look like this:

  useEffect(() => {
    if (scrollViewRef.current && scrollViewRef.current.getNode) {
      const node = scrollViewRef.current.getNode();
      if (node) {
        node.scrollTo({ x: 0, y: 0 });
      }
    }
  }, [])

[amanmanhas]

Hi guys, you can solve it by using the getNode() method

There are two ways to solve this issue depending on how you are creating ref.-

1. If you are using the new recommended way to create a ref to a component since React 16.3 is to use React.createRef() then you will use in this way:-

scrollView = React.createRef();
<Animated.ScrollView
  ref={this.scrollViewRef}/>
  this.scrollViewRef.current.getNode().scrollTo({x: number, y: number, animated: true|false})

1. If you are using the previous way to create a ref before React 16.3 then you will use in this way:-

<Animated.ScrollView
  ref={c => (this.myRef = c)}/>
  this.myRef.getNode().scrollTo({
    x: number, 
    y: number,
    animated: true,
  });

The difference between the above two solution is , in one you can get the getNode() method inside the current and the other you can access it without current