Maquetación del Pokemon: estadísticas

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

Kevin Acevedo

student•

Me tome el tiempo de replicar el tema de los colores en los stats, pero con 4 (Verde, Amarillo, Naranja y Rojo), creo que no hace falta explicar cual es cual. Dejo el codigo por si alguien quiere utilizar este sistema:

  const barStyles = (num) => {
    let bgColorized;

    if (num <= 25) {
      bgColorized = "#ff3e3e";
    } else if (num > 25 && num < 50) {
      bgColorized = "#F08700";
    } else if (num >= 50 && num < 75) {
      bgColorized = "#EFCA08";
    } else if (num >= 75) {
      bgColorized = "#6EEB83";
    }
    return {
      backgroundColor: bgColorized,
      width: `${num}%`,
    };
  };

Diego Delgado

student•

Excelente

Gustavo Martín Isidoro Shiraishi

student•

gracias, esta mejor así

Luis Alejandro Nieto Ruth

student•

componente Stats

import React from 'react'
import { View, Text, StyleSheet } from 'react-native';
import { map, capitalize } from 'lodash';

export default function Stack({ stats }) {
  const barStyles = (number) => {
    const color = number > 49 ? '#00ac17' : '#ff3e3e';
    return {
      backgroundColor: color,
      width: `${number}%`,
    }
  }
  return (
    <View style={styles.content}>
      <Text style={styles.title}>Base Stats</Text>
      {map(stats, (item, index) => (
        <View key={index} style={styles.block}>
          <View style={styles.blockTitle}>
            <Text style={styles.statName}>{capitalize(item.stat.name)}</Text>
          </View>
          <View style={styles.blockInfo}>
            <Text style={styles.number}>{item.base_stat}</Text>
            <View style={styles.bgBar}>
              <View style={[styles.bar, barStyles(item.base_stat)]} />
            </View>
          </View>
        </View>
      ))
      }
    </View >
  )
}

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: 20,
    marginTop: 20,
    marginBottom: 60
  },
  title: {
    fontWeight: 'bold',
    fontSize: 20,
    paddingBottom: 5
  },
  block: {
    flexDirection: 'row',
    paddingVertical: 5,
  },
  blockTitle: {
    width: '30%',
  },
  statName: {
    fontSize: 14,
    color: '#6b6b6b'
  },
  blockInfo: {
    width: '70%',
    flexDirection: 'row',
    alignItems: 'center'
  },
  number: {
    width: '12%',
    fontSize: 14
  },
  bgBar: {
    backgroundColor: '#dedede',
    width: '88%',
    height: 10,
    borderRadius: 20,
    overflow: 'hidden'
  },
  bar: {
    height: 10,
    borderRadius: 20,
  }
})

Luis Fernando Pedroza Taborda

student•

Buen aporte, gracias.

Rocketfy learning

student•

Samuel Miranda Martínez

student•

Como no voy con lo de estadísticas malas y buenas no puse lo del color verde y rojo, pero si hice que el porcentaje fuera más acertado con los máximos actuales que tienen los pokemones.

const maxStats = [255, 190, 230, 194, 230, 180];

  const barStyles = (index, baseStat) => {
    const percentageStat = (100 * baseStat) / maxStats[index];
    return {
      backgroundColor: barColor,
      width: `${percentageStat}%`,
    };
  };

victor saumelli

student•

la funcion para agregar 3 colorcitos por si alguien la quiere, si hay una mejor manera por favor decirme jeje, fue lo que se me ocurrio al momento.

const barstyles=(num)=>{
        const color = num >= 70 ? "#31BB09" : num < 70 && num>=30 ? "#D7CA25": "#E01C1C";
        return {backgroundColor: color,width: `${num}%`}
    }

Tulio Junior Rangel Nuñez

student•

Probando el scroll me di cuenta de algo, el "order" de los pokémon no es el mismo de la pokédex, para que sea tal cual el número de la pokédex se debe renderizar el id

Cristofer Daniel Gómez Villanueva

student•

Este sería el código sin usar la paquetería loadash.

