React-native-reanimated: ScrollTo does not work on reanimated ScrollView

[jacobarvidsson]

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 });
      }
    }
  }, [])

[jacobarvidsson]

@emzet93 The workaround works, thanks! Obviously better if the animated component would forward the ref of the actual component, so leaving this open for now.

[nhuesmann]

@emzet93 Thanks for posting your solution, it worked for me too.

[yairopro]

I opened a PR that would solve this issue.

[co2nut]

Have you guys tried with renderScrollComponent inside FlatList? It seems to be not working.

Will get error TypeError:null is not an object( 'reffVar.current.geNode' )

[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})

2) 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