title: Align icon to left and text to center in react native
body: <p>I am trying to use flexbox to align my icon to the left of a button view and the text to the center. Currently they are both aligned to the center but I am not sure how to get my icon on the very left edge of the button while keeping the text centered in the view</p>
  
  <p>Right now my button looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Slm7S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Slm7S.png" alt="enter image description here"></a></p>
  
  <p>I am using <a href="https://github.com/APSL/react-native-button" rel="nofollow noreferrer">https://github.com/APSL/react-native-button</a> for buttons and 
  <a href="https://github.com/oblador/react-native-vector-icons" rel="nofollow noreferrer">https://github.com/oblador/react-native-vector-icons</a> for icons</p>
  
  <p>Below is some of my code:</p>
  
  <pre><code>    &lt;Button style={signupStyles.facebookButton}&gt;
        &lt;View style={signupStyles.nestedButtonView}&gt;
          &lt;Icon
            name="facebook"
            size={30}
            color={'white'}
  
          /&gt;
          &lt;Text style={signupStyles.buttonText}&gt;Continue with Facebook&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/Button&gt;
  
      var signupStyles = StyleSheet.create({
      buttonText: {
        color: 'white',
        fontWeight: 'bold',
        textAlign: 'center',
      },
  
      facebookButton: {
        backgroundColor: styleConstants.facebookColor,
        borderColor: styleConstants.facebookColor,
        borderWidth: 2,
        borderRadius: 22,
      },
  
      nestedButtonView: {
       flexDirection: 'row',
       alignItems: 'center',
      },
  
    });
  </code></pre>