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:
- Criei o
paginationIndex
e inseri ele dentro dostate
em umreducer
com valor de 15. - Dei
slice(0, this.props.paginationIndex)
no array da propriedadedata
noFlatList
. 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 noReducer
. - Criei um botão que dá um
dispatch
que aumenta em 15 opaginationIndex
. - Tornei o meu componente
Local
em umPureComponent
, para melhorar a performance com oFlatList
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.