Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Clasificación por colores y utilidades de Lodash

9/17
Recursos

Aportes 13

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Yo vengo de web. Y he viste que para poner en mayúsculas la primera letra. Aun en otros cursos fuera de aquí, ya con typescript, redux etc. Incluso con JavaScript acceden al primer carácter y lo convierten en mayúsculas. Aquí se instaló un paquete muy grande, con muchas funciones, solo para capitalizar texto. Pero en los estilos se puede poner. Para web es el equivalente a una propiedad de css. textTransform: “capitalize”. La pregunta es: por qué muchos lo hacen de esta manera (como lo explicaba antes) cuándo existe una propiedad de estilos que lo puede hacer en dos palabras?

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