React native Android ScrollView scrollTo not working
I wanted to avoid using delays and timers so after a bit of digging I found that using onLayout
works very smooth:
scrollToInitialPosition = () => {
this.scrollViewRef.scrollTo({ y: 100 });
}
...
<ScrollView
ref={(ref) => { this.scrollViewRef = ref; }}
onLayout={this.scrollToInitialPosition}
/>
I had the same issue, and wasted several hours no it:
1: in android, ScrollView can scroll only when its size < content's size
2: in react native android, if you call ScrollView.scrollTo() in componentDidMount, it won't work, because ScrollView has a layout animation when create, you can find it in ReactScrollView.java
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// Call with the present values in order to re-layout if necessary
scrollTo(getScrollX(), getScrollY());
}
so, you must delay it after the animation
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.myScroll.scrollTo(100);
console.log("called DidMount");
})
}
This works on React Native 0.44.0. Thanks for the hint @Eldelshell. It also seems to work with any timeout value. At least on the emulator. I found that the answer involving InteractionManager.runAfterInteractions
did nothing to fix the issue but perhaps that's a difference in versions.
componentDidMount() {
setTimeout(() => {
this._scroll.scrollTo({y: 100})
}, 1)
}