title: Make child container occupy height of parent container [React Native]
body: <p>I made a <code>&lt;View&gt;</code> object in react native containing, in a row, multiple <code>&lt;View&gt;</code> objects that contain text objects.</p>
  
  <p>When the text is more than 1 line, the text containers do not expand to fill the parent component and it looks funny.</p>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/0SZBC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0SZBC.png" alt="enter image description here"></a></p>
  
  <p>This is the style code:</p>
  
  <pre><code>  bigContainer: {
      flex: 1,
      justifyContent: 'center',
      // flexDirection: 'row'
    },
  
    textContainer: {
      flex: 1,
      paddingLeft: 0,
      paddingRight: 0,
      borderRightWidth: 1,
      borderRadius: 0,
      borderColor: 'rbga(0, 0, 0, 0.1)',
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: 7,
      paddingBottom: 7,
      overflow: 'hidden'
    },
  
    text: {
      fontSize: 18,
      textAlign: 'center'
    },
  </code></pre>
  
  <p>Please help, I do not understand why this happens since I have <code>flex: 1</code> and my research has not helped me. Thanks !!</p>
  
  <p>UPDATE: SOLVED: I forgot that <code>&lt;TouchableOpacity&gt;</code>, the container that encloses the text container, also behaves like a flexbox</p>