title: How to horizontally center a component while there are other components in the same row?
body: <p>I'm trying to mimic a stack navigation header like below: 
  <a href="https://i.stack.imgur.com/OxRiI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OxRiI.png" alt="enter image description here"></a></p>
  
  <p>where the title is perfectly centered while there's a return button in the same row on the left.</p>
  
  <p>I have tried to use <code>justifyContent: 'space-between'</code> with an empty <code>View</code> on the right side but the title will be off center to the right a bit. How should I approach this? </p>
  
  <p>my <code>renderHeader</code> function: </p>
  
  <pre><code>  _renderHeader = () =&gt; {
      return (
        &lt;View style={styles.headerAbsolute}&gt;
          &lt;View style={styles.bar}&gt;
            &lt;ButtonBack
              text={"Resumes"}
              onPress={() =&gt; this._onNavBackHandler()}
            /&gt;
            {true ? (
              &lt;Text style={styles.headingFixed}&gt;{this.state.title}&lt;/Text&gt;
            ) : ( null )}
            &lt;View/&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  </code></pre>
  
  <p>These are the styles: </p>
  
  <pre><code>  bar: {
      height: 55,
      flexDirection: "row",
      alignItems: 'flex-end',
      justifyContent: 'space-between',
      paddingHorizontal: 10,
      paddingBottom: 5,
    },
    headingFixed: {
      fontSize: TITLE_TERTIARY,
      fontWeight: 'bold',
      color: COLOR_DARK_SECONDARY,
      backgroundColor: 'transparent', 
    },
  </code></pre>