Responsive stateless native switching component

Question

I just want to switch SearchButton and SearchIcon, I use the 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, at first it is very fast, but when there are a lot of elements in my flat list in my scene, there is a time from 1 to 2 seconds between switching. I assume this is due to re-rendering all the elements on the page.

So, how can I switch this in a simpler and more efficient way without re-rendering the entire page without using state

Answer 1

I think you need to hide one of them using styleprop.

Just do both first, switch one of them to hidden (using state),

<Header>
  <View style={[this.state.showSearchBar && styles.hidden]}>Button</View>
  <View style=[{!this.state.showSearchBar && styles.hidden}]>Icon</View>
</Header>

dom ( , )

Answer 2

. : https://react-bootstrap.imtqy.com/components.html#utilities

    <Collapse in={this.state.showSearchBar}>
      ...
    </Collapse>

.

{!showSearhBar && <Component/>}

, ,