title: How to center react native headerTitle *component* (not string)
body: <p>For the life of me, I can't center the <code>headerTitle</code> component. Ideas?</p>
  
  <pre><code>class GroupSelectionScreen extends React.Component{
      static navigationOptions = ({navigation}) =&gt; {
  
          return {
              headerLeft: &lt;View&gt;
                  &lt;Image source={logoImg} style={{width:72, height:33, marginLeft:5}}/&gt;
              &lt;/View&gt;,
              headerStyle: {
                  backgroundColor: theme.colors.darkBlue,
                  height: 75,
              },
              headerTitle: &lt;View style={{
                  alignItems: "center",
                  flexDirection: 'row',
  
              }}&gt;
                  &lt;View style={{backgroundColor: statusColor, width: 15, height: 15, borderRadius: 8}}&gt;&lt;/View&gt;
                  &lt;Text style={{color: 'white', fontSize: 25}}&gt;{username}&lt;/Text&gt;
              &lt;/View&gt;,
              headerRight: &lt;SetStatusButton onPress={navigation.getParam('toggleSetStatus')}/&gt;,
          };
      };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yxqZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yxqZw.png" alt="enter image description here"></a></p>