InfiniteScroll using ScrollView - React Native

Question

I have a list using the ScrollView of react native itself. Basically, I build a list dynamically through an API return.

async fetchData(userSearch) {
    const {route} = this.props;
    const {params} = route;
    const {type} = params;

    this.setState({
      loading: true,
    });

    const responseProcedures = await scheduleResource.getProcedures(userSearch);

    this.setState({
      procedures: responseProcedures.data,
      loading: false,
    });
  }



<ScrollView
  onScroll={(event) => this.shouldLoadMoreContent(event)}
>
    {procedures.map(procedure => (
      <ArrowBox key={procedure.id} onPress={() => RootNavigation.navigate('ProcedureDetails', {procedure})}>
        <Text bold style={styles.ProcedureTitle}>
          {procedure.name}
        </Text>
        {!!procedure.synonyms.length && (
          <>
            <Text bold style={styles.ProcedureSynonymTitle}>
              Sinônimos
            </Text>
            <View style={styles.ProcedureSynonymOptionsContainer}>
              {procedure.synonyms.map(synonym => <Text style={styles.ProcedureSynonymOption} key={synonym}>{synonym}</Text>)}
            </View>
          </>
        )}
      </ArrowBox>
    ))}
</ScrollView>

The problem is that I load the entire return from the API and it slows down.

I would like to know how to dynamically load the content and make new calls in the api, when I reach the end of the page. Api allows me to place offset and limit.

Could someone give me some example?

Thanks!!!!!

Answer 1

Basically the ScrollView is not designed to handle dynamic data, the correct component that is designed to perform this function is called Flatlist. It works almost exactly like ScrollView but it is faster and will only render components that are shown on the screen.

Please import Flatlist from React Native like this...

//At the top of your file, please import FlatList together with all the modules that you want
import { FlatList, Text, View } from "react-native";

Then replace the entire ScrollView in your code with a Flatlist like this:

<FlatList
  keyExtractor={(procedure) => procedure.id}
  data={this.state.procedures}
  renderItem={(procedure) => {
    return (
      <ArrowBox
        key={procedure.id}
        onPress={() =>
          RootNavigation.navigate("ProcedureDetails", {
          procedure })}>
            <Text bold style={styles.ProcedureTitle}>
          {procedure.name}
        </Text>
        {!!procedure.synonyms.length && (
          <>
            <Text bold style={styles.ProcedureSynonymTitle}>
              Sinônimos
            </Text>
            <View
            style={styles.ProcedureSynonymOptionsContainer}>
              {procedure.synonyms.map((synonym) => (
                <Text
                  style={styles.ProcedureSynonymOption}
                  key={synonym}>
                  {synonym}
                </Text>
              ))}
            </View>
          </>
        )}
      </ArrowBox>
    );
  }}
></FlatList>;