How can I paginate my scrollview when the user scrolling until end?

Question

I want a show the transaction list in my scroll view, but when user scroll it until the end the other request will start and add the other page's transaction on my view. How can I do that

This is my firts request which is getting the first page of the transactions

        let { data } = await client.get('/coins/2/transactions');
        let transactions = {};
        transactions = data.map(e => {
          return {
            address: e.address,
            amount: e.amount,
            blockhash: e.blockhash,
            confirmations: e.confirmations,
            status: e.status,
            timestamp: e.timestamp,
            txid: e.txid
          };
        })

        this.setState({ transactions });
      }

And then I added the other function which is just get the next page.

async getNextCursor(cursor){
          let {data} = await client.get('/coins/2/transaction/?cursor=' + cursor)
          let transactions = {};
        transactions = data.map(e => {
          return {
            address: e.address,
            amount: e.amount,
            blockhash: e.blockhash,
            confirmations: e.confirmations,
            status: e.status,
            timestamp: e.timestamp,
            txid: e.txid
          };
        })
        return transactions
      }

How can I run this request when scroll is ending and get the other transactions and add into my transaction state also show it?

NOTE : My request give me has_more(bool) and next_cursor(int) attributes

Answer 1

This is a rough code example

<ScrollView
      scrollEventThrottle={16}
      onScroll={handlePagination} 
  />

use a function to switch the data on a specific point,

handlePagination=(event)=>{

const currentY = event.nativeEvent.contentOffset.y

 if(currentY==BOTTOM){
  const data = this.getNextCursor();
  this.setState({ data });
 }

}

BOTTOM is a height variable when you want to switch data.