algolia instant search display few itmes and use pagination

Question

I am currently working with algolia and I am trying to show the data on my app, there are over 37 products in my DB and I would like to display them in my app. I want to display 15 items on a single page and then pressing the next button it will show the next 15, I have currectly manage to connect my react app to algolia, and see the data, however I can not manage to display 15 items and then by pressing next it will just show the next 15.

My Hit component looks like this:

function InfiniteHits({ hits, hasMore, refine }) {
  return (
    <View>
      <View>
        <FlatList
          style={{
            width: Platform.OS === "ios" ? 380 : 400,
          }}
          data={hits}
          keyExtractor={(item) => item.objectID}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          onEndReached={() => hasMore && refine()}
          renderItem={({ item }) => (
            <View style={styles.item}>
          // here i render the data so when I clik on any of them it opens it in the modal
            </View>
          )}
        />
      </View>
    </View>
  );
}

InfiniteHits.propTypes = {
  hits: PropTypes.arrayOf(PropTypes.object).isRequired,
  hasMore: PropTypes.bool.isRequired,
  refine: PropTypes.func.isRequired,
};

export default connectInfiniteHits(InfiniteHits);

then in my app I have:

 <InstantSearch searchClient={searchClient} indexName="name of db">
          <SearchBox />
          <ConnectedPagination padding={2} />
          <Hits />
        </InstantSearch>

and for my Pagination I have:

const range = (start, end) =>
  Array.from({ length: end - start + 1 }, (_, i) => start + i);

const Pagination = ({ padding = 3, refine, currentRefinement, nbPages }) => (
  <View
    style={{
      flexDirection: "row",
      justifyContent: "space-around",
    }}
  >
    <TouchableOpacity onPress={() => refine(1)}>
      <Text>first</Text>
    </TouchableOpacity>
    {range(
      Math.max(1, currentRefinement - padding),
      Math.min(nbPages, currentRefinement + padding)
    ).map((page) => (
      <TouchableOpacity
        key={page}
        onPress={() => refine(page)}
        style={{
          color: currentRefinement === page ? "red" : "unset",
        }}
      >
        <Text>{page}</Text>
      </TouchableOpacity>
    ))}
    <TouchableOpacity onPress={() => refine(nbPages)}>
      <Text>last</Text>
    </TouchableOpacity>
  </View>
);

const ConnectedPagination = connectPagination(Pagination);

it correctly calculates the number of pages, and display them (in another db of mine there will more than 20 pages) however app still shows all the data below, and when I search for something I can see that it changes the number of pages, but when I click on it it wont do anything, so the question is how can I display few items per page and using the pagination just move through them?

the documentation comes with hitperpage, pagination and scrollto, they have a component and also a widget as well, I am not quit sure how to use them, I am a bit confused when looking at the tutorial.

Answer 1

Oki I figured it out in some ways, I am using InfiniteHits here, which displays all the data from the DB and if you want to use Pagination and go through pages in your app instead of InfiniteHits you have to use Hits. This is what fixed it for me.