Clasificación por colores y utilidades de Lodash

export const POKEMON_TYPE_COLORS = {
  normal: "#A8A878",
  fighting: "#C03028",
  flying: "#A890F0",
  poison: "#A040A0",
  ground: "#E0C068",
  rock: "#B8A038",
  bug: "#A8B820",
  ghost: "#705898",
  steel: "#B8B8D0",
  fire: "#FA6C6C",
  water: "#6890F0",
  grass: "#48CFB2",
  electric: "#FFCE4B",
  psychic: "#F85888",
  ice: "#98D8D8",
  dragon: "#7038F8",
  dark: "#705848",
  fairy: "#EE99AC",
};

No sé si se usará el paquete lodash para mas cosas en el transcurso del curso, pero una forma fácil de “Capitalizar” un texto sin instalar un paquete es simplemente agregar la propiedad “textTransform: ‘capitalize’” en los estilos:

  name: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 15,
    paddingTop: 10,
   textTransform: 'capitalize'
  }

Otra forma de ocultar el header en React Navigation es mediante la key “headerShown”.

Ejemplo:

<Stack.Screen 
	name="Pokedex"
	component={PokedexScreen}
	options={{headerShown: false}}  
 />

En Android, el tag SafeAreaView no funciona igual que en ios.

Dejo abajo el código de la screen de Pokedex para que se vea lindo y también el artículo de StackOverflow de dónde saqué este código.

https://stackoverflow.com/questions/51289587/react-native-how-to-use-safeareaview-for-android-notch-devices

import React, { useState, useEffect } from "react";
import { SafeAreaView, StyleSheet, StatusBar, Platform } from "react-native";
import { getPokemonsAPI, getPokemonDetailsByUrlAPI } from "../api/pokemon";
import PokemonList from "../components/PokemonList";

export default function PokedexScreen() {
  const [pokemons, setPokemons] = useState([]);

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

  const loadPokemons = async () => {
    try {
      const response = await getPokemonsAPI();
      const pokemonsArray = [];

      for await (const pokemon of response.results) {
        const pokemonDetails = await getPokemonDetailsByUrlAPI(pokemon.url);
        pokemonsArray.push({
          id: pokemonDetails.id,
          name: pokemonDetails.name,
          type: pokemonDetails.types[0].type.name,
          order: pokemonDetails.order,
          image: pokemonDetails.sprites.other["official-artwork"].front_default,
        });
      }

      setPokemons([...pokemons, ...pokemonsArray]);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <SafeAreaView style={styles.AndroidSafeArea}>
      <PokemonList pokemons={pokemons} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  AndroidSafeArea: {
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

Yo quise ser un poco rebelde y en vez de usar el API de Pokemon, estoy usando el de Marvel para mostrar los personajes. Así voy:

Lodash es muy útil para algunas cosas, pero para colocar la primera letra del nombre en mayúscula solo debes agregar el siguiente css en el name

textTransform: 'capitalize',

En vez de crear una funcion en Utils se podria convertir el valor que esta en StyleSheet en una funcion y pasarle como parametro el valor de la constante

<View style={styles.bgStyles(POKEMON_TYPE_COLORS[pokemon.type])}>
 </View>

const styles = StyleSheet.create({
  bgStyles: (color) => ({
    backgroundColor: color,
    flex: 1,
    padding: 10,
    borderRadius: 15,
  }),

});

Otra manera de capitalizar el nombre sería a través de los estilos, con la propiedad:

textTransform: ‘capitalize’

Si quieren agregar sombras en las cards pueden escribir este css

Asi se verá
![](

card: {
    flex: 1,
    height: 130,
    shadowColor: "#171717",
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.3,
    shadowRadius: 2,
  },

Como comenté en clases pasadas, algunos pokémon tienen 2 tipos, así que decidí poner ambos tipos como backgroundColor. Este es el resultado de forma horizontal:

Y este (el que me parece que se ve mejor) de forma diagonal:

Para convertir la primera letra en mayúscula preferí hacer una función en utils:
src/utils/capitalizeFirstLetter.js

const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1)
export default capitalizeFirstLetter

Y lo usas desde PokemonCard.jsx

import capitalizeFirstLetter from '../utils/capitalizeFirstLetter'
...
 <Text>{capitalizeFirstLetter(pokemon.name)}</Text>```

si alguien esta haciendolo con TS, le mando captura de mi solucion usando enums y identificando su type.

export enum PokemonTypeColor {
  'normal' = '#A8A878',
  'fighting' = '#C03028',
  'flying' = '#A890F0',
  'poison' = '#A040A0',
  'ground' = '#E0C068',
  'rock' = '#B8A038',
  'bug' = '#A8B820',
  'ghost' = '#705898',
  'steel' = '#B8B8D0',
  'fire' = '#FA6C6C',
  'water' = '#6890F0',
  'grass' = '#48CFB2',
  'electric' = '#FFCE4B',
  'psychic' = '#F85888',
  'ice' = '#98D8D8',
  'dragon' = '#7038F8',
  'dark' = '#705848',
  'fairy' = '#EE99AC',
}


export const getColotByType = (types: string[]): string[] => 
	types.map((type) => 
		PokemonTypeColor[type as keyof typeof PokemonTypeColor] //this is how to type it
	);

getColotByType(['fire', 'water'])

SafeAreaView no funciona importandolo desde ‘react-native’

hay que importarlo de la siguiente manera

import { SafeAreaView } from 'react-native-safe-area-context'

Si a alguien le falla el spread operator del los styles es porque StyleSheet esta pensada para ser usada de forma directa, no heredada, por lo cual si hacen un console.log() de algun key que tengan en la constante styles, les va a devolver el index de la ubicación en memoria.
Por lo cual, StyleSheet provee el metodo .flatten() a través del cual van a poder acceder al value de la key, el spread quedaría así.
…StyleSheet.flatten(styles.laKeyQueNecesitan)

Saludos
-MC

Lodash es una libreria bastante grande, trae mapeos, filtros y demás, de hecho recien descubrí que puedes importar paquetes del mismo sin necesidad de tener todo lodash en tu proyecto, ejemplo si solo quieres la funcion de capitalize puedes usar

https://www.npmjs.com/package/lodash.capitalize

y viceversa para el resto de paquetes, solo vas a la doc, buscas la funcion que quieres

le das a la parte de package y ahí te aparece el paquete para instalar

export default function capitalizeWords(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

Capitalizar sin usar libreria

Para los que tienen problemas con tener un solo tipo, pueden utilizar expo-linear-gradient.

const getColorsByPokemonType = (type1, type2) => {
  if (type2) {
    return [
      POKEMON_TYPE_COLORS[type1.toLowerCase()],
      POKEMON_TYPE_COLORS[type2.toLowerCase()],
    ];
  }
  return [
    POKEMON_TYPE_COLORS[type1.toLowerCase()],
    POKEMON_TYPE_COLORS[type1.toLowerCase()],
  ];
};