React Native flex-box align icon and text

Question

In a react native app, I use 'react-native-vector-icons/MaterialIcons'.

I try to a < button with some text. Unfortunately, the < icon isn't aligned center with the text. The text is on same line as the < but bottom-aligned instead of middle-aligned.

I didn't have flex: 1. The code has been updated.

My code

    <TouchableOpacity style={styles.navBarLeftButton}>
       <Icon name="chevron-left" />
       <Text style={styles.buttonText}>My Button</Text>
    </TouchableOpacity>

My styles

    navBarLeftButton: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start'
      width: 100,
      paddingLeft: 8
    }

    buttonText: {
      color: 'rgba(255,255,255,0.70)',
      fontSize: 14
    }

Answer 1

The answer is to have flex: 1 and not height. I also use flexDirection: 'row' because I have two elements.

navBarLeftButton: {
  paddingLeft: 8,
  width: 100,
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'flex-start'
}

Answer 2

You can also use <Icon> inside the Text. In that case it will follow Text's style.

<TouchableOpacity style={styles.navBarLeftButton}>
   <Text style={styles.buttonText}>
        <Icon name="chevron-left" />
        My Button
   </Text>
</TouchableOpacity>