export default function Stats(props) {
    const { stats } = props;
    
    const barStyles = (number) => {
        const color = number > 49 ? '#00ac17' : '#ff3e3e';
        return {
          backgroundColor: color,
          width: `${number}%`,
        }
      }

    return (
        <View style={styles.content}>
            <Text style={styles.title}>Base Stats</Text>
            {stats.map(item => (
                <View key={item.stat.name} style={styles.block}>
                    <View style={styles.blockTitle}>
                        <Text style={styles.statName}>{item.stat.name}</Text>
                    </View>
                    <View style={styles.blockInfo}>
                        <Text style={styles.number}>{item.base_stat}</Text>
                        <View style={styles.bgBar}>
                            <View style={[styles.bar, barStyles(item.base_stat)]}></View>
                        </View>
                    </View>
                </View>
            ))
            }
        </View>
    )
}

const styles = StyleSheet.create({
    content: {
        paddingHorizontal: 20,
        marginTop: 20,
        marginBottom: 60
    },
    title: {
        fontWeight: 'bold',
        fontSize: 20,
        paddingBottom: 5
    },
    block: {
        flexDirection: 'row',
        paddingVertical: 5,
    },
    blockTitle: {
        width: '30%',
    },
    statName: {
        fontSize: 14,
        color: '#6b6b6b',
        textTransform: "capitalize"
    },
    blockInfo: {
        width: '70%',
        flexDirection: 'row',
        alignItems: 'center'
    },
    number: {
        width: '12%',
        fontSize: 14
    },
    bgBar: {
        backgroundColor: '#dedede',
        width: '88%',
        height: 10,
        borderRadius: 20,
        overflow: 'hidden'
    },
    bar: {
        height: 10,
        borderRadius: 20,
    }
});

Brian Bentancourt

student•

como hay algunos pokemones que tienen stats mayores a 100 hice el siguiente cambio

