0

Estou construindo um aplicativo em React Native usando os serviços do Firebase e Redux. A cada dia, vou cadastrando novos Documentos lá e assim meu banco de dados vai ficando maior.

No meu app eu estava dando um resgatando todos registros de uma coleção do Firebase ao abrir uma espécie de tela "Feed". Eu sabia que eventualmente teria que implementar uma paginação do código. Então, recentemente atingi ~35 registros no DB e as coisas ficaram estranhas: O aplicativo nem sempre carregava todos os registros, e quando carregava, ele não permitia toque no renderItems do FlatList.

Aqui o código do meu FlatList:

<FlatList 
      ListHeaderComponent={/*irrelevante*/}
      data={this.props.locals} 
      keyExtractor={item => item.id} 
      renderItem={this.renderLocal} 
/> 

this.renderLocal

renderLocal = ({item, index}) => {
    return <Local {...item} goToLocal={() => this.goToLocal(item.id)}/>
}

Importante mencionar: o componente Local que é renderizado várias vezes pela FlatList, é "pesado" uma vez que contém certa estilização, duas imagens carregadas através de URI e duas imagens armazenadas localmente.

Então eu comecei o processão de criar uma paginação, fazendo algumas coisas:

  1. Criei o paginationIndex e inseri ele dentro do state em um reducer com valor de 15.
  2. Dei slice(0, this.props.paginationIndex) no array da propriedade data no FlatList. Optei por fazer assim pela expectativa de meu banco de dados conter algo como 200 registros no máximo, o que seria leve ao resgatar todos e inserir no Reducer.
  3. Criei um botão que dá um dispatch que aumenta em 15 o paginationIndex.
  4. Tornei o meu componente Local em um PureComponent, para melhorar a performance com o FlatList

E o comportamento resultante foi sempre o mesmo: no inicio ele carrega os 15 componentes, ao clicar no botão de paginação, às vezes outros 15 aparecem mas tudo trava (como descrito no segundo parágrafo). Tentei fazer alterações para perceber o limite disso. Buscando 15 inicialmente, com uma paginação incrementando mais 10 componentes, funciona, só que na próxima paginação (que iria resultar em um total de 35 componentes) o mesmo erro ocorre.

A conclusão que tive, é que o FlatList tem essa limitação de renderização. Mas não consigo passar por ela, pra ter o efeito de "Infinite Scroll" como visto no Instagram, por exemplo.

Minha dúvida então, fica em como fazer para criar esse Infinite Scroll de forma correta.

Segue o link de algumas discussões sobre problemas semelhantes, onde tentei algumas soluções propostas, sem resultado.

https://github.com/facebook/react-native/issues/20011

https://github.com/facebook/react-native/issues/13649

1

1 Resposta 1

2

Supondo que no seu backend você já tenha feito um controle de paginação e que tenha uma chamada para retornar o total de registros.

Tendo isso em mente você teria que controlar alguns estados:

  1. Número total de Registros.
  2. Os Registros.
  3. A paginação.
  4. Chama para carregar mais itens.

Vamos nomeá-las e definir seus estados iniciais aqui:

 const [registers, setRegisters] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

detalhe a paginação que deve ser iniciada com o número 1 pois não existe pagina 0

então iniciamos fazendo uma chamada para carregar os dados ao iniciar a tela

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

a funcção chamada a cima será responsavel para carregar novos itens no FlatList desse jeito alterando os estados no momento que o componente é renderizado e quando for nescessario carregar mais itens.

async function loadRegisters() {
    if (loading) {
      return;
    }

    if (total > 0 && registers.length === total) {
      return;
    }

    setLoading(true);

    const response = await api.get("registers", {
      params: { page },
    });

    setRegisters([...registers, ...response.data.registers]);
    setTotal(response.headers["x-total-count"]);
    setPage(page + 1);
    setLoading(false);
  }

explicando a função loadRegisters: primeiro ao iniciar o componente, será feito uma requisição api de seu backend trazendo os registros com sua devida paginação e o total de registros existente. Fazendo que aplicação busque apenas uma pagina por vez.

  const response = await api.get("registers", {
      params: { page },
    });

então é definimos o estado deles:

 setRegisters(response.data.registers);
 setTotal(response.headers["x-total-count"]);

isso é suficiente para iniciar seu componente, mas precisamos alterar a informação sempre que nescessario. Então sempre que o usuário pedir para trazer mais itens:

  1. Fazemos uma restrição para que se o usuário pedir para trazer mais itens repetitivamente ele não acione afunção enquanto ela esta ativa.

      if (loading) {
          return;
        }
  2. Após isso é feito uma segunda triagem que define se todos os registros ja foram carregados que ele não busque mais registros, pois não faria sentido fazer.

 if (total > 0 && registers.length === total) {
          return;
        }
  1. Se a função passar pelos dois if's nós setamos o estado de busca para TRUE assim impedindo novas chamadas desnecessaris.

     setLoading(true);
  2. Então é feito novamente a chamada api para trazer novas informações e setamos elas. atenção apra alguns detalhes

    const response = await api.get("registers", { params: { page }, });

é passado nos parametros da requisição o número da pagina que queremos.

 setRegisters([...registers, ...response.data.registers]);

setamos os registros como um array, passando os registros ja setados e os novos que estão vindo, a forma que foi espresada essa ação é a forma de setar 2 vetores dentro de 1 vetor no React ou React Native.(os 3 pontinhos descrevem a função copiar)

setPage(page + 1);

isso faz com que passamos para a proxima pagina

setLoading(false)

e agora liberamos para que o usuário busque novamente os dados

Agora no FlatList será precisso adicionar algumas propriedades primeiro temos a onEndReached que é uma função que é ativada automaticamente sempre que o usuário chegue no final da pagina:

<FlatList 
      ListHeaderComponent={/*irrelevante*/}
      data={this.props.locals} 
      keyExtractor={item => item.id} 
      renderItem={this.renderLocal} 
      onEndReached={loadIncidents}
/> 

bonus: Caso queira que seja renderizado novos registros antes de o usuário chegar no fim temos a propriedade onEndReachedThreshold que é passada um numero flutuante dizendo quantos % antes do de chegar ao final deve ser trazido novos registros, exemplo: 0.1 = 10%, 0.2 = 20% antes do final e assim por diante. ficaria algo assim

<FlatList 
      ListHeaderComponent={/*irrelevante*/}
      data={this.props.locals} 
      keyExtractor={item => item.id} 
      renderItem={this.renderLocal} 
      onEndReached={loadIncidents}
      onEndReachedThreshold={0.2}
/> 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .