title: React native toggle component without state
body: <p>I just want to toggle SearchButton and SearchIcon , I use following code</p>
  
  <pre><code>  searchBarButton() {
      Actions.refresh();
      this.setState({ showSearchBar: !this.state.showSearchBar });
    }
  
   render() {
      if (this.state.showSearchBar) {
        return (
          &lt;Header&gt;
            &lt;View style={styles.searchHolder}&gt;
              &lt;Item style={styles.searchBar}&gt;
                &lt;Icon name="ios-search" /&gt;
                &lt;Input placeholder="Search" /&gt;
              &lt;/Item&gt;
              &lt;Button style={styles.searchButton} onPress={this.searchBarButton}&gt;
                &lt;Text&gt;Search&lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/View&gt;
          &lt;/Header&gt;
        );
      }
      return (
        &lt;Header&gt;
              &lt;Button onPress={() =&gt; this.searchBarButton()} transparent&gt;
                &lt;Icon name="search" style={styles.bigblue} /&gt;
              &lt;/Button&gt;
        &lt;/Header&gt;
      );
    }
  </code></pre>
  
  <p>So basically It is very fast initially , But when my scene contains lots of items in flat List , There is like 1 to 2 seconds delay between toggle.I guess its due to re-rendering all items in page.</p>
  
  <p>So How can I toggle this in more easier and efficient way without Re rendering whole page without using state</p>