React Native alignSelf center and stretch to maxWidth?
<p>I have the following </p>

<pre><code>&lt;View style={{maxWidth: 700}}&gt;
  &lt;View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}&gt;
    &lt;Text&gt;Left Item&lt;/Text&gt;
    &lt;Text&gt;Right Item&lt;/Text&gt;
  &lt;/View&gt;
&lt;/View&gt;
</code></pre>

<p>which is working as I'd expect on a large device (vertical black lines are edges of emulator screen).</p>

<p><a href="https://i.stack.imgur.com/uyZr1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uyZr1.png" alt="enter image description here"></a></p>

<p>All I would like to do is center this on the screen.</p>

<p>When I attempt to do so by adding alignSelf: 'center' to the parent</p>

<pre><code>&lt;View style={{maxWidth: 700, alignSelf: 'center'}}&gt;
  &lt;View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}&gt;
    &lt;Text&gt;Left Item&lt;/Text&gt;
    &lt;Text&gt;Right Item&lt;/Text&gt;
  &lt;/View&gt;
&lt;/View&gt;
</code></pre>

<p>the width is lost.  </p>

<p><a href="https://i.stack.imgur.com/w8KTg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w8KTg.png" alt="enter image description here"></a></p>

<p>I assume this is because by default alignSelf it is 'stretch'.  Is there a way to both stretch the content to use maxWidth and center it on the screen? </p>