Infinite scrolling con FlatList

Clase 10 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Lucas Ojeda de Sousa

student•

Si alguien esta usando un dispositivo Android y no ve que se renderice el ActivityIndicator, es porque por defecto no tiene color y simplemente debe agregarselo.

Documentación

Luis Fernando Pedroza Taborda

student•

Excelente aporte, no me estaba funcionando hasta que tu publicastes tremendo dato, gracias.

Effren Anthony Peña Sánchez

student•

Hola comunidad!

Me di cuenta de un pequeño bug que ocurría, cuando hacia scroll y aparecia el spinner, me cargaba la lista de los siguientes 20 items pero pasaba unos segundos y cargaba nuevamente otros 20 sobre la misma lista lo que ocasionaba que a la lista le falten algunos datos. Esto ocurre porque la única validación que tenemos para ejecutar nuevamente el request es que exista "isNext" en el componente "PokemonList", y ya que desde la segunda llamada existe, cuando el usuario siga haciendo scroll sin que el request haya terminado (sin que desaparezca el spinner), volverá a ejecutarse y a popular la lista nuevamente sobre los datos ya cargados. Para solucionarlo únicamente agregué un state más que le llamé "loading", de manera que solo se haga el request cuando se haya completado el anterior. Mis componentes quedaron de esta manera

PokemonList.js

import {ActivityIndicator, FlatList, Platform, StyleSheet} from 'react-native';
import React from 'react';
import PokemonCard from './PokemonCard';

const PokemonList = ({pokemons, loadPokemons, isNext, isLoading}) => {
  const loadMore = () => {
    loadPokemons();
  };

  return (
    <FlatList
      data={pokemons}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      keyExtractor={pokemon => String(pokemon.id)}
      renderItem={({item}) => <PokemonCard {...item} />}
      contentContainerStyle={styles.flatListContentContainer}
      onEndReached={!isLoading && isNext && loadMore}
      onEndReachedThreshold={0.1}
      ListFooterComponent={
        isLoading &&
        isNext && (
          <ActivityIndicator
            size="large"
            style={styles.spinner}
            color="#AEAEAE"
          />
        )
      }
    />
  );
};

export default PokemonList;

const styles = StyleSheet.create({
  flatListContentContainer: {
    paddingHorizontal: 5,
    marginTop: Platform.OS === 'android' ? 30 : 0,
  },
  spinner: {
    marginTop: 20,
    marginBottom: Platform.OS === 'android' ? 90 : 60,
  },
});

Pokedex.js (screens)

import {SafeAreaView} from 'react-native';
import React, {useCallback, useEffect, useState} from 'react';
import {getPokemonDetailsByUrlApi, getPokemonsApi} from '../api/pokemon';
import PokemonList from '../components/PokemonList';

const Pokedex = () => {
  const [pokemons, setPokemons] = useState([]);
  const [nextUrl, setNextUrl] = useState(null);
  const [loading, setLoading] = useState(false);

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

  //TODO hacer hook useService o useRequest para tener un error y un loading

  const loadPokemons = useCallback(async () => {
    try {
	// inicializamos la "carga" del request
      setLoading(true);
      const {results: pokemonsResponse, next: nextPokemonListUrl} =
        await getPokemonsApi(nextUrl);
      setNextUrl(nextPokemonListUrl);
      const pokemonsArray = [];
      for await (const pokemon of pokemonsResponse) {
        const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);
        pokemonsArray.push({
          id: pokemonDetails.id,
          name: pokemonDetails.name,
          type: pokemonDetails.types[0].type.name,
          order: pokemonDetails.id,
          image: pokemonDetails.sprites.other['official-artwork'].front_default,
        });
      }
      setPokemons([...pokemons, ...pokemonsArray]);
    } catch (error) {
      console.error(error);
    } finally {
	// regresamos loading a false
      setLoading(false);
    }
  }, [pokemons, nextUrl]);

  return (
    <SafeAreaView>
      <PokemonList
        pokemons={pokemons}
        loadPokemons={loadPokemons}
        isNext={nextUrl}
        isLoading={loading}
      />
    </SafeAreaView>
  );
};

export default Pokedex;

Espero que les sea útil 🤗

Matías Daniel Cravero

student•

Excelente aporte, también noté el bug… por suerte siempre hay un buen compañero que lo soluciona! jaja

Jorge Arias Argüelles

student•

Hello Effren! Muchas gracias por tu aporte, me ayudaste mucho!!

Tengo unas preguntas:

Este fragmento... còmo asi que se llama loadPokemons() cuando load pokemons cambias? o estoy entendindo mal...

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

Este fragment... para que usas el useCallback?

