Maquetación del Pokemon: header

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

Patrick Jhonatan Hernandez Blanco

student•

Para hacer transparente el header y ocultar la sombra usar el siguiente código, enero del 2022

<Stack.Screen 
                name='Pokemon' 
                component={ Pokemon } 
                options={ {
                    title: "",
                    headerShown: true,
                    headerTransparent: true,
                    headerShadowVisible: false
                } }
            />

Luis Fernando Pedroza Taborda

student•

Funciona bien, gracias.

Luis Alejandro Nieto Ruth

student•

Archivo header.js

import React from 'react'
import { View, Text, StyleSheet, SafeAreaView, Image } from 'react-native';
import { capitalize } from 'lodash';
import getColorByPokemonType from '../../utils/getColorByPokemonType'

export default function Header(props) {
  const { name, order, image, type } = props;

  const color = getColorByPokemonType(type);
  const bgStyles = [{ backgroundColor: color, ...styles.bg }]
  return (
    <>
      <View style={bgStyles} />
      <SafeAreaView style={styles.content}>
        <View style={styles.header}>
          <Text style={styles.name}>{capitalize(name)}</Text>
          <Text style={styles.order}>#{`${order}`.padStart(3, 0)}</Text>
        </View>
        <View style={styles.contentImg}>
          <Image source={{ uri: image }} style={styles.image} />
        </View>
      </SafeAreaView>
    </>
  )
}

const styles = StyleSheet.create({
  bg: {
    width: '100%',
    height: 400,
    position: 'absolute',
    borderBottomEndRadius: 300,
    borderBottomLeftRadius: 300,
    transform: [{ scaleX: 2 }],
  },
  content: {
    marginHorizontal: 20,
    marginTop: 30
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 40
  },
  name: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 26,
  },
  order: {
    color: 'white',
    fontWeight: 'bold',
  },
  contentImg: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    top: 30,
  },
  image: {
    width: 250,
    height: 300,
    resizeMode: "contain",
  },
})

Luis Fernando Pedroza Taborda

student•

Gracias por el resumen.

Gustavo Pú

student•

el componente Header 🚀

<Header
        name={pokemon.name}
        order={pokemon.order}
        image={pokemon.sprites.other["official-artwork"].front_default}
        type={pokemon.types[0].type.name}
/>

Kenet Andrés Chungandro Montenegro

student•

Esta quedando Genial!

Edward Larsson Vega Carrillo

student•

la imagen se me distorciona cuando la paso de 100px

Deyvid Antonio Arauz Cruz

student•

No se muestra la imagen :\

Juan Camilo Rivas Molina

student•

Al final de la clase el profe explica que puso por error mal "algo" y por eso no se ve en android, es "uri" en vez de "url" en el componente "Header"

David Rangel

student•

Les comparto mi repo al 14 de Julio del 2025, agregué Zustand para pasar el estado entre componentes: https://github.com/dr1602/poke-native

Juan Carlos Ramirez

student•

no he podido visualizar el detalle de cada pokemon no me funciona me sale esto cada vez que le doy click a un pokemon: The action 'NAVIGATE' with payload {"name":"Pokemon","params":{"id":21}} was not handled by any navigator.

Do you have a screen named 'Pokemon'?

he revisado varias veces y tengo el mismo código, no se si me pueden ayudar

Renzo Spitale

student•

En el minuto 10 he visto che a mi todavia no hay en color del background, he revisado dopo el codico y es igual como escrito, no entiendo donde esta mal, ayuda pls

Maquetación del Pokemon: header

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