title: React Native: Unable to center Text in View component
body: <p>I am unable to <strong>center</strong> a <code>Text</code> component in a <code>View</code> component in React Native both on <strong>android</strong> as well as <strong>ios</strong>.</p>
  
  <p>As you can see the <strong>+</strong> sign in not centred in the <strong>white circle</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/qTg4J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qTg4J.png" alt="enter image description here"></a></p>
  
  <p>This is my component:</p>
  
  <pre><code>
  &lt;TouchableOpacity
      style={styles.blueButton}
  &gt;
      &lt;View style={styles.addButton}&gt;
          &lt;Text style={styles.plus}&gt;+&lt;/Text&gt;
      &lt;/View&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>This is my stylesheet:</p>
  
  <pre><code>blueButton: {
      height: 40,
      width: 40,
      borderRadius: 3,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#3498DB',
  },
  addButton: {
      width: 15,
      height: 15,
      borderRadius: 30,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'white',
  },
  plus: {
      color: '#3498DB',
      fontSize: 20,
  },
  </code></pre>