title: Can't center title in react navigation stack - React-Native?
body: <p>I can't center the title in react-navigation V4+ its work fine before with v3, when use RN-stack I can't center the title for some reason I don't know.</p>
  
  <p>it just appears on the right, </p>
  
  <p>I try these in <code>headerTitleStyle</code> and <code>headerStyle</code></p>
  
  <pre><code>justifyContent, alignItems and alignSelf but not works :/
  </code></pre>
  
  <p>If you have any idea about it tell me?</p>
  
  <pre><code>"react-navigation": "^4.0.10",
  "react-navigation-drawer": "^2.3.3",
  "react-navigation-stack": "^2.0.16",
  "react-native-screens": "^2.0.0-alpha.29",
  </code></pre>
  
  <p>here's Code</p>
  
  <pre><code>static navigationOptions = ({navigation}) =&gt; {
      const showModal = navigation.getParam('showModal', () =&gt; {});
      return {
        title: navigation.getParam('title'),
        headerTitleStyle: {
          fontFamily: 'Cairo-Regular',
          fontSize: Platform.OS == 'ios' ? 16 : 18,
          color: '#fff',
          flex: 1,
          textAlign: 'center',
        },
        headerStyle: {
          backgroundColor: navigation.getParam('color'),
        },
        headerRight: (
          &lt;Grid&gt;
            &lt;Row&gt;
              &lt;Body&gt;
                &lt;Button
                  transparent
                  icon
                  onPress={() =&gt; {
                    navigation.openDrawer();
                  }}&gt;
                  &lt;Icon
                    name="ios-menu"
                    type="Ionicons"
                    style={{fontSize: 25, color: '#fff'}}
                  /&gt;
                &lt;/Button&gt;
              &lt;/Body&gt;
              {!navigation.getParam('title').includes('details') &amp;&amp; (
                &lt;Body&gt;
                  &lt;Button transparent icon onPress={() =&gt; showModal()}&gt;
                    &lt;Icon
                      name="more"
                      type="Ionicons"
                      style={{fontSize: 25, color: '#fff'}}
                    /&gt;
                  &lt;/Button&gt;
                &lt;/Body&gt;
              )}
            &lt;/Row&gt;
          &lt;/Grid&gt;
        ),
        headerLeft: (
          &lt;Grid&gt;
            &lt;Row&gt;
              &lt;Body&gt;
                &lt;Button
                  transparent
                  icon
                  onPress={() =&gt; {
                    navigation.pop();
                  }}&gt;
                  &lt;Icon
                    name="arrow-round-back"
                    type="Ionicons"
                    style={{
                      fontSize: Platform.OS == 'ios' ? 30 : 25,
                      color: '#fff',
                    }}
                  /&gt;
                &lt;/Button&gt;
              &lt;/Body&gt;
              &lt;Body&gt;
                &lt;Button
                  transparent
                  icon
                  onPress={() =&gt; {
                    navigation.navigate('search');
                  }}&gt;
                  &lt;Icon
                    name="search"
                    type="Ionicons"
                    style={{
                      fontSize: Platform.OS == 'ios' ? 30 : 25,
                      color: '#fff',
                    }}
                  /&gt;
                &lt;/Button&gt;
              &lt;/Body&gt;
            &lt;/Row&gt;
          &lt;/Grid&gt;
        ),
      };
    };
  </code></pre>