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",
};

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

Ejemplo:

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

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'
  }

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 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,
  },
});

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

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,
  }),

});

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

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

Capitalizar sin usar libreria

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>```

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()],
  ];
};