React Native ScrollView scrollTo function is not working

Question

I'm trying to make scroll to the top, if a certain condition is met, in the component's componentWillReceiveProps event ... but nothing happens:

componentWillReceiveProps(nextProps) {
     // some code...

    if (newQuery === query && this.scrollViewRef.current) {
      console.log('Should scroll to top'); // << logs successfully

      this.scrollViewRef.current.scrollTo({
        x: 0,
        y: 0,
        duration: 500,
        animated: true,
      });
    }
  }

Code snippet of how I created ref for the scrollView:

class SearchResult extends React.Component {
  constructor(props) {
    super(props);

    this.scrollViewRef = React.createRef();
  }
//...
}

render method:

render () {
   return (
      <ScrollView
        ref={this.scrollViewRef}
        contentContainerStyle={{ marginVertical: 8 }}
      >
    ...
    )
}

I also tried to scroll manually via a button press ... doesn't work as well

Any help ?

nothing at all ... I logged `this.scrollViewRef.current`, and scrollTo function was there — Hend El-Sahli, Mar 23 '19 at 17:33
unfortunately, it gave this error: `this.scrollVieeRef.getNode is not a function` ... — Hend El-Sahli, Mar 23 '19 at 17:41
exactly like in the docs here https://reactjs.org/docs/refs-and-the-dom.html — Hend El-Sahli, Mar 23 '19 at 19:04
Try doing the ref the other way: `ref={(_) => this.ref = _}` and then try the `.getNode()` as above. — Colin Ricardo, Mar 23 '19 at 19:16
@Colin thank you very much indeed ... tried the second format of making a ref ... but went again to the 'silence mode' ... no warning ... errors ... as if I did nothing — Hend El-Sahli, Mar 23 '19 at 19:24
@Colin ... check out my answer ... the issue was in the container ... thank you for all of your suggestions anyway — Hend El-Sahli, Mar 23 '19 at 20:05

score 4 · Answer 1 · edited Oct 08 '20 at 20:59

4

For those people who use useRef() method and gets 'xRef.scrollTo' is not a function error, try to use it like xRef.current.scrollTo({[YOUR_PARAMS]}).

I didn't know this current thing and was getting crazy.

edited Oct 08 '20 at 20:59

Dharman

30,962
25
85
135

answered Oct 08 '20 at 20:53

Keyyubi

247
1
3
13

score 3 · Accepted Answer · answered Mar 23 '19 at 20:04

I figured this out ...

The scrollView worked perfectly in an isolated env ( a brand new project ) ...

I thought the issue could be in the container of that scrollview ... and I found that the parent component has also a ScrollView ... once i removed it, everything worked perfectly.

score 0 · Answer 3 · answered Mar 23 '19 at 17:41

0

React Native docs say:

Note: The weird function signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

Maybe try scrollToOffset method, if you are also using FlatList with ScrollView?

answered Mar 23 '19 at 17:41

Irem

43
1
8

1

Thank you but this is a warning not to use old signature of scrollTo (x, y, animation) ... we should use scollTo({ x: 5, y: 5, animated: true }) ... and that's what im currently using.... and the code in my question doesn't throw any error or even a warning – Hend El-Sahli Mar 23 '19 at 17:49
I see. Have you checked [this question](https://stackoverflow.com/questions/33208477/react-native-android-scrollview-scrollto-not-working) to see if this is similar?? – Irem Mar 23 '19 at 17:53
1

yes I did my own research before posting ... and I came across this stackoverflow post ... tried everything in it ... didn't work as well ... but thank u anyway – Hend El-Sahli Mar 23 '19 at 18:00

React Native ScrollView scrollTo function is not working

3 Answers3