Utilizando Scroll Infinite na PokeAPI

Nos momentos de lazer, quando estamos navegando na web, ou usando um aplicativo muitas vezes continuamos a ler arrastando para cima incontáveis vezes, e sempre temos novos conteúdos para usufruir. Já se perguntou como isso é possível ou até mesmo como inserir esta "rolagem infinita" na sua própria aplicação? Neste artigo, iremos analisar como utilizar o Scroll Infinite, e aplicar tal prática numa aplicação real.

O Scroll Infinito é uma técnica popular no desenvolvimento de aplicativos móveis e web para melhorar a experiência do usuário. Ele permite que o usuário role a página sem limites e, assim, carregar mais conteúdo dinamicamente conforme ele se aproxima do final da página. No React Native, é possível implementar o Scroll Infinito usando componentes nativos e bibliotecas populares de gerenciamento de estado.

Vamos explorar como criar um Scroll Infinito no React Native usando a API PokeAPI para carregar dinamicamente dados a partir de uma API.

Instalando as dependências -

Para começar, precisamos instalar as dependências em nossa aplicação. Para isso, execute o seguinte comando no terminal:

npm install react-native-infinite-scroll axios

Criando o componente -

Em seguida, podemos criar nosso componente de Scroll Infinito. Para isso, precisamos de um componente de lista, como o FlatList ou ScrollView, que suporte a rolagem e um componente de item que renderize cada item da lista.

Vamos criar uma lista simples de Pokémon que serão carregados dinamicamente à medida que o usuário rola para baixo. Para isso, vamos usar a API PokeAPI, que retorna uma lista de Pokémon. Crie um novo arquivo chamado PokemonList.js e adicione o seguinte código:

import React, { useState, useEffect } from 'react';
import { View, Text, Image, FlatList } from 'react-native';
import InfiniteScroll from 'react-native-infinite-scroll';
import axios from 'axios';

const API_URL = 'https://pokeapi.co/api/v2/pokemon/';

const PokemonList = () => {
  const [pokemon, setPokemon] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

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

  const loadPokemon = async () => {
    setLoading(true);

    try {
      const response = await axios.get(`${API_URL}?limit=10&offset=${(page - 1) * 10}`);

      setPokemon([...pokemon, ...response.data.results]);
      setPage(page + 1);
      setLoading(false);
    } catch (error) {
      console.log(error);
      setLoading(false);
    }
  };

  const renderItem = ({ item }) => {
    const { name, url } = item;
    const id = url.split('/')[6];

    return (
      <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }}>
        <Image
          source={{ uri: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png` }}
          style={{ width: 50, height: 50 }}
        />
        <Text style={{ marginLeft: 10, fontSize: 16 }}>{name}</Text>
      </View>
    );
  };

  const renderFooter = () => {
    if (loading) {
      return (
        <View style={{ alignItems: 'center', justifyContent: 'center', padding: 10 }}>
          <Text>Carregando...</Text>
        </View>
      );
    }

    return null;
  };

  return (
    <InfiniteScroll
      horizontal={false}
      data={pokemon}
      renderItem={renderItem}
      keyExtractor={(item) => item.name}
      onEndReached={loadPokemon}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  );
};

export default PokemonList;

Vamos analisar um pouco este código:

No seu início, ele é mais um código padrão importando dependências e criando uma const chamada API_URLque irá ser a busca da chamada HTTP.

Em seguida, definimos o componente de lista PokemonList usando o useState para gerenciar o estado de pokemon, page e loading. O estado pokemon é uma matriz vazia que armazenará os dados dos Pokémon, enquanto o estado page é um número que representará a página atual de dados carregados. O estado loading é um valor booleano que indicará se a lista está carregando novos dados ou não. Usamos o hook useEffect para chamar a função loadPokemon assim que o componente for montado.

A função loadPokemon é responsável por carregar os dados da API PokeAPI. Começamos definindo o estado de loading como true para indicar que a lista está carregando novos dados. Em seguida, usamos o axios para fazer uma chamada HTTP para a URL da API PokeAPI, especificando o número de itens para carregar e o deslocamento com base na página atual.

Assim que recebemos a resposta da API, atualizamos o estado de pokemon usando a função setPokemon, que adiciona os novos dados carregados à lista existente usando o operador spread. Também atualizamos o estado de page, adicionando 1 à página atual para carregar a próxima página de dados na próxima chamada de loadPokemon. Finalmente, definimos o estado de loading como false para indicar que a lista terminou de carregar os novos dados.

A chamada à API PokeAPI é feita usando o método axios.get e passando a URL da API com os parâmetros limit e offset para carregar 10 itens por página. O número de offset é calculado com base no número da página atual. Os novos dados são adicionados à matriz existente usando o operador spread ... e as variáveis de estado são atualizadas.

Em seguida, definimos a função renderItem, que é usada pelo componente FlatList para renderizar cada item da lista. A função renderItem extrai o nome e o ID do Pokémon da resposta da API e renderiza uma imagem e o nome do Pokémon:

Perto de seu final, o renderItem está guardando como objeto item, namee url são passados para ele. Seu retorno será uma imagem e texto com nome do pokemon, e em sua finalização temos o InfiniteScroll com todos os seus parâmetros e renderizando dinâmicamente diversos pokemons por meio de um scroll Infinite.

Espero que esse artigo tenha o ajudado a compreender o uso desta técnica muito utilizada por grandes aplicativos como Facebook, TikTok e Instagram. Obrigado por ler até aqui.