3

I'm trying to make a ScrollView that will auto scroll to bottom in some time. But instead it is instantly scrolling to bottom.

moveScreen = () =>{
this.scrollViewRef.flashScrollIndicators();
this.scrollViewRef.scrollToEnd({duration: 5000, animated: true});}

setScrollViewRef = (element) => {
this.scrollViewRef = element;};

render(){
return (
  <View style={{height:'100%', width:'100%',flexDirection:'row'}}>
    <ScrollView ref={this.setScrollViewRef} style={{height:'100%',width:'90%'}} onContentSizeChange={()=> this.moveScreen()}>
      {balloonList}
    </ScrollView>
    <View style={{height:'100%',width:'10%',justifyContent:'flex-end',}}>{bucketList}</View>
  </View>
);}
utkarsh sinoriya
  • 27
  • 1
  • 4

2 Answers2

2

Rather try using setTimeout with the duration you want, ive achieved like that.,

setTimeout(() => this.scrollViewRef.scrollToEnd({duration: 500, animated: true}) , 1000);

and here 1000ms is my time, you can provide any time. Hope its clear, othewise ask any doubts.

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
2

If you are testing the functionality of this implementation on an iOS device it is not possible to add the duration option and it will immediately scroll to the end regardless of what value is passed.

For Android, you may specify a duration, e.g. scrollToEnd({duration: 500}) for a controlled duration scroll.

See the docs for more information: https://reactnative.dev/docs/scrollview#scrolltoend

EDIT:

Turns out this feature was actually ready to be shipped but ended up breaking some internal callsites and ended up being reverted however the docs still mention it.

https://github.com/facebook/react-native/pull/22884#issuecomment-510846680

Brandon Dooley
  • 104
  • 4