I am trying to change the color of a component depending on the type of pokemon that is being displayed. I have this view inside a parent component that retrievs pokemon from an api. The pokemonType variable is from the api. It registers and I can console.log('pokemonType') which logs the type of pokemon e.g 'grass'. It seems that the ternary operator is not registering the pokemonType and going straight to default. Am I writing this wrong?
{/* Pokemon Type */}
<View style={[
(pokemonType === 'grass') ? styles.grass : styles.pokemonTypeDefault,
(pokemonType === 'fire') ? styles.fire : styles.pokemonTypeDefault,
(pokemonType === 'water') ? styles.water : styles.pokemonTypeDefault,
(pokemonType === 'bug') ? styles.bug : styles.pokemonTypeDefault,
(pokemonType === 'ghost') ? styles.ghost : styles.pokemonTypeDefault,
(pokemonType === 'rock') ? styles.rock : styles.pokemonTypeDefault,
(pokemonType === 'steel') ? styles.steel : styles.pokemonTypeDefault,
(pokemonType === 'electric') ? styles.electric : styles.pokemonTypeDefault,
]}>
<Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
</View>
const styles = StyleSheet.create({
grass: {
backgroundColor: '#00FF00',
width: 250,
height: 30,
marginTop: 10,
marginLeft: 80,
borderRadius: 50,
},
fire: {
backgroundColor: '#FFA500',
width: 250,
height: 30,
marginTop: 10,
marginLeft: 80,
borderRadius: 50,
},
}) ..//All the other type styles
pokemonTypeDefault: {
width: 250,
height: 30,
marginTop: 10,
marginLeft: 80,
borderRadius: 50,
backgroundColor: 'blue',
},
Thanks a lot
The problem is that you're adding styles.pokemonTypeDefault multiple times and thus overwriting your styles.
The way react-native styles work is that when you pass an array of styles, the styles in right side overwrite properties set on the previous elements, in your example if the pokemon type is grass your styles array would look something like
[styles.grass, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault]
One simpler and more clear solution would be creating a function to get your styles.
E.g.
{/* Pokemon Type */}
<View style={getPokemonTypeStyle(pokemonType)}>
<Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
</View>
const getPokemonTypeStyle = (pokemonType) => {
switch (pokemonType) {
case 'grass':
return styles.grass
case 'fire':
return styles.fire
case 'water':
return styles.water
case 'bug':
return styles.bug
case 'ghost':
return styles.ghost
case 'rock':
return styles.rock
case 'steel':
return styles.steel
case 'electric':
return styles.electric
default:
return styles.pokemonTypeDefault
}
const styles = StyleSheet.create({
grass: {
backgroundColor: '#00FF00',
width: 250,
height: 30,
marginTop: 10,
marginLeft: 80,
borderRadius: 50,
},
fire: {
backgroundColor: '#FFA500',
width: 250,
height: 30,
marginTop: 10,
marginLeft: 80,
borderRadius: 50,
},
}) ..//All the other type styles
pokemonTypeDefault: {
width: 250,
height: 30,
marginTop: 10,
marginLeft: 80,
borderRadius: 50,
backgroundColor: 'blue',
},