Lista de Pokemon con FlatList

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

Eliezer Mas Y Rubi

student•

Aqui les dejo el componente


import React from 'react'
import { StyleSheet, Text, FlatList } from 'react-native'

const PokemonList = ({ pokemontList }) => {

    return (
        <FlatList
            data={pokemontList}
            numColumns={2}
            showsVerticalScrollIndicator={false}
            keyExtractor={(pokemon) => String(pokemon.id)}
            renderItem={({ item }) => <Text>{item.name}</Text>}
            contentContainerStyle={styles.flatListContainer}
        />
    );
}
const styles = StyleSheet.create({
    flatListContainer: {
        paddingHorizontal: 5,
    }
})

export default PokemonList;

Luis Fernando Pedroza Taborda

student•

Gracias por compartir.

Juan Camilo Rivas Molina

student•

Para los que tengan el error cargando la info con FlatList, en la siguiente clase explican que es normal y vamos bien

Daniel Ochoa

student•

en el minuto 5:30 hay un megafail, deberías explicar que el { item } es una propiedad del FlatList pasada al metodo renderItem y es el nombre propio, porque primero pones pokemon y lo cambias por item, sin explicar eso, confudiendo a medio mundo xD

Vicente Daniel Zurita Salas

student•

alaaaa con razón no me funcionaba, thnx

Veronica Osorio Cardona

student•

Tuve problemas para renderizar el componente tal cual como en en la clase.

Tuve en cuenta la documentación que se encuentra en el siguiente link .

Les comparto mi componente:

import React from "react";
import { FlatList, Text, StyleSheet, View } from "react-native";

export default function PokemonList(props) {
  const { pokemons } = props;

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <FlatList
      data={pokemons}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
      contentContainerStyle={styles.flatListContentContainer}
    />
  );
}

const styles = StyleSheet.create({
  flatListContentContainer: {
    paddingHorizontal: 15,
  },
});

Sebastián Alvarez Lopera

student•

Gracias por el aporte!

Josué Ramírez Hernández

student•

¿Qué es FlatList?

. Es una manera fácil de hacer una lista de datos de desplazamiento eficiente. No solo es eficiente, sino que tiene una API increíblemente simple con la que trabajar. Si has utilizado o está familiarizado con el componente ListView, es muy similar. .

Uso básico

. Hay dos accesorios principales que debes conocer en un FlatList y eso es datos y renderItem . La primera es una matriz de datos que se utiliza para crear la lista, normalmente una matriz de objetos, y la segunda es la función que tomará un elemento individual de la matriz de datos y representará un componente para él.

Abel da Cunha

student•

¿Obtenimos?

David Rangel

student•

Team, les dejo proyecto con TypeScript y con la versión a 25 de Junio del 2025:

Recuerden dejas su estrellita en el repo.

Jorge Rodrigo Massón Reynoso

student•

¿A alguien le sale esto?

undefined is not an object (evaluating 'o[Symbol.iterator]')

Ese error me sale en la funcion loadPokemons

Héctor Eduardo López Carballo

student•

¡Hola!

El error debería indicarte una línea en tu código donde está el problema, es posible que en algún punto estes usando un valor de forma incorrecta. Puedes compartir tu código junto con una captura de pantalla del error?

Hector Ibarra

student•

como se resuelve el warning que le aparece por la lista?

Agustín Navarro Galdon

teacher•

¿Me puedes mandar una foto del warning?

Jorge Arteaga

student•

A mi me salia un error con las Key deberian ser unicas. Por cada vez que guardaba algun archivo volvia a hacer hacer la peticion sin eliminar los datos ya guardados en el state.

Solucion: Recargar la app desde la consola

Roberto Enrique Ajuchan Lopez

student•

Por ahora bastate interesante, aunque bastante basico tambien.

r2d2bt Barajas Tirado

student•

la lista se presenta vacía

Gabriel Hernández Valdez

student•

Hola compañero, en mi caso arregle ese tema agregando un await en la siguiente linea.

await setPokemons([...pokemons, ...pokemonsArray])

Lo que hacemos es decirle al código que espere a que el estado se le agreguen esos dos arrays, entonces con eso cuando pasa el estado por el componente ya llega con todos los elementos

import React from 'react'
import { StyleSheet, Text, FlatList } from 'react-native'

const PokemonList = ({ pokemontList }) => {

    return (
        <FlatList
            data={pokemontList}
            numColumns={2}
            showsVerticalScrollIndicator={false}
            keyExtractor={(pokemon) => String(pokemon.id)}
            renderItem={({ item }) => <Text>{item.name}</Text>}
            contentContainerStyle={styles.flatListContainer}
        />
    );
}
const styles = StyleSheet.create({
    flatListContainer: {
        paddingHorizontal: 5,
    }
})

export default PokemonList;

import React from "react";
import { FlatList, Text, StyleSheet, View } from "react-native";

export default function PokemonList(props) {
  const { pokemons } = props;

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <FlatList
      data={pokemons}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
      contentContainerStyle={styles.flatListContentContainer}
    />
  );
}

const styles = StyleSheet.create({
  flatListContentContainer: {
    paddingHorizontal: 15,
  },
});

Lista de Pokemon 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