Closed
Description
So I have component like below
return (
<View>
<View
style={!this.state.showSearchBar && styles.hidden}
>
<Header>
<View>
<Item >
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
<Button
onPress={this.searchBarButton}
>
<Text>Search</Text>
</Button>
</View>
</Header>
</View>
<View
style={this.state.showSearchBar && styles.hidden}
>
<Header ref={"button"}>
<Button onPress={() => this.searchBarButton()} transparent>
<Icon name="search" style={styles.bigblue} />
</Button>
</Header>
</View>
<FlatList style={{zIndex: 0,minHeight:'100%'}}
ref={ref => {
this.listRef = ref;
}}
extraData={this.state}
data={this.state.data}
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
renderItem={this._renderItem}
onEndReached={this.onEnd}
onEndReachedThreshold={0.5}
ListHeaderComponent={this.headerMessage}
ListFooterComponent={this.footerMessage}
ListEmptyComponent={this.empty}
/>
</View>
);
}
When I click on button I basically set state so I am hiding and showing search bar with search icon
searchBarButton() {
this.setState({ showSearchBar: !this.state.showSearchBar });
}
and style
hidden: {
height: 0,
width: 0,
opacity: 0
}
So basically this works very smooth and fast when my scene is just with header , But when I add flatlist , there is 1 second delay between toggle.But if I remove flat list its again fast.