export default function Stats({ stats }) {
    const [maxStat, setMaxStat] = useState(100)

    useEffect(() => {
        const max = Math.max(...stats.map(s => s.base_stat))
        if (max > 100)
            setMaxStat(max)
    }, [stats])

    const barStyles = (number) => {
        const color = number > 49 ? '#00ac17' : '#ff853e'
        const width = (number * 100 / maxStat).toFixed(2)
        return {
            backgroundColor: color,
            width: `${width}%`
        }
    }

Gustavo Pú

student•

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import { map, capitalize } from "lodash";

export default function Stats(props) {
  const { stats } = props;

  const barStyles = (num) => {
    const color = num > 49 ? "#00ac17" : "#ff3e3e";
    return {
      backgroundColor: color,
      width: `${num}%`,
    };
  };

  return (
    <View style={styles.content}>
      <Text style={styles.title}>Base Stats</Text>
      {map(stats, (item, index) => (
        <View key={index} style={styles.block}>
          <View style={styles.blockTitle}>
            <Text style={styles.statName}>{capitalize(item.stat.name)}</Text>
          </View>
          <View style={styles.blockInfo}>
            <Text style={styles.number}>{item.base_stat}</Text>
            <View style={styles.bgBar}>
              <View style={[styles.bar, barStyles(item.base_stat)]} />
            </View>
          </View>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: 20,
    marginTop: 40,
    marginBottom: 80,
  },
  title: {
    fontWeight: "bold",
    fontSize: 20,
    paddingBottom: 5,
  },
  block: {
    flexDirection: "row",
    paddingVertical: 5,
  },
  blockTitle: {
    width: "30%",
  },
  statName: {
    fontSize: 12,
    color: "#6b6b6b",
  },
  blockInfo: {
    width: "70%",
    flexDirection: "row",
    alignItems: "center",
  },
  number: {
    width: "12%",
    fontSize: 12,
  },
  bgBar: {
    backgroundColor: "#dedede",
    width: "88%",
    height: 5,
    borderRadius: 20,
    overflow: "hidden",
  },
  bar: {
    // backgroundColor: "red",
    // width: "40%",
    height: 5,
    borderRadius: 20,
  },
});

David Rangel

student•

Les dejo el repo donde trabajo esta clase con Typescript y expo, les recomiendo revisar los utils ahi separé la función para obtener los colores de las barras para separar responsabilidades. El código de específico del proyecto esta en la rama feat/class16:

Maquetación del Pokemon: estadísticas

Vladimir Farrera Vera

student•

Tengo el siguiente erro y no se como solucionarlo

Ninguna sobrecarga coincide con esta llamada.
  La sobrecarga 1 de 2, "(props: ViewProps | Readonly<ViewProps>): View", dio el error siguiente.
    El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.
      El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle'.
        Los tipos de propiedad 'width' no son compatibles.
          El tipo 'string' no se puede asignar al tipo 'DimensionValue | undefined'.
  La sobrecarga 2 de 2, "(props: ViewProps, context: any): View", dio el error siguiente.
    El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle | Falsy | RegisteredStyle<ViewStyle>

Vladimir Farrera Vera

student•

Ya lo solucioone importe ViewStyle y tipe el retorno de

const barStyles = (num:number):ViewStyle => {
    const color = num > 49 ? "#00ac17" : "#ff3e3e";
    return {
      backgroundColor: color,
      width: `${num}%`,
    };
  };

y yano marca error en typescript

Nicolas Miranda

student•

en que mometo soluciono lo de la pildora en android ?

Samuel Miranda Martínez

student•

En la clase anterior, ten presente que el styles.content debe de contener directamente el style.pill

Tulio Junior Rangel Nuñez

student•

Así vamos

Tulio Junior Rangel Nuñez

student•

Los stats menores a 40 se pintan en rojo, Charizard evidentemente no es tiene esos stats.

Joan Gomezjurado Sánchez

student•

↓ ↓

  const barStyles = (num) => {
    let bgColorized;

    if (num <= 25) {
      bgColorized = "#ff3e3e";
    } else if (num > 25 && num < 50) {
      bgColorized = "#F08700";
    } else if (num >= 50 && num < 75) {
      bgColorized = "#EFCA08";
    } else if (num >= 75) {
      bgColorized = "#6EEB83";
    }
    return {
      backgroundColor: bgColorized,
      width: `${num}%`,
    };
  };

import React from 'react'
import { View, Text, StyleSheet } from 'react-native';
import { map, capitalize } from 'lodash';

export default function Stack({ stats }) {
  const barStyles = (number) => {
    const color = number > 49 ? '#00ac17' : '#ff3e3e';
    return {
      backgroundColor: color,
      width: `${number}%`,
    }
  }
  return (
    <View style={styles.content}>
      <Text style={styles.title}>Base Stats</Text>
      {map(stats, (item, index) => (
        <View key={index} style={styles.block}>
          <View style={styles.blockTitle}>
            <Text style={styles.statName}>{capitalize(item.stat.name)}</Text>
          </View>
          <View style={styles.blockInfo}>
            <Text style={styles.number}>{item.base_stat}</Text>
            <View style={styles.bgBar}>
              <View style={[styles.bar, barStyles(item.base_stat)]} />
            </View>
          </View>
        </View>
      ))
      }
    </View >
  )
}

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: 20,
    marginTop: 20,
    marginBottom: 60
  },
  title: {
    fontWeight: 'bold',
    fontSize: 20,
    paddingBottom: 5
  },
  block: {
    flexDirection: 'row',
    paddingVertical: 5,
  },
  blockTitle: {
    width: '30%',
  },
  statName: {
    fontSize: 14,
    color: '#6b6b6b'
  },
  blockInfo: {
    width: '70%',
    flexDirection: 'row',
    alignItems: 'center'
  },
  number: {
    width: '12%',
    fontSize: 14
  },
  bgBar: {
    backgroundColor: '#dedede',
    width: '88%',
    height: 10,
    borderRadius: 20,
    overflow: 'hidden'
  },
  bar: {
    height: 10,
    borderRadius: 20,
  }
}) 

const maxStats = [255, 190, 230, 194, 230, 180];

  const barStyles = (index, baseStat) => {
    const percentageStat = (100 * baseStat) / maxStats[index];
    return {
      backgroundColor: barColor,
      width: `${percentageStat}%`,
    };
  };

