callback scrollTo in a ScrollView 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,
  },
});