No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Clasificaci贸n por colores y utilidades de Lodash

9/17
Recursos

Aportes 20

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

No s茅 si se usar谩 el paquete lodash para mas cosas en el transcurso del curso, pero una forma f谩cil de 鈥淐apitalizar鈥 un texto sin instalar un paquete es simplemente agregar la propiedad 鈥渢extTransform: 鈥榗apitalize鈥欌 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 鈥渉eaderShown鈥.

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

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

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:

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: 鈥榗apitalize鈥

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

SafeAreaView no funciona importandolo desde 鈥榬eact-native鈥

hay que importarlo de la siguiente manera

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

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:

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,
  },
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: 鈥渃apitalize鈥. 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?

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铆.
鈥tyleSheet.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

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