export default function Stats(props) {
    const { stats } = props;
    
    const barStyles = (number) => {
        const color = number > 49 ? '#00ac17' : '#ff3e3e';
        return {
          backgroundColor: color,
          width: `${number}%`,
        }
      }

    return (
        <View style={styles.content}>
            <Text style={styles.title}>Base Stats</Text>
            {stats.map(item => (
                <View key={item.stat.name} style={styles.block}>
                    <View style={styles.blockTitle}>
                        <Text style={styles.statName}>{item.stat.name}</Text>
                    </View>
                    <View style={styles.blockInfo}>
                        <Text style={styles.number}>{item.base_stat}</Text>
                        <View style={styles.bgBar}>
                            <View style={[styles.bar, barStyles(item.base_stat)]}></View>
                        </View>
                    </View>
                </View>
            ))
            }
        </View>
    )
}

const styles = StyleSheet.create({
    content: {
        paddingHorizontal: 20,
        marginTop: 20,
        marginBottom: 60
    },
    title: {
        fontWeight: 'bold',
        fontSize: 20,
        paddingBottom: 5
    },
    block: {
        flexDirection: 'row',
        paddingVertical: 5,
    },
    blockTitle: {
        width: '30%',
    },
    statName: {
        fontSize: 14,
        color: '#6b6b6b',
        textTransform: "capitalize"
    },
    blockInfo: {
        width: '70%',
        flexDirection: 'row',
        alignItems: 'center'
    },
    number: {
        width: '12%',
        fontSize: 14
    },
    bgBar: {
        backgroundColor: '#dedede',
        width: '88%',
        height: 10,
        borderRadius: 20,
        overflow: 'hidden'
    },
    bar: {
        height: 10,
        borderRadius: 20,
    }
});

export default function Stats({ stats }) {
    const [maxStat, setMaxStat] = useState(100)

    useEffect(() => {
        const max = Math.max(...stats.map(s => s.base_stat))
        if (max > 100)
            setMaxStat(max)
    }, [stats])

    const barStyles = (number) => {
        const color = number > 49 ? '#00ac17' : '#ff853e'
        const width = (number * 100 / maxStat).toFixed(2)
        return {
            backgroundColor: color,
            width: `${width}%`
        }
    }

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import { map, capitalize } from "lodash";

export default function Stats(props) {
  const { stats } = props;

  const barStyles = (num) => {
    const color = num > 49 ? "#00ac17" : "#ff3e3e";
    return {
      backgroundColor: color,
      width: `${num}%`,
    };
  };

  return (
    <View style={styles.content}>
      <Text style={styles.title}>Base Stats</Text>
      {map(stats, (item, index) => (
        <View key={index} style={styles.block}>
          <View style={styles.blockTitle}>
            <Text style={styles.statName}>{capitalize(item.stat.name)}</Text>
          </View>
          <View style={styles.blockInfo}>
            <Text style={styles.number}>{item.base_stat}</Text>
            <View style={styles.bgBar}>
              <View style={[styles.bar, barStyles(item.base_stat)]} />
            </View>
          </View>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: 20,
    marginTop: 40,
    marginBottom: 80,
  },
  title: {
    fontWeight: "bold",
    fontSize: 20,
    paddingBottom: 5,
  },
  block: {
    flexDirection: "row",
    paddingVertical: 5,
  },
  blockTitle: {
    width: "30%",
  },
  statName: {
    fontSize: 12,
    color: "#6b6b6b",
  },
  blockInfo: {
    width: "70%",
    flexDirection: "row",
    alignItems: "center",
  },
  number: {
    width: "12%",
    fontSize: 12,
  },
  bgBar: {
    backgroundColor: "#dedede",
    width: "88%",
    height: 5,
    borderRadius: 20,
    overflow: "hidden",
  },
  bar: {
    // backgroundColor: "red",
    // width: "40%",
    height: 5,
    borderRadius: 20,
  },
});

Ninguna sobrecarga coincide con esta llamada.
  La sobrecarga 1 de 2, "(props: ViewProps | Readonly<ViewProps>): View", dio el error siguiente.
    El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.
      El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle'.
        Los tipos de propiedad 'width' no son compatibles.
          El tipo 'string' no se puede asignar al tipo 'DimensionValue | undefined'.
  La sobrecarga 2 de 2, "(props: ViewProps, context: any): View", dio el error siguiente.
    El tipo '{ backgroundColor: string; width: string; }' no se puede asignar al tipo 'ViewStyle | Falsy | RegisteredStyle<ViewStyle>

Maquetación del Pokemon: estadísticas

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