Renderizando la PokemonCard

Curso de React Native: Manejo de Listas y Consumo de APIs

Contenido del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:14

Renderizando la PokemonCard

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 8 de 17

Clase 8 / 17

Comentarios (20)20 comentarios

Luis Alejandro Nieto Ruth

Hace 5 años

Luis Fernando Pedroza Taborda

Hace 5 años

Percy Tejada

Hace 5 años

Luis Fernando Pedroza Taborda

Hace 5 años

Darío Condori Humerez

Hace 5 años

Juan Camilo Osorio Bedoya

Hace 5 años

Bryam Rodriguez

Hace 4 años

Jaime David Burbano Montoya

Bryam Rodriguez

Bryam Rodriguez

Julio Santacruz

Darío Condori Humerez

Hace 5 años

Roberto Enrique Ajuchan Lopez

Hace 4 años

Gabriel Hernández Valdez

Jose Ardon

Gianella Marin

Andres Gallardo

Agustín Navarro Galdon

Profesor

Hace 5 años

Joseph Humberto Cueva

Misael Valdez

Daniel Ochoa

David Rangel

Nicolas Valdez

Cristofer Daniel Gómez Villanueva

Hace 4 años

Juan Camilo Rivas Molina

Hace 4 años

Jonathan Sanchez

Hace 4 años

Gera Garcia

Hace 5 años

Alejandro Castellanos Nochebuena

Hace 2 años

Daniel Salazar Munoz

Hace 3 años

Kenet Andrés Chungandro Montenegro

Hace 4 años

Aca encontre un articulo que explica como se usa flex box en React Native https://medium.com/@lmleon19/flexbox-en-react-native-9defe7adfaa

Gran aporte, gracias.

Les comparto la documentación sobre el método padStart: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Informacion util, gracias.

Los view para dar agregar style no me parece buena práctica, se formará un callback Hell

Usando un solo view creo que podemos tener el mismo resultado

const PokemonCard = (props) => {
    const { pokemon } = props
    const goToPokemon = () => {
        console.log("pokemon send ", pokemon)
    }
    return (
        <TouchableWithoutFeedback onPress={goToPokemon}>
            <View style={styles.card}>
                <Text>{pokemon.name}</Text>
                <Image source={{ uri: pokemon.image }} style={styles.image} />
            </View>

        </TouchableWithoutFeedback>
    )
}
export default PokemonCard

const styles = StyleSheet.create({
    card: {
        flex: 1,
        backgroundColor: "#a4d1b3",
        width: 100,
        height: 100,
        margin: 8,
        borderRadius: 20
    },
    image: {
        width: 100,
        height: 100,
    }
})

Hola, esto no es un callback hell, simplemente son elementos anidados. Dejo esto por acá para no generar conceptos errados en los compañeros.

El nombre correcto es deep nesting. Se podría mejorar como lo mencionas, pero no confundir con "Callback hell".

Segun la documentación de React Native, noes para nada recomendado usar "TouchableWithoutFeedbak", literalmente dice: "Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched."

Buen dato! Supongo que la razón va más por la UX entonces 👌

La alternativa recomendada según veo en la documentación es usar Pressable

en la ultima version el componente 'TouchableWithoutFeedback' fue deprecado (no tiene soporte, no se debe utilizar), en cambio esta el componente 'Pressable'

Yo creo que no tiene absolutamente nada que ver con el concepto de un Callback Hell.

Hola, para arreglar la carga doble de información cambie la linea del keyExtractor en PokemonsList.jsx a la siguiente manera:

        keyExtractor={(pokemon, index) => String(index)}

Por el momento me ha funcionado bien :D

Eso me soluciono el error de que se duplican las claves entre los elementos de la lista, pero no lo se carguen doble. En mi caso, me carga doble al editar PokemonCard y hace el hotreloading. Aun sigo buscando como evitar eso.

gracias me salvaste la existencia jaja estaba volviendome loca con la duplicación infinita de pokemones 😄

El view vendria a ser el div del html? Porque lo utiliza tanto?

Si sería algo similar.

No puedo hacer scroll en la pantalla para ver el resto de pokemons

Buenas compañeros a mi no me funcionan las imagenes, de hecho me cierra la app de expo al recargar expo con la etiqueta Image, alguno tiene idea de porque pueda ser?

Deberias apagar las recomendaciones del IDE grabando las clases tu pantalla esta como muy acercada o es muy chica y se consume media pantalla hahah

Les comparto mi repo con la versión de React Native más typescript para Junio de 2025, sólo no he logrado que haga scroll mi lista:

El componente Image no acepta imágenes SVG, por lo que en ese caso tendrian que usar una libreria como react-native-svg y usar el componente SvgUri de esta manera:

<SvgUri
    width={100}
    height={100}
    uri={data.sprites.other["dream_world"].front_default}
 />

TouchableWithoutFeedback recomienda mejor utilizar el componente Pressable(). Para que se visualice de la mejor manera ese componente debe estar adentro de un "container". Quedaría de la siguiente manera

export default function PokemonCard(props) {
    const { pokemon } = props;

    const goToPokemon = () => {
        console.log(`Es pokemon ${pokemon.name}`);
    }

    return (
        <View style={styles.container}>
            <Pressable onPress={goToPokemon}>
                <View style={styles.card}>
                    <View style={styles.spacing}>
                        <View style={styles.bgCard}>
                            <Text style={styles.number}>#{`${pokemon.order}`.padStart(3, 0)}</Text>
                            <Text style={styles.name}>{pokemon.name}</Text>
                            <Image source={{ uri: pokemon.image }} style={styles.image} />
                        </View>
                    </View>
                </View>
            </Pressable>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    card: {
        flex: 1,
        height: 130
    },
    spacing: {
        flex: 1,
        padding: 5
    },
    bgCard: {
        backgroundColor: "grey"
    },
    image: {
        position: "absolute",
        bottom: 2,
        right: 2,
        width: 90,
        height: 90
    },
    name: {
        color: "#fff",
        paddingTop: 10,
        fontSize: 15,
        fontWeight: "bold",
    },
    number: {
        position: "absolute",
        top: 10,
        right: 10,
        fontSize: 11,
        color: "#fff"
    }
});

Si les aparece un borde en arriba y abajo es normal, en la siguiente clase lo quitan con "headertransparent"

pregunta es mas con el tema de debugear, en mi caso al usar la app expo para realizar la practica como hago para ver los console.log( ) que ponga a lo largo del codigo, ya uqe observo que al darle onPress se llama una funcion y esa hace el console.log( ) en la terminal, me podrias indicar cual seria los pasos para utilizar le mobile y poder observar ese console.log()

Hola comunidad por qué puede ser que tarda en cargar las imágenes y en ocasiones ni sisquiera las carga?

Alguien mas se dio cuenta que en el API no esta el pokemon #4??? Es curioso jaja

Esta clase me regreso a mi infancia, ha motivado mas mis ganas de aprender mobile.

Hasta ahora vamos todo bien, no hay mayor problema usando la versión 6

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

Renderizando la PokemonCard

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon