title: React Native vertical text alignment when using explicit height
body: <p>I want to vertically center my text inside a view with an explicit height.</p>
  
  <p><a href="https://stackoverflow.com/questions/57001704/center-text-vertically-in-react-native">Center text vertically in react-native</a> did not fully answer my question because they don't use explicit height.</p>
  
  <p>When I use</p>
  
  <pre><code>  &lt;View style={styles.rightContainer}&gt;
  
              &lt;Text style={styles.label2}&gt;
                Centered
              &lt;/Text&gt;
  
          &lt;/View&gt;
  </code></pre>
  
  <pre><code>  rightContainer: {
      marginRight: 10,
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
     label2: {
      height: 40,
      backgroundColor: 'green',
      textAlignVertical: 'center',
    },
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/XUtMz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XUtMz.png" alt="result1"></a></p>
  
  <p>If I take away the explicit height,</p>
  
  <pre><code>  label2: {
      backgroundColor: 'green',
      textAlignVertical: 'center',
    },
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dLpkU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dLpkU.png" alt="it works"></a></p>
  
  <p>it works.</p>
  
  <p>I need to set the explicit height because I will convert this View to a tappable button.</p>
  
  <p>How do I make this work?
  What am I misunderstanding about react-native layout?</p>