title: How to divide screen to two parts in react-native?
body: <p>I'm new in react-native, and I'm trying to divide screen to tow part, the first part is the header or the navigation bar wish have a specific height about 40px the second part is the body or the content of the app wish his height must be the available height on the phone screen, I tried to use flex box method but it's not working!
  That's my code:</p>
  
  <pre><code>&lt;View style={styles.mainContainer}&gt;
      &lt;View style={styles.navBar}&gt;
      &lt;/View&gt;
      &lt;View style={styles.body}&gt;
      &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>mainContainer: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  navBar: {
    display: 'flex',
    flexDirection: 'row-reverse',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#f1f1f1',
    height: 30,
  },
  body: {
    flex: 3,
    display: 'flex',
  },
  </code></pre>