React native toggle component without state - reactjs

Question

I just want to toggle SearchButton and SearchIcon , I use following code
searchBarButton() {
Actions.refresh();
this.setState({ showSearchBar: !this.state.showSearchBar });
}
render() {
if (this.state.showSearchBar) {
return (
<Header>
<View style={styles.searchHolder}>
<Item style={styles.searchBar}>
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
<Button style={styles.searchButton} onPress={this.searchBarButton}>
<Text>Search</Text>
</Button>
</View>
</Header>
);
}
return (
<Header>
<Button onPress={() => this.searchBarButton()} transparent>
<Icon name="search" style={styles.bigblue} />
</Button>
</Header>
);
}
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.
So How can I toggle this in more easier and efficient way without Re rendering whole page without using state

Answer 1

I think you have to hide one of them by using style prop.
Just render both first, toggle one of them to be hidden(by using state),
<Header>
<View style={[this.state.showSearchBar && styles.hidden]}>Button</View>
<View style=[{!this.state.showSearchBar && styles.hidden}]>Icon</View>
</Header>
do not remove them from virtual dom(I don't know what to call it in mobile) completely

Answer 2

I'd recommend you to grab some UI library. Take a look at this: https://react-bootstrap.github.io/components.html#utilities
You can just trow you your searchbar code in this
<Collapse in={this.state.showSearchBar}>
...
</Collapse>
And everything is taken care of very efficiently.
You just need to trow your button in an operator {!showSearhBar && <Component/>}
Also use react dev tools to check what re-renders