scrollTo is undefined on animated ScrollView

Just adding another answer as both "getNode" and "_component" solution didn't work for me. I'm using react native 0.57. Manage to make it work using scrollToOffset

componentDidMount() {
  this.refs.listRef.scrollToOffset({ offset: 0,  animated: false })
}

render() {
  return (
    <FlatList ref="listRef" ... />
  }
};

@max23_ 's answer might work for now, but is not the correct way of doing it - as a rule of thumb, we should never access private variables directly as these are often subject to change. (edit: no disrespect :-) )

Due to this pull request, the new and future-proof way of getting the wrapped component's ref is to use the getNode() utility method, as accessing private variables (prepended with _) is not safe from future API changes.

So, the new way of doing it is

ref={c => (this.myRef = c)}

and then when calling the method, doing

this.myRef.getNode().scrollTo({
  y: 0,
  animated: true,
});

:-)

Try this to get the ref of the component returns from Animated.createAnimatedComponent method:

ref={(ref) => this.list = ref._component}

Then, calling this.list.scrollTo({x: 0, y: 0}) should work.

Building on the answer from @jhm - the new, recommended way to create a ref to a component since React 16.3 is to use React.createRef() as mentioned by @cyqui.

With a normal (note: non-animated) component, we'd simple create a ref to the ScrollView in the recommended way:

scrollView = React.createRef();

<ScrollView
  ref={this.scrollView}>

and use static methods as such:

this.scrollView.current.scrollTo({x: number, y: number, animated: true|false})

EDIT: As of RN 0.62 the below is no longer necessary

However, when working with an Animated component, we're moving into direct manipulation which requires us to get the native node of the component before calling any static methods. Therefore, you'd end up with the following:

scrollView = React.createRef();

<Animated.ScrollView
  ref={this.scrollView}>

this.scrollView.current.getNode().scrollTo({x: number, y: number, animated: true|false})