Maquetación del Pokemon: estadísticas

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}%`,
    };
  };

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

a

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}%`,
    };
  };

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

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

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

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

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

Así vamos

↓
↓