How to change views based on condition - react-native

Question

I am new to react native development. In my application I need to change the color of the view based on the condition. So my question is can I use if condition between the views in react native. The following is the code
import React, {Component} from 'react';
import {StyleSheet, FlatList, Text, View, Alert,Image,TouchableOpacity} from 'react-native';
export default class Myproject extends Component {
constructor(props)
{
super(props);
this.state = { FlatListItems: [
{key: 'One'},
{key: 'Two'},
{key: 'Three'},
{key: 'Four'},
{key: 'Five'},
{key: 'Six'},
{key: 'Seven'},
{key: 'Eight'},
{key: 'Nine'},
{key: 'Ten'},
{key: 'Eleven'},
{key: 'Twelve'}
]}
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
marginLeft: 12,
backgroundColor: "#607D8B",
}}
/>
);
}
GetItem (item) {
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={this.state.FlatListItems}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={
({item}) =>
<View style={styles.mainItem}>
<View style={styles.itemContainer}>
<View>
<Image source={require('./resource/ic_drawer.png')} />
<Text style={styles.item} onPress={this.GetItem.bind(this, item.key)}>{item.key}</Text>
</View>
<View style={styles.balanceItem}>
<View>
<Text >Balance</Text>
<Text style={{color: '#000',fontSize: 18}}>$89.04</Text>
</View>
<View style={styles.subItem}>
<View>
<Text >Account number</Text>
<Text style={{color: '#000',fontSize: 14}}>743509-001</Text>
</View>
<View style={styles.balanceItem}>
<Text >Meter number</Text>
<Text style={{color: '#000',fontSize: 14}}>17976849</Text>
</View>
</View>
</View>
<View style={styles.balanceItem}>
<View style={styles.duenbuttonItem}>
<View>
<Text >Due Date</Text>
<Text style={{color: '#000',fontSize: 14}}>30/09/2016</Text>
</View>
</View>
<TouchableOpacity style={styles.btn} onPress={this.login}><Text style={{color: 'white',fontSize: 14}}>PAY NOW</Text></TouchableOpacity>
</View>
<Image source={require('./resource/arrow_24.png')} style={styles.arrowImage}/>
</View>
</View>
}
/>
</View>
);
}
login=()=>{
alert("testing......");
// this.props.navigation.navigate('Profile');
}
}
I want the output like the below image
I have designed everything fine. But the problem is green arrow and white arrow. I have designed these arrows too. But these arrows are displaying based on the condition.
I have tried like this but getting the following issue
if(item.key == "One"){
<View style={{borderColor: 'black',borderWidth: 6,marginBottom: -6}}/>
}else{
<View style={{borderColor: 'white',borderWidth: 6,marginBottom: -6}}/>
}
So here the problem is string comparison or any other problem.

Answer 1

You can do even better than returning a new view. In your case you only want to change the bg color, so you can have a ternary condition inside your style like this:
<View style={{borderColor: item.key == "One" ? "black" : "white"}}/>
UPDATE for multiple condition :
defineBgColor(key){
switch(key){
case "One":
return "black";
case "Two":
return "white";
case "Three":
return "orange";
}
}
render(){
<View style={{borderColor: this.defineBgColor(item.key)}}/>
}

Answer 2

An 'if' condition is a statement (doesn't have a return value).
Use ternary operator you'll have a return value.
{item.key == "One" ?
<View style={{borderColor: 'black',borderWidth: 6,marginBottom: -6}} /> :
<View style={{borderColor: 'white',borderWidth: 6,marginBottom: -6}} /> }

Answer 3

This may work.
{item.key == "One" ?
<View style={{borderColor: 'black',borderWidth: 6,marginBottom: -6}} /> :
<View style={{borderColor: 'white',borderWidth: 6,marginBottom: -6}} />}
However, if the only thing that differs is the borderColour, you could use something like
<View style={item.key == "One" ? styles.blackborder : styles.whiteborder} />
with blackborder and white border defined
blackborder {
...
}
whiteborder {
...
}

Answer 4

const getBorderColor = key => {
const searchKey = key.toLowerCase();
const borderMap = {
one: 'green',
two: 'red',
three: 'white',
};
return borderMap[searchKey];
};
<FlatList
data={this.state.FlatListItems}
renderItem={({item}) => <View style={{borderColor: this.getBorderColor(item.key)}} />}
/>