title: How to change views based on condition
body: <p>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</p>
  
  <pre><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 = () =&gt; {
      return (
        &lt;View
          style={{
            height: 1,
            width: "100%",
            marginLeft: 12,
            backgroundColor: "#607D8B",
          }}
        /&gt;
      );
    }
  
    GetItem (item) {
  
    Alert.alert(item);
  
    }
  
  
    render() {
      return (
  
   &lt;View style={styles.MainContainer}&gt;
  
        &lt;FlatList
  
            data={this.state.FlatListItems}
  
            ItemSeparatorComponent = {this.FlatListItemSeparator}
  
            renderItem={
              ({item}) =&gt; 
               &lt;View style={styles.mainItem}&gt; 
                  &lt;View style={styles.itemContainer}&gt;
  
                     &lt;View&gt;
                       &lt;Image source={require('./resource/ic_drawer.png')}  /&gt;
                       &lt;Text style={styles.item} onPress={this.GetItem.bind(this, item.key)}&gt;{item.key}&lt;/Text&gt; 
                     &lt;/View&gt;
  
                     &lt;View style={styles.balanceItem}&gt;
                       &lt;View&gt;
                         &lt;Text &gt;Balance&lt;/Text&gt;
                         &lt;Text style={{color: '#000',fontSize: 18}}&gt;$89.04&lt;/Text&gt;
                       &lt;/View&gt;
  
                       &lt;View style={styles.subItem}&gt;
                         &lt;View&gt;
                           &lt;Text &gt;Account number&lt;/Text&gt;
                           &lt;Text style={{color: '#000',fontSize: 14}}&gt;743509-001&lt;/Text&gt;
                         &lt;/View&gt;
                         &lt;View style={styles.balanceItem}&gt;
                           &lt;Text &gt;Meter number&lt;/Text&gt;
                           &lt;Text style={{color: '#000',fontSize: 14}}&gt;17976849&lt;/Text&gt;
                         &lt;/View&gt;
                       &lt;/View&gt;
                      &lt;/View&gt;
  
                      &lt;View style={styles.balanceItem}&gt;
                        &lt;View style={styles.duenbuttonItem}&gt;
                           &lt;View&gt;
                             &lt;Text &gt;Due Date&lt;/Text&gt;
                             &lt;Text style={{color: '#000',fontSize: 14}}&gt;30/09/2016&lt;/Text&gt;
                           &lt;/View&gt;
                        &lt;/View&gt;
                        &lt;TouchableOpacity style={styles.btn} onPress={this.login}&gt;&lt;Text style={{color: 'white',fontSize: 14}}&gt;PAY NOW&lt;/Text&gt;&lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                      &lt;Image source={require('./resource/arrow_24.png')} style={styles.arrowImage}/&gt;   
  
                  &lt;/View&gt;   
               &lt;/View&gt;   
            }
        /&gt;
  
  
    &lt;/View&gt;
  
      );
    }
  
    login=()=&gt;{
      alert("testing......");
      // this.props.navigation.navigate('Profile');
  }
  }
  </code></pre>
  
  <p>I want the output like the below image</p>
  
  <p><a href="https://i.stack.imgur.com/U01iX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U01iX.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>I have tried like this but getting the following issue</p>
  
  <pre><code>if(item.key == "One"){
        &lt;View style={{borderColor: 'black',borderWidth: 6,marginBottom: -6}}/&gt;
  }else{
        &lt;View style={{borderColor: 'white',borderWidth: 6,marginBottom: -6}}/&gt;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/sPZJ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sPZJ8.png" alt="enter image description here"></a></p>
  
  <p>So here the problem is string comparison or any other problem.</p>