scrollTo is undefined on animated ScrollView

Question

When using Animated.createAnimatedComponent(ScrollView) to create an animated ScrollView it\'s not longer possible to use scrollTo.

<

Answer 1

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

:-)

Answer 2

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" ... />
  }
};

Answer 3

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

Answer 4

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.

Answer 5

If RN >= 0.59 (maybe earlier) and the following Ref setup:

const ScrollViewX = Animated.createAnimatedComponent(ScrollView);

  _scrollView = React.createRef();

<ScrollViewX
      ref={this._scrollView}>

You can manually scroll an Animated component this way :

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

(ScrollToOffset is deprecated and probably removed in 0.6)