title: Custom function in headerRight of StackNavigator in react native
body: <p>I have the following component that I'm trying to have some left and right header buttons in the header area. However, I am having trouble getting my function <code>logout</code> to call. Does anyone know what I might be doing wrong and how to fix it?</p>
  
  <p><em>I'm using react-navigation</em></p>
  
  <pre><code>export default class HomeScreen extends Component&lt;Props&gt; {
  
    constructor(props) {
      super(props);
      this.state = { refreshing: false }
    }
  
    logout = async () =&gt; {
      alert("HI");
      AsyncStorage.setItem('current_appid', '');
      this.props.navigation.navigate('Identification');
    }
  
    static navigationOptions = {
      headerStyle: { backgroundColor:"#fff", height:60},
      headerTitleStyle: { color:"#3F61E7", fontSize: 24},
      headerBackground: "#fff",
      title: 'My Title',
      headerRight: &lt;Text style={{marginRight:15, color:"#3F61E7", fontWeight:"400", fontSize:16}}&gt;Settings&lt;/Text&gt;,
      headerLeft: &lt;Text onPress={async () =&gt; this.logout} style={{marginLeft:15, color:"#3F61E7", fontWeight:"400", fontSize:16}}&gt;Log Out&lt;/Text&gt;
    };
  
  }
  </code></pre>