title: marginBottom and marginTop with percentage cutting children
body: <ul>
  <li>[x] I have reviewed the <a href="https://facebook.github.io/react-native" rel="nofollow noreferrer">documentation</a></li>
  <li>[x] I have searched <a href="https://github.com/facebook/react-native/issues" rel="nofollow noreferrer">existing issues</a></li>
  <li>[x] I am using the <a href="https://github.com/facebook/react-native/releases" rel="nofollow noreferrer">latest React Native version</a></li>
  <li>[x] Open <a href="https://github.com/facebook/react-native/issues/19164" rel="nofollow noreferrer">Issue</a></li>
  </ul>
  
  <p>[iOS] When you use percentage in marginBottom or marginTop it kind cuts the children inside. 
  Tested with Text, and Views component</p>
  
  <p>Devices:  [Simulator iPhone 5s, Simulator iPhone 7, Simulator iPhone X, Real device iPhone 6s]</p>
  
  <p>[Android] Sometimes happens to the views only.
  Devices: Samsung S5 mini</p>
  
  <p>For some reason with marginHorizontal:"20%"  or if we remove the "flex:1" from the main View the bug doesn't occur. 
  But sometimes even without "flex:1" property the bug still occurs. There should be a group of properties that activate this bug or not.</p>
  
  <p>On React-Native V0.53.3 this bug doesn't happen.</p>
  
  <h2>Environment</h2>
  
  <p>Environment:</p>
  
  <p>OS: macOS High Sierra 10.13.4</p>
  
  <p>Node: 9.8.0</p>
  
  <p>Yarn: 1.6.0</p>
  
  <p>npm: 6.0.0</p>
  
  <p>Watchman: 4.9.0</p>
  
  <p>Xcode: Xcode 9.3 Build version 9E145</p>
  
  <p>Android Studio: 3.1 AI-173.4720617</p>
  
  <p>Packages:
    react: 16.3.1</p>
  
  <p>react-native: 0.55.3</p>
  
  <h2>Steps to Reproduce</h2>
  
  <p><a href="https://snack.expo.io/rJtl8WR6G" rel="nofollow noreferrer">https://snack.expo.io/rJtl8WR6G</a></p>
  
  <pre><code>      &lt;View style={{ flex: 1, justifyContent:'center',alignItems:'center'}}&gt;
      &lt;View style={{ marginTop: "8%"}}&gt;
          &lt;Text style={{ fontSize: 40, fontWeight: '700' }}&gt;ASdsad&lt;/Text&gt; 
      &lt;/View&gt;
    &lt;/View&gt;
  </code></pre>
  
  <h2>Expected Behavior</h2>
  
  <p>To not cut the children!</p>
  
  <h2>Actual Behavior</h2>
  
  <p>Cutting the Children!</p>