title: how to vertically align to center navigation options on react native?
body: <p>this is my code: </p>
  
  <pre><code>Welcome.navigationOptions = {
    headerTitle: &lt;Text style={theme.fonts.header}&gt;Welcome&lt;/Text&gt;,
    headerTitleStyle: {
      alignSelf: "center",
      textAlignVertical: "center"
    },
    headerRight: (
      &lt;TouchableOpacity style={{ alignSelf: "center" }}&gt;
        &lt;Block flex={false}&gt;
          &lt;Image
            resizeMode="contain"
            source={require("../../assets/images/Icon/Menu.png")}
            style={{ width: 20, height: 24 }}
          /&gt;
          &lt;Badge
            size={13}
            color={theme.colors.accent}
            style={{ position: "absolute", top: -4, right: -4 }}
          /&gt;
        &lt;/Block&gt;
      &lt;/TouchableOpacity&gt;
    )
  };
  </code></pre>
  
  <p>You see i have used textVerticalAlign &amp; alignSelf to center for headerTitleStyle and used alignSelf 
  center for headerRight, still no effect and this is the result of the code which you it's like aligned on bottom:</p>
  
  <p><a href="https://i.stack.imgur.com/QRWJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QRWJL.png" alt="enter image description here"></a></p>
  
  <p>I also tried this still not working:</p>
  
  <pre><code>headerStyle: { 
    alignItems: 'center'
  }
  </code></pre>