React Native, how to call onScroll event only once inside ScrollView?

Question

I am creating simple application using React-Native, I have problem with ScrollView , My aim is to send Ajax request when scroll ends, and it should happen only once, not every time when scroll ends, important note is that I only should use ScrollView , I am using onScroll event to measure and detect scroll position.

What I tried:

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const isCloseToBottom = ({
    layoutMeasurement,
    contentOffset,
    contentSize,
  }) => {
    const paddingToBottom = 20;
    return (
      layoutMeasurement.height + contentOffset.y >=
      contentSize.height - paddingToBottom
    );
  };
  return (
    <ScrollView
      style={{ height: 400 }}
      showsVerticalScrollIndicator={false}
      onScroll={({ nativeEvent }) => {
        if (isCloseToBottom(nativeEvent)) {
          console.log('Call some async function only once when scroll ends');
        }
      }}
      scrollEventThrottle={2}>
      <View>
        <View style={{ height: 400 }}>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Snack Demo

Answer 1

You can use a ref set with useRef hook with a boolean value. I called it firstTimeRef , like so:

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const firstTimeRef = React.useRef(true);
  const isCloseToBottom = ({
    layoutMeasurement,
    contentOffset,
    contentSize,
  }) => {
    const paddingToBottom = 20;
    return (
      layoutMeasurement.height + contentOffset.y >=
      contentSize.height - paddingToBottom
    );
  };
  return (
    <ScrollView
      style={{ height: 400 }}
      showsVerticalScrollIndicator={false}
      onScroll={({ nativeEvent }) => {
        if (isCloseToBottom(nativeEvent) && firstTimeRef.current) {
          firstTimeRef.current=false;
          console.log('Call some async function only once when scroll ends');
        }
      }}
      scrollEventThrottle={2}>
      <View>
        <View style={{ height: 400 }}>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
          <View
            style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
            <Text>SECTION TEXT</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});