function onCancelButtonPress not being called

[marwan2]

First I'm using the search to call an API, not client side search. So the behaviour when I click X button to clear search is to go to function onCancelButtonPress

this is to call again the API after setState of searchKeyword to empty. This behviour not working.

SearchBar = () => {
    return (
      <SearchBar
        text={this.state.search}
        ref={bar => {
          this.searchBar = bar;
        }}
        placeholder="Search"
        barStyle="black"
        showsCancelButton={true}
        showsCancelButtonWhileEditing={false}
        onSearchButtonPress={this.onSearch}
        onCancelButtonPress={this.onCancelButtonPress}
      />
    );
  };

and the cancel handler:

onCancelButtonPress = (e) => {
    console.log(e.nativeEvent.text);
    this.setState(
      {
        search: '',
        page: 1,
        requests: [],
      },
      () => {
        this._getRequests();
      },
    );
  };

[iRoachie]

You're listening for an event that will never happen. onCancelButtonPress only fires when tapping the Cancel button, there's no special event for tapping X, just use onChange

[marwan2]

Why don't you add event for pressing X button ?

[iRoachie]

UISearchBar doesn't have an event for this natively. The only way is to check if the string is empty in the onChange

[marwan2]

OK I'll try it, thanks