CODEWITHSUNDEEP
reactjsreact-native
Hend El-Sahli
Hend El-Sahli

Reputation: 6742

React Native ScrollView scrollTo function is not working

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 ?

Upvotes: 6

Views: 9905

Answers (3)

Keyyubi
Keyyubi

Reputation: 273

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.

Upvotes: 4

Hend El-Sahli
Hend El-Sahli

Reputation: 6742

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.

Upvotes: 4

Irem
Irem

Reputation: 43

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?

Upvotes: 0

Related Questions