title: Align the Header in center
body: <p><strong>react-navigation: 1.0.0-beta.11</strong> </p>
  
  <p><strong>react: 16.0.0-alpha.12</strong></p>
  
  <p><strong>react-native: 0.47.1</strong></p>
  
  <p>I'm following the <a href="https://reactnavigation.org/docs/intro/" rel="nofollow noreferrer">ReactNavigation</a> tutorial to render the <code>Header</code> from a passed prop to the screen.</p>
  
  <pre><code>class ChatScreen extends React.Component {
    static navigationOptions = ({ navigation }) =&gt; ({
      title: `Chat with ${navigation.state.params.user}`,   // &lt;- Talking bout this
    });
    render() {
      const { params } = this.props.navigation.state;
      return (
        &lt;View&gt;
          &lt;Text&gt;Chat with {params.user}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>I want the <code>title</code> in  <code>title: Chat with ${navigation.state.params.user}</code> to appear in the center. How do I style it? I also want change it's color.</p>
  
  <p>I tried this <a href="https://github.com/react-community/react-navigation/issues/253#issuecomment-279841162" rel="nofollow noreferrer">suggestion</a> but did not work.</p>
  
  <p>Many thanks.</p>
  
  <p>After updating the code, it's aligning to the center but it's not quite the center. It's more to the right. I think it's cause of the arrow to the left, how can I fix it?</p>
  
  <p><a href="https://i.stack.imgur.com/pEuGC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pEuGC.jpg" alt="enter image description here"></a></p>
  
  <p>Updated Code: </p>
  
  <pre><code>static navigationOptions = ({ navigation }) =&gt; ({
      title: `${navigation.state.params.name.item.name}`,
      headerTitleStyle: {
      color: '#000',
      textAlign: 'center',
      alignSelf: 'center'
      }
  });
  </code></pre>