callback scrollTo in a ScrollView React Native - react-native

Question

I would like to call a function at the end of the function scrollTo called like that :
scrollTo({y: 0, animated: true})
but by default this function doesn't have a second parameter.
So how can i handle the end of the scroll animation to trigger an other function ?

Answer 1

You can use onMomentumScrollEnd as mentioned in this issue
However if you want more control over your scroll state you can implement smth like this
import React from 'react';
import { StyleSheet, Text, View, ScrollView, Button } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView
style={{ marginVertical: 100 }}
ref={this.refScrollView}
onScroll={this.onScroll}
>
<Text style={{ fontSize: 20 }}>
A lot of text here...
</Text>
</ScrollView>
<Button title="Scroll Text" onPress={this.scroll} />
</View>
);
}
componentDidMount() {
this.scrollY = 0;
}
onScroll = ({ nativeEvent }) => {
const { contentOffset } = nativeEvent;
this.scrollY = contentOffset.y;
if (contentOffset.y === this.onScrollEndCallbackTargetOffset) {
this.onScrollEnd()
}
}
onScrollEnd = () => {
alert('Text was scrolled')
}
refScrollView = (scrollView) => {
this.scrollView = scrollView;
}
scroll = () => {
const newScrollY = this.scrollY + 100;
this.scrollView.scrollTo({ y: newScrollY, animated: true });
this.onScrollEndCallbackTargetOffset = newScrollY;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
padding: 20,
},
});