title: react native container within container
body: <p>I would like to have 2 view take 50% of the space within a view.</p>
  <pre><code>export default function Home(){
      return (
          &lt;View style={globalStyles.homepagecontainer}&gt;
              &lt;View style={globalStyles.practicecontainer}&gt;
                  &lt;Text&gt;Practice&lt;/Text&gt;
              &lt;/View&gt;       
              &lt;View style={globalStyles.buycontainer}&gt;
                  &lt;Text&gt;Buy All&lt;/Text&gt;
              &lt;/View&gt;       
          &lt;/View&gt;
          
      )
  }
  </code></pre>
  <p>Here is the css -</p>
  <pre><code>export const globalStyles = StyleSheet.create({
      container: {
          flex: 1,
          padding: 50,
          backgroundColor: 'red'
      },
      homepagecontainer: {
          flex: 1,
          padding: 20,
          backgroundColor: 'green'
      },
      practicecontainer: {
          flex: 2,
          padding: 20,
          backgroundColor: 'green'
      },
      buycontainer: {
          flex: 2,
          padding: 20,
          backgroundColor: 'blue'
      },
  </code></pre>
  <p>Output:-</p>
  <p><a href="https://i.stack.imgur.com/BpELt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BpELt.png" alt="enter image description here" /></a></p>