const loadPokemons = useCallback(async () => {

Beto Martinez

student•

Alaaa, pense que seria mas dificil como el la web, que tienes que usar el InsersectionObserver, supongo que aqui tambien lo usa, pero ya underthehood.

Jesús Eduardo Nuñez Ramírez

student•

Analizando el error de que se brinca los primeros 20 después de unos segundos, opte por ponerlo después de la captura de los pokemons para evitar que se actualizara antes de mostrarlos les dejo el código y cualquier retroalimentación es bienvenida, ```js const loadPokemons = async () => {
try{
const response = await getPokemonsApi(nextUrl)//Se trae la informacion de la api
const pokemonsArray = [];
for await (const pokemon of response.results) {
//console.log(pokemon)
const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url)
pokemonsArray.push( {id: pokemonDetails.id, name: pokemonDetails.name, type: pokemonDetails.types[0].type.name, order: pokemonDetails.order, imagen:pokemonDetails.sprites.other['official-artwork'].front_default })
}
setpokemons([...pokemons,...pokemonsArray])//te genera una sola lista de los elementos de ambas listas
setNextUrl(response.next)
}catch (error){
console.error(error) }
}

Ana Carina Quintero Carrascal

student•

eres un crack!

Daniel Ochoa

student•

El error por el cual se salta los primeros 20, es que como primero se realiza la renderización del componente (El useEffect ocurre en un lugar del life cycle conocido como Componentdidmount) y luego se llama automaticamente la función de intersección con el treshold, la cual es recargar los pokemon debido a que el estado donde se guardan los pokemon esta vacio, por tanto la lista y la intersección se esta dando. Para evitarlo debemos dejar al final el setNextUrl, ya que esto hace que asi se renderice inicialmente, persista su estado null y por tanto no se llame al metodo de recarga.

Sebastian Cason

student•

La mejor respuesta

Erding Israel Flores Moreno

student•

En la numeración de los pokemons no usen order, usen id

return (
    <TouchableWithoutFeedback onPress={goToPokemon}>
      <View style={styles.card}>
        <View style={styles.spacing}>
          <View style={bgStyles}>
            <Text style={styles.number}>
              #{`${pokemon.id}`.padStart(3, 0)}
            </Text>
            <Text style={styles.name}>{capitalize(pokemon.name)}</Text>
            <Image source={{ uri: pokemon.image }} style={styles.image} />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );

Jorge Rodrigo Massón Reynoso

student•

¿Se dan cuenta de que hay números que se brincan en la lista?

Agustín Navarro Galdon

teacher•

Voy a revisarlo.

Samuel Miranda Martínez

student•

Es porque se esta tomando el order y no el id.

Alejandro Chavez

student•

Renderizando en orden

Si alguien es como yo y le "estresa" un poco que los pokemons no se rendericen en orden, puden arreglarlo simplemente agregando:

  const sorted = pokemons.sort((a, b) => a.id - b.id)

Y usar esa variable en el data del FlatList.

Juan Camilo Osorio Bedoya

student•

por si no les aparece el spinner le agregan la propiedad color al componente <ActivityIndicator size="large" color="#000" style={styles.spinner} />

Santiago González

student•

¿Por qué los primeros 20 pokemons no me los muestra?

Lucas Velez

student•

Mira en los aportes el comentario de: Effren Anthony Peña Sánchez ... esa es la solución

Gustavo Martín Isidoro Shiraishi

student•

justo me paso eso

David Rangel

student•

Les comparto mi repo, es React Native con Typescript, tiene algunas diferencias con respecto a lo visto en clase, sobre todo el tipado:

Karen Velásquez

student•

Durante mi trabajo en el ejercicio, me topé con un problema que afectaba tanto la carga inicial como el desplazamiento de la página. En relación a la carga, noté que los primeros 20 Pokémon solo se mostraban por un breve momento, mientras que la página comenzaba directamente desde el Pokémon número 20. Además, el problema también afectaba al scroll, ya que el spinner de carga apenas se mostraba antes de desaparecer rápidamente. Para resolver este inconveniente, realicé algunas modificaciones en los archivos Pokedex.js y PokemonList.js.

En Pokedex.js, introduje el uso del estado "loading" para controlar el proceso de carga de datos. Para evitar solicitudes duplicadas, agregué una validación y utilicé el bloque "finally" después del bloque "try-catch" en la función "loadPokemons". De esta manera, aseguré que el estado "loading" se estableciera en falso incluso en caso de error, garantizando así su restablecimiento correcto después de completar la carga, independientemente del resultado.

Respecto a PokemonList.js, opté por utilizar la variable "loading" en lugar de "isNext" para gestionar el estado de carga. Antes de llamar a la función "loadPokemons()", verificaba si "loading" era falso. Esta medida garantizaba que no se iniciara una nueva carga si ya había una en curso. Esto resultaba especialmente relevante debido a la estructura de la clase, donde "loadMore" se llamaba directamente al llegar al final de la lista.

A continuación mi codigo corregido:

Pokedex.js

PokemonList.js

Juan David Díaz Pastrana

student•

Recomiendo que no usen useEffect para hacer fetching de datos. Hay librerías maravillosas que se encargan de esto.

Yo personalmente uso SWR (de vercel) en mi trabajo, pero decidí aprender a usar @tanstack/react-query para este curso.

Acá dejo mi repo por si alguien quiere ver cómo lo hice.

Daniel Ochoa

student•

Me surgen dudas con el funcionamiento de la carga, ya que tengo un error en un dispositivo fisico que dice que la lista es demasiado larga y deja de enviar las peticiones despues de cierto numero.

Jesús Eduardo Nuñez Ramírez

student•

Analizando el error de que se brinca los primeros 20 después de unos segundos, opte por ponerlo después de la captura de los pokemons para evitar que se actualizara antes de mostrarlos les dejo el código y cualquier retroalimentación es bienvenida, const loadPokemons = async ()** =>{ try{** const response = await getPokemonsApi(nextUrl)//Se trae la informacion de la api const pokemonsArray =** []; for await (const pokemon of response.results){ //console.log(pokemon) const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url) pokemonsArray.push({ id: pokemonDetails.id, name: pokemonDetails.name, type: pokemonDetails.types[0].type.name, order: pokemonDetails.order, imagen:pokemonDetails.sprites.other['official-artwork'].front_default })** } setpokemons([...pokemons,...pokemonsArray])//te genera una sola lista de los elementos de ambas listas setNextUrl(response.next)** }catch (error){ console.error(error)** }** }

Stiven Jiménez

student•

woo React native no lo deja casi hecho no es nada complejo comparado a web

Kenet Andrés Chungandro Montenegro

student•

Excelente Clase!

Gustavo Pú

student•

Wow que excelente clase 💚

Jair Neri

student•

a mi el loader no me funciona, no aparece. commit - https://github.com/NightDreams/pokedex/commit/822bd9195300b1632042777dc894a1ada06fdc69 android . React navigation 6 expo 44

Diego Delgado

student•

En el elemento colocale el color asi

<code> <ActivityIndicator size="large" color="#333" style={styles.spinner} /> </code>

Jair Neri

student•

Gracias por la respuesta bro. Lo resolvi despues era por que tenia un bendito typo en un metodo XD.

import {ActivityIndicator, FlatList, Platform, StyleSheet} from 'react-native';
import React from 'react';
import PokemonCard from './PokemonCard';

const PokemonList = ({pokemons, loadPokemons, isNext, isLoading}) => {
  const loadMore = () => {
    loadPokemons();
  };

  return (
    <FlatList
      data={pokemons}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      keyExtractor={pokemon => String(pokemon.id)}
      renderItem={({item}) => <PokemonCard {...item} />}
      contentContainerStyle={styles.flatListContentContainer}
      onEndReached={!isLoading && isNext && loadMore}
      onEndReachedThreshold={0.1}
      ListFooterComponent={
        isLoading &&
        isNext && (
          <ActivityIndicator
            size="large"
            style={styles.spinner}
            color="#AEAEAE"
          />
        )
      }
    />
  );
};

export default PokemonList;

const styles = StyleSheet.create({
  flatListContentContainer: {
    paddingHorizontal: 5,
    marginTop: Platform.OS === 'android' ? 30 : 0,
  },
  spinner: {
    marginTop: 20,
    marginBottom: Platform.OS === 'android' ? 90 : 60,
  },
});

import {SafeAreaView} from 'react-native';
import React, {useCallback, useEffect, useState} from 'react';
import {getPokemonDetailsByUrlApi, getPokemonsApi} from '../api/pokemon';
import PokemonList from '../components/PokemonList';

const Pokedex = () => {
  const [pokemons, setPokemons] = useState([]);
  const [nextUrl, setNextUrl] = useState(null);
  const [loading, setLoading] = useState(false);

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

  //TODO hacer hook useService o useRequest para tener un error y un loading

  const loadPokemons = useCallback(async () => {
    try {
	// inicializamos la "carga" del request
      setLoading(true);
      const {results: pokemonsResponse, next: nextPokemonListUrl} =
        await getPokemonsApi(nextUrl);
      setNextUrl(nextPokemonListUrl);
      const pokemonsArray = [];
      for await (const pokemon of pokemonsResponse) {
        const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);
        pokemonsArray.push({
          id: pokemonDetails.id,
          name: pokemonDetails.name,
          type: pokemonDetails.types[0].type.name,
          order: pokemonDetails.id,
          image: pokemonDetails.sprites.other['official-artwork'].front_default,
        });
      }
      setPokemons([...pokemons, ...pokemonsArray]);
    } catch (error) {
      console.error(error);
    } finally {
	// regresamos loading a false
      setLoading(false);
    }
  }, [pokemons, nextUrl]);

  return (
    <SafeAreaView>
      <PokemonList
        pokemons={pokemons}
        loadPokemons={loadPokemons}
        isNext={nextUrl}
        isLoading={loading}
      />
    </SafeAreaView>
  );
};

export default Pokedex;

return (
    <TouchableWithoutFeedback onPress={goToPokemon}>
      <View style={styles.card}>
        <View style={styles.spacing}>
          <View style={bgStyles}>
            <Text style={styles.number}>
              #{`${pokemon.id}`.padStart(3, 0)}
            </Text>
            <Text style={styles.name}>{capitalize(pokemon.name)}</Text>
            <Image source={{ uri: pokemon.image }} style={styles.image} />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );

Infinite scrolling con FlatList

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación