title: Ant-Design React-Native Search Bar Cancel Button cannot hide itself when pressed
body: <p>I'm trying to make the Cancel button on the right of the search bar hide when it gets press. I tried to use to showCancelButton prop but it is not working. <a href="https://rn.mobile.ant.design/components/search-bar/" rel="nofollow noreferrer">Ant-Design React-Native Docs Link</a>
  <a href="https://i.stack.imgur.com/63R4K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/63R4K.png" alt="cancel button does not work"></a></p>
  
  <p>This is the link to the issue reproduction repo <a href="https://github.com/kvnlee777/antd-rn-issue" rel="nofollow noreferrer">https://github.com/kvnlee777/antd-rn-issue</a></p>
  
  <p>react-native version 0.61.4</p>
  
  <p>ios simulator version 12.4</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {useState} from 'react';
  import { Alert, View} from 'react-native';
  import { SearchBar } from '@ant-design/react-native';
  
  
  const SearchBarDemo = () =&gt; {
    const [value, setValue] = useState('');    
    const [showCancel, setShowCancel] = useState(true);
  
    const onChange = (currentValue) =&gt; {
      setValue(currentValue);
    }
  
    const clear = () =&gt; {
      setValue('');        
      setShowCancel(false);
    }
  
    return (
      &lt;View style={{ marginTop: 30}}&gt;           
        &lt;SearchBar   
          value={value}
          placeholder="Search products, brands"
          onSubmit={value =&gt; Alert.alert(value)}              
          onCancel={clear}
          onChange={onChange}                  
          cancelText='Cancel'
          showCancelButton={showCancel}        
        /&gt;
      &lt;/View&gt;
    );
  
  
  };
  export default SearchBarDemo;</code></pre>
  </div>
  </div>
  </p>