Nós vamos começar lá dentro de productService criando o método de getAllProducts

getAllProducts: async (page: number) => {
	const res = await api.get(`/products?page=${page}`);

  return res.data;
},

Com isso feito, nós vamos poder já pegar esse método lá dentro de ProductList, porém vamos passar isso para lá através da home.

Vamos começar criando os nossos estados, que vão controlar aqui o fluxo do app

1. O loading será para a gente ter um loader na página, que começa como true
2. Depois vamos ter a página atual, para ter a paginação do backend
3. Teremos o “total”, que será um valor que vamos passar para verificar se chegamos no limite da paginação, e aí podemos começar com 50, como o nosso padrão é de 20, poderíamos começar de 20
4. E por fim temos o products, que fará o papel do Data, que temos lá dentro de productList, que vai ser o Array para o flatlist exibir

const navigation = useNavigation<PropsStack>();
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(0);
const [total, setTotal] = useState(100);
const [products, setProducts] = useState<Product[]>([]);

Com isso criado, vamos poder começar criando o handle para pegar os produtos

1. Nós vamos primeiro verificar se o array de produtos não é igual ao total, se for, ele vai parar de chamar no backend
2. Depois vamos fazer o uso do serviço e iremos também atualizar os valores, que será o setProducts e o setTotal
3. Vamos parar com o loading e atualizar a paginação.

const handleGetProducts = async () => {
  if (products.length === total) {
    return;
  }

  const productsData = await productService.getAllProducts(page);

  setProducts([...products, ...productsData.products]);
  setTotal(productsData.total);

  setLoading(false);

  setPage(page + 1);
};

useEffect(() => {
  handleGetProducts();
}, []);

E já podemos fazer o console.log para poder visualizar o resultado dela (Fazer fora do handle)

console.log(products);

useEffect(() => {
  handleGetProducts();
}, []);

Podemos ver no console que a gente vai ter ai os objetos dos produtos, e através disso a gente vai conseguir usar

Para finalizar vamos colocar aqui o loader

return (
  <Container>
    <Header />

    {!loading ? (
      <ProductList
        products={products}
        handleGetProducts={handleGetProducts}
      />
    ) : (
      <Loader />
    )}

    <NavBar />
  </Container>
);

Agora, sempre o loading for true, ele vai mostrar o loader, quando for false, vai mostrar a lista.