title: How to set margin in react native
body: <p>I am trying to set the margins on a box in react native, but the behavior is very strange. If I set marginLeft: 10, the margin is 10 on the left. But if I also set marginRight: 10, then the margin on the left is 20 and on the right is 20. Here is my code:</p>
  
  <pre><code>// ResultList.js
  const box = {
    backgroundColor: 'green',
    marginLeft: 10,
    marginRight: 10
  }
  return (
    &lt;View style={box}&gt;
      &lt;ResultItem /&gt;
      &lt;ResultItem /&gt;
      &lt;ResultItem /&gt;
      &lt;ResultItem /&gt;
      &lt;ResultItem /&gt;
    &lt;/View&gt;
  ) 
  
  // ResultItem.js
  return (
    &lt;View style={{margin: 0}}&gt;
      &lt;Text style={{margin: 0}}&gt;
        This is text Here. This is more text testing. 
        This is text Here. This is more text testing
      &lt;/Text&gt;
    &lt;/View&gt;
  )
  </code></pre>
  
  <p>This code produces the following image. Where I have drawn the black bars is where the green box should align to. It is worth noting that if I remove <code>marginRight: 10</code>, then the left margin behaves correctly. Only when I add in the marginRight is it wrong.</p>
  
  <p><a href="https://i.stack.imgur.com/S0uk2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S0uk2.jpg" alt="enter image description here"></a></p>
  
  <p>Code for Blue background view:</p>
  
  <pre><code>App.js
  return (
    &lt;View style={styles.container}&gt; 
      &lt;ResultList /&gt;
    &lt;/View&gt;
  );
  
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'blue'
  }
  </code></pre>