React-native: ScrollView.scrollTo method not working

[valentinacala]

🐛 Bug Report

Hi all,
I'm experiencing issues with the method "scrollTo" on the ScrollView component.
I applied the same approach on a FlatList component (using the scrollToIndex method) and it works, while any other try on scrollView fails.

Expected Behavior

Using react-navigation, I expect the list scrolls to the first item every time I return on the screen from another screen. Trying it, the component doesn't scroll to the first item.

Code Example

 class MyClass extends React.PureComponent<Props> {
   private MyRef =  React.createRef<ScrollView>();

    private scrollToTop = () => {
     this.MyRef.current && 
         this.MyRef.current.scrollTo({x: 0, y: 0, animated: false });
    }

    public render() {
       return (
          <NavigationEvents onWillFocus={this.scrollToTop} />
           <ScrollView ref={this.ServiceListRef}>
                  <ListItem>... </ListItem>
                  <ListItem>... </ListItem>
            </ScrollView>
        )};
 }

Environment

React Native Environment Info:
npmPackages:
react: 16.8.3
react-native: 0.59.3

[JKCooper2]

Can you confirm the scrollToTop is being fired and that the ref exists when you do call it.

My guess is the scrollToTop is being fired before the element is initially rendered and so the dom element isn't available to do anything. One way to check is to wrap the scrollTo call in a setTimeout of 500ms and seeing if it works correctly then. If it does it mean you need to change your code logic rather than it being a bug.

[valentinacala]

@JKCooper2 thank you for your answer. Actually, I found that the problem was related to the fact that my ScrollView was placed as child of a Content tag and the scroll behaviour I experienced was related to it instead of my scrollView.

Thank you and Regards!

[bhavinwebdesk]

@valentinacala scrollTo working for you in Android?

[valentinacala]

Hi @bhavinwebdesk , as mentioned, I solved the issue and it is worked as expected

[Monte9]

hmm.. I am running into this after I upgraded to v0.59. 🤔

[Louis345]

@Monte9 I am also. Any idea on how you resolved it?

[msageryd]

I went from 0.57 to 0.60.4 and my previously working scrollTo-code stopped working (iOS).

I can confirm that my scroll function is being called with correct parameters, but nothing happens.

I also tried to set scrollEnabled={true} which correctly let me scroll manually via touch, but scrollTo still doesn't work.

[Louis345]

@msageryd I have been trying to have this issue looked at with no help. I created a StackOverFlowPost here https://stackoverflow.com/questions/57385037/react-natives-animated-scrollview-is-not-allowing-me-to-programmatically-scroll. I even went as far as to offer a bounty to no avail. I think this ticket needs to be reopened again.

[msageryd]

It seems like something has changed with the timing for mounting stuff (between RN versions). I will go through my code again (in a couple of days), as I suspect that I'm using some of the soon-to-be deprecated lifecycle functions. The fact that they are now considered "unsafe" to use might be due to some timing issues (wild guess).

I got my code to work by simply putting the scrollTo in a 100ms timeout. This indicates that the scrollview is not quite mounted at the first try. I'm actually fine with the timeout for my use case, but I want to solve this anyway because I don't like hacky solutions.

[Louis345]

@msageryd thank you for this. It will help me finally upgrade. If you want, you can respond my to question on StackOverflow, so I can give you some bounty points.

[sftgf]

I couldn't get this to work even with adding a timeout. Did you find a way to make it work, @Louis345 ?

[Louis345]

@sftgf I cannot get it to work even with using a timeout. There is clearly an issue here. I created a snack here that illustrates the problem. https://snack.expo.io/@louis345/scrollto-not-working. Changing the SDK version on the bottom right the same code works as intended. I would like to reopen the issue. @sftgf here is a StackOverflow post I created as well https://stackoverflow.com/questions/57385037/react-natives-animated-scrollview-is-not-allowing-me-to-programmatically-scroll

[dangkhoa2708]

I also saw this issue after upgrading to 0.60.3
My code worked perfectly, now it doesn't. I made a few check like the existence of ref,...
It's definitely a bug.

[Louis345]

@dangkhoa2708 I opened a new ticket here
https://github.com/facebook/react-native/issues/26291

[proIT324]

I've gone through all of ScrollView component carefully. Here is my solution to scrollTo() issue.

In order to programmatically scroll, set scrollOverflowEnabled prop to true.

<ScrollView ref={scroller => { this.scroller = scroller; }} scrollToOverflowEnabled={true}>
  {this.props.children}
</ScrollView>

Then it works!!!

[carmenchapa]

I've gone through all of ScrollView component carefully. Here is my solution to scrollTo() issue.

In order to programmatically scroll, set scrollOverflowEnabled prop to true.

<ScrollView ref={scroller => { this.scroller = scroller; }} scrollToOverflowEnabled={true}>
  {this.props.children}
</ScrollView>

Then it works!!!

This does not work for me

[proIT324]

Hi @carmenchapa , could you share your code snippet with me?

[jebai0521]

@prog1dev just work for iOS

[Monte9]

I found a solution that works on iOS & Android!

https://stackoverflow.com/a/59294415/9883426

TL;DR I had to wrap it in a setTimeout with a 1-second delay. The UX is exactly the same as before so even though it's a hack it looks fine to the user.

setTimeout(() => {
  this.scrollView.scrollTo({ x: DEVICE_WIDTH * current_index, y: 0, animated: false });
}, 1)

This is likely caused by a mounting issue due to the deprecated componentWillMount lifecycle method in React which wasn't properly updated in ScrollView. Hope this helps!

[decodedmrq]

@Monte9 Work for me ! Thanks.

[tapz]

In my case the scrolling only works when animated: false. Why is it that in FlatList animated works but not in ScrollView?