title: {flex:1} is not working properly in React Native
body: <p>If I understand correctly -- making the outermost container as "flex: 1" should let the component span the whole screen.</p>
  
  <p>However, the code I wrote is not working properly.</p>
  
  <pre><code>import React from 'react';
  import { View, Text } from 'react-native';
  
  export default function test() {
      return (
          &lt;View style={{ flex: 1, borderColor: 'red', borderWidth: 5 }}&gt;
              &lt;Text&gt;test&lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/56aLF.png" rel="nofollow noreferrer">The simulator screenshot is here</a></p>
  
  <p>Can anyone please point out where I did wrong?</p>
  
  <p>Thank a lot!</p>