title: Not able to set active and inactive images in React Native
body: <p>I am showing custom tab-bar in my application which is showing at centre of the screen. So, Each time one tab should be active and other tabs will be inactive state.
  According to that, I have implemented logic(bool values) and tried to change images, But, It's not working.</p>
  
  <p>My requirement is</p>
  
  <blockquote>
    <p>I have 4 tabs, suppose if user tap on 1st tab, I have to set active
    image to 1st tab then rest of 3 tabs with inactive images according to
    those titles (different inactive) images.</p>
    
    <p>Its like for all tabs active and inactive states, each time one tab
    only active state.</p>
  </blockquote>
  
  <p>It's showing undefined and even if and else if conditions executing, But, nothing changing images.</p>
  
  <p>Here is my code</p>
  
  <pre><code>    constructor(props) {
          super(props);
       //   this.state = { dataArray: getListData()}
          this.state = { selectedTab: 'Value', flagImage:true, flagForTelugu: false, flagForTamil: false, flagForHindi: false, flagForEnglish: false}
       }
  
      OnTabItemHandler = (tabItem) =&gt; {
          this.setState({selectedTab: tabItem,flagImage:this.state.flagImage})
      }
  
      renderBottomContent = (item) =&gt; {
          const {selectedTab, dataArray, flagForTelugu, flagForTamil, flagForHindi, flagForEnglish} = this.state 
          this.state = { dataArray: getListData()}    
          if (selectedTab ===  ‘Telugu’) {
              this.flagForTelugu = true
              this.flagForTamil = false
              this.flagForHindi = false
              this.flagForEnglish = false
          } else if (selectedTab ===  ‘Tamil’) {
              this.flagForTamil = true
              this.flagForTelugu = false
              this.flagForHindi = false
              this.flagForEnglish = false
          } else if (selectedTab ===  ‘Hindi’) {
              this.flagForHindi = true
              this.flagForTamil = false
              this.flagForTelugu = false
              this.flagForEnglish = false
          } else if (selectedTab ===  ‘English’) {
              this.flagForEnglish = true
              this.flagForTamil = false
              this.flagForTelugu = false
              this.flagForHindi = false
          } 
  
       //loading some other text here in bottom
  }
  
      render(item) {
          const {selectedTab, flagForTelugu, flagForTamil, flagForHindi, flagForEnglish} = this.state;
  return (
              &lt;View style={styles.container}&gt;
  
             &lt;View style = {styles.tabContainer}&gt;
             &lt;TouchableOpacity style={styles.tabIcons} onPress={() =&gt; this.OnTabItemHandler(‘Telugu’)}&gt;
                              &lt;Image
                                  style={styles.tabItemsImages}
                                  source={this.state.flagImage === true ?                  
                                      teluguActiveImage : 
                                      teluguDeActiveImage}
                              /&gt;
                          &lt;/TouchableOpacity&gt;
                          &lt;Text style={styles.tabTextItems} onPress={() =&gt; this.OnTabItemHandler('Telugu')}&gt;Telugu&lt;/Text&gt;
                      &lt;/View&gt;
  
             &lt;View style = {styles.tabContainer}&gt;
             &lt;TouchableOpacity style={styles.tabIcons} onPress={() =&gt; this.OnTabItemHandler(‘Tamil’)}&gt;
                              &lt;Image
                                  style={styles.tabItemsImages}
                                  source={this.state.flagImage === true ?                  
                                      tamilActiveImage : 
                                      tamilDeActiveImage}
                              /&gt;
                          &lt;/TouchableOpacity&gt;
                          &lt;Text style={styles.tabTextItems} onPress={() =&gt; this.OnTabItemHandler('Tamil')}&gt; Tamil &lt;/Text&gt;
                      &lt;/View&gt;
  
             &lt;View style = {styles.tabContainer}&gt;
             &lt;TouchableOpacity style={styles.tabIcons} onPress={() =&gt; this.OnTabItemHandler(‘Hindi’)}&gt;
                              &lt;Image
                                  style={styles.tabItemsImages}
                                  source={this.state.flagImage === true ?                  
                                      hindiActiveImage : 
                                      hindiDeActiveImage}
                              /&gt;
                          &lt;/TouchableOpacity&gt;
                          &lt;Text style={styles.tabTextItems} onPress={() =&gt; this.OnTabItemHandler('Hindi')}&gt; Hindi &lt;/Text&gt;
                      &lt;/View&gt;
  
             &lt;View style = {styles.tabContainer}&gt;
             &lt;TouchableOpacity style={styles.tabIcons} onPress={() =&gt; this.OnTabItemHandler(‘English’)}&gt;
                              &lt;Image
                                  style={styles.tabItemsImages}
                                  source={this.state.flagImage === true ?                  
                                      englishActiveImage : 
                                      englishDeActiveImage}
                              /&gt;
                          &lt;/TouchableOpacity&gt;
                          &lt;Text style={styles.tabTextItems} onPress={() =&gt; this.OnTabItemHandler('English')}&gt; English &lt;/Text&gt;
                      &lt;/View&gt;
   &lt;/View&gt;
                {this.renderBottomContent(item)}
            &lt;/View&gt;
        );
     }
  </code></pre>
  
  <blockquote>
    <p>Can anyone suggest me, Where I am doing wrong?</p>
    
    <p>And in the method renderBottomContent(), these flagForTelugu,
    flagForTamil, flagForHindi, flagForEnglish showing as undefined while
    debugging time.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/6NCAu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6NCAu.png" alt="enter image description here"></a></p>