Maquetación del Pokemon: sección de tipos

Archivo Type.js
le hice pequeñas modificaciones, use map, pero la que tiene los array en javaScript y la key de la <View> es el mismo nombre del tipo y en los estilos hice una funcion aparte para el background

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { capitalize } from 'lodash';
import getColorByPokemonType from '../../utils/getColorByPokemonType'

export default function Type({ types }) {
  console.log(types);

  const color = (type) => getColorByPokemonType(type);
  return (
    <View style={styles.content}>
      {types.map(item => (
        <View
          key={item.type.name}
          style={{ backgroundColor: color(item.type.name), ...styles.pill }}
        >
          <Text>{capitalize(item.type.name)}</Text>
        </View>
      ))
      }
    </View >
  )
}

const styles = StyleSheet.create({
  content: {
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  pill: {
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 20,
    marginHorizontal: 10
  }
})

Súper mala practica utilizar el index cómo key 🤦🏻. Lo dice la propia documentación.

Use map() de JS, comparto mi ejemplo!

return (
        <View style={styles.content}>
            <Text>Type pokemon...</Text>
            {types.map(function(item, index){
                return( 
                    <View key={index}>
                        <Text>{item.type.name}</Text>
                    </View>
                )
            })}
        </View>
    )