justifyContent: 'space-around' doesn't have margin in React Native
<p>I am new to React Native and working on an Open source project called <a href="https://github.com/JakeLin/ReactNativeWeather" rel="nofollow noreferrer">ReactNativeWeather</a></p>

<p>I have put four <code>ForecastView</code> in one row like</p>

<pre><code>&lt;View style={styles.forecastContainer}&gt;
  &lt;ForecastView style={styles.forecast}/&gt;
  &lt;ForecastView style={styles.forecast}/&gt;
  &lt;ForecastView style={styles.forecast}/&gt;
  &lt;ForecastView style={styles.forecast}/&gt;
&lt;/View&gt;
</code></pre>

<p>I try to align all ForecastView in one row with some margins. like</p>

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

<p>This screenshot is from another open source project <a href="https://github.com/JakeLin/SwiftWeather" rel="nofollow noreferrer">SwiftWeather</a></p>

<p>But in <a href="https://github.com/JakeLin/ReactNativeWeather" rel="nofollow noreferrer">ReactNativeWeather</a>, it looks like 
<a href="https://i.stack.imgur.com/faMrH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/faMrH.jpg" alt="enter image description here"></a></p>

<p>Here are the styles</p>

<pre><code>  forecastContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  forecast: {
    flex: 1
  }
</code></pre>

<p>I think <code>justifyContent: 'space-around'</code> should do the job, but don't why it doesn't. Could you please give me some hint? </p>

<p>The code is on <a href="https://github.com/JakeLin/ReactNativeWeather" rel="nofollow noreferrer">https://github.com/JakeLin/ReactNativeWeather</a> can check out commit <code>0ccf4abb879656ab785814f01581121b60fc3b3a</code> </p>

<p>Thanks</p>