Maquetación del Pokemon: sección de tipos

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

Luis Alejandro Nieto Ruth

student•

Archivo Type.js le hice pequeñas modificaciones, use map, pero la que tiene los array en javaScript y la key de la <View> es el mismo nombre del tipo y en los estilos hice una funcion aparte para el background

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

export default function Type({ types }) {
  console.log(types);

  const color = (type) => getColorByPokemonType(type);
  return (
    <View style={styles.content}>
      {types.map(item => (
        <View
          key={item.type.name}
          style={{ backgroundColor: color(item.type.name), ...styles.pill }}
        >
          <Text>{capitalize(item.type.name)}</Text>
        </View>
      ))
      }
    </View >
  )
}

const styles = StyleSheet.create({
  content: {
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  pill: {
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 20,
    marginHorizontal: 10
  }
})

Manuel Marín

student•

Justamente me preguntaba por qué el profesor no utilizó la función .map() nativa de Javascript.

Luis Fernando Pedroza Taborda

student•

Gracias por el aporte.

Ponciano Guevara Lozano

student•

Súper mala practica utilizar el index cómo key 🤦🏻. Lo dice la propia documentación.

Camilo Esteban Mora Paez

student•

Entonces en este caso usted que utilizaría como key?.

Jaime David Burbano Montoya

student•

La url. La url de cada tipo es unica

Jose Ramon Moreno Sanchez

student•

Use map() de JS, comparto mi ejemplo!

return (
        <View style={styles.content}>
            <Text>Type pokemon...</Text>
            {types.map(function(item, index){
                return( 
                    <View key={index}>
                        <Text>{item.type.name}</Text>
                    </View>
                )
            })}
        </View>
    )

David Rangel

student•

Buenas tardes team, les comparto mi github con el proyecto en la rama en la que trabajé la clase: https://github.com/dr1602/poke-native/tree/feat/class15B

Este repo considera Typescript, Zustand y utiliza código propio en lugar de las funcionalidades de Loadash.

Diego Alejandro Asencio Cuellar

student•

que pasa cuando son muchos "pills" o "tags", digamos en mi caso se me esta desbordando, estoy siguiendo el curso pero usando una api propia y otro enfoque de la app, sin embargo en general trato de seguir al pie de la letra, en mi caso fue que puse varios tags (mas de 4) y se me desbordo en la pantalla

Luz Galvis

student•

const styles = StyleSheet.create({
  content: {
    marginTop: 50,
    display: 'flex',
    flexDirection:'row',
    flexWrap: 'wrap',
    justifyContent:'center',
  },
  pill: {
    margin:2,
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 20,
    marginHorizontal: 10,
  },
  text: {
    textTransform:'capitalize',
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  }
})

Maquetación del Pokemon: sección de tipos

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