-2

Issue

I have an app displaying text. It needs to scroll to the bottom of the page in X amount of time. Right now it's working, but it's not smooth. It goes bit by bit because I call the function to scroll every 1000ms, setting the scroll-position to X.

Goal

Have a smooth scroll, using ScrollView and Animate. The scroll needs to last 1000ms and needs to be linear, no easing. (as I will call the function every 1000ms to continue scrolling). Or is there a better alternative?

What Have I Tried

I've tried everything, including looking up tutorials and digging here. There's a lot of stuff regarding scrolling, but nothing that helps me out. Maybe it's really easy and that's why there's nothing about it, I hope it is.

Also tried the "LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);" option. A lot in my screen animates when using that, just not the scrolling.

Here's my current setup to scroll like described in my Issue:

*Set an interval to scroll every 1000ms. 

_pixels = amount of pixels to scroll. _steps = amount of steps it will take to get to the bottom using _pixels distance. _distance = total height of the page in pixels. _interval = 1000ms.

setInterval((data) => this.scrollSong(_pixels, _steps, _distance), _interval);

In the function scrollSong to scroll. (_scrollTo = what y pos to scroll to):

this._scrollView.scrollTo({y: _scrollTo, animated: true});

ScrollView. On beginning and end scroll the scrollSong interval is paused.

<ScrollView ref={(scrollView) => { this._scrollView = scrollView; }} onScrollBeginDrag={this.handleBeginScroll} onScrollEndDrag={this.handleEndScroll}>

I hope you can help me out. If you need any information please let me know.

NickyNL
  • 21
  • 1
  • 3

1 Answers1

0
 animationView = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
  };

Call this method to handle Scroll with animation.

Deeksha gupta
  • 659
  • 6
  • 15
  • Do I need to reference the scrollview somewhere for it to make use of that? And it says, "easeInEaseOut". But I don't want it to ease, I want it to be linear. – NickyNL Jan 28 '20 at 14:09
  • You can call this method inside ScrollView ref. – Deeksha gupta Jan 29 '20 at 09:54
  • I see what you're heading towards, however; everything is animating in my screen except the scrolling. I only want the scroll to animate linear for 1000ms. Any thoughts on that? – NickyNL Jan 29 '20 at 10:19