When I click on the cross icon first time, it lowers the keyboard and on the second tap, it clears the text in the search bar. I wanted to clear the text on the first tap I have tried other solutions as well but nothing worked. How can i clear the text on the first click?
return (<View style={styles.FlatList_header}><View style={styles.header_style}><Input autoFocus={true} style={styles.textInputStyle} onChangeText={text => this.search(text)} value={this.state.text} /><Icon name="close" style={styles.crossIcon} onPress={() => { this.search(''); }} /></View></View> ); }; render() { const {data, onPress} = this.props; return (<><SafeAreaView style={{flex: 1, backgroundColor: customColor.defaultGreen}}><View style={styles.MainContainer}><FlatList data={data} renderItem={({item}) => (<View style={{ flex: 1, borderWidth: 0.5, borderColor: customColor.textLightGrey, }}><Text style={styles.FlatList_Item} onPress={() => onPress(item)}> {item?.taskName}</Text></View> )} enableEmptySections={true} ListHeaderComponent={this.Render_FlatList_Sticky_header} keyExtractor={item => item.id} /></View></SafeAreaView></> ); }}