title: React navigation header right button
body: <p>I want add button in react-native header , the button is to mas and unmask password in the page, the problem on click when i change the state to change secureTextEntry value, the icon wont change will keep as the initial value;
  the function is working fine but the icon cant change</p>
  
  <pre><code>this.state.secureTextEntry ? "eye" : "eye-slash"
  </code></pre>
  
  <p>this is the main code</p>
  
  <pre><code> class ChangePasswordScreen extends Component {
   constructor(props) {
       super(props);
       this.state = {
           newPassword: null,
           currentPassword: null,
           confirmPassword: null,
           errors: [],
           secureTextEntry: true
  
       };
  
       this.maskPassword = this.maskPassword.bind(this)
   }
   componentDidMount() {
       this.props.navigation.setParams({
           headerRight: ( &lt; TouchableOpacity onPress = {
                   () =&gt; {
                       this.maskPassword();
                   }
               } &gt; &lt; Icon style = {
                   styles.eyeIcon
               }
               name = {
                   this.state.secureTextEntry ? "eye" : "eye-slash"
               }
               size = {
                   20
               }
               color = {
                   Colors.WHITE
               }
               /&gt;&lt;/TouchableOpacity &gt; )
       })
   }
   static navigationOptions = ({
       navigation
   }) =&gt; {
       return {
           // headerTitle: &lt;LogoTitle /&gt;,
           headerRight: navigation.state.params &amp;&amp; navigation.state.params.headerRight,
       };
   };
   maskPassword = () =&gt; {
       this.setState({
           secureTextEntry: !this.state.secureTextEntry
       })
  
   }
  </code></pre>
  
  <p>}</p>