title: How can I change the header icon dynamically with React Navigation?
body: <p>I'm working on a list with React Native, but when I perform a search by pressing the search icon set in the navigationOptions property I want the icon to change dynamically to another so the user can cancel the search. How can I change the icon dynamically by pressing the button?</p>
  
  <pre><code>static navigationOptions = ({navigation}) =&gt; ({
     headerTitle: 'POSTS',
     headerRight: (
       &lt;Icon
        type="Ionicons"
        name="search"
        style={{color:"#FFFFFF", marginRight: 10}}
        size={20}
        onPress={navigation.getParam('openSearchModal')}
      /&gt;
    )
  });
  
  openSearchModal() {
     //my code is here
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/5pYcx.jpg" rel="nofollow noreferrer">Application header</a></p>