title: Margin in React-Native not working properly
body: <p>I was trying to make an app on React-Native </p>
  
  <p>To start, I did mere basic where I wanted to make a bottom Navigation </p>
  
  <p>This is what I did at start to test </p>
  
  <pre><code>import React, { Component } from 'react'
  import {
      StyleSheet,  
      View, 
      Text, 
      Image
  }  from 'react-native';
  
  class MainScreen extends Component {
  
      constructor () {
          super () 
          this.board = []
      }
      render () {
          return (
              &lt;View style={MainScreenBox}&gt;
                   &lt;View style={GridBox}&gt;
                      &lt;Text&gt; Testing..........&lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const styles = StyleSheet.create({ 
      MainScreenBox: {
          display: "flex",
          flexDirection: "column"
      },
      GridBox: {
          marginTop: "90%",
          marginLeft: 5,
          marginRight: 5
      }
  })
  
  const {
      GridBox, 
      MainScreenBox
  } = styles
  </code></pre>
  
  <p>Here, I did something as simple as <code>marginTop: "90%",</code> expecting the text would come at bottom but it still remains half way on the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/JOZYn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOZYn.png" alt="enter image description here"></a></p>
  
  <p><strong>Question:</strong> Any Idea why this could be happening?</p>