How to change views based on condition

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.