I want to use scrollTo - react-native

Question

I work on a project in React Native and I would like to set my ScrollView position. So I search and I found we should do this with scrollTo but I have an error:
TypeError: Cannot read property 'scrollTo' of undefined
My code:
export default class Index_calendar extends Component {
componentDidMount() {
const _scrollView = this.scrollView;
_scrollView.scrollTo({x: 100});
}
render() {
return (
<ScrollView ref={scrollView => this.scrollView = scrollView}>
{this.renderCalandar()}
</ScrollView>
);
}
}

Answer 1

You can use the InteractionManager to solve this issue.
For instance
InteractionManager.runAfterInteractions(() => this.scroll.current.scrollTo({ x }));

Answer 2

Why not just scrollTo in the render method?
export default class Index_calendar extends Component {
constructor(props) {
super(props);
this.scrollView = null;
}
render() {
return (
<ScrollView ref={scrollView => {
//Sometimes ref can be null so we check it.
if(scrollView !== null && this.scrollView !== scrollView){
this.scrollView = scrollView
scrollView.scrollTo({x: 100});
}}>
{this.renderCalandar()}
</ScrollView>
);
}
}

Answer 3

I found the solution ! we need to use setTimeout like that :
setTimeout(() => {
this.scrollView.scrollTo({x: 100});
}, 1);

Answer 4

You seem to make correct reference. But I suggest to init the reference and make it less error prone:
export default class Index_calendar extends Component {
constructor(props) {
super(props);
this.scrollView = null;
}
componentDidMount() {
const _scrollView = this.scrollView;
if (_scrollView) {
_scrollView.scrollTo({x: 100});
}
}

Answer 5

InteractionManager.runAfterInteractions(() => {
this.scrollRef.scrollTo({
x: 0,
y: 0,
animated: true,
});
});
This worked for me to reset the scroll to top