Reaccione el icono y el texto de alineación de cuadro flexible nativo

en unreact native aplicación, yo uso'react-native-vector-icons/MaterialIcons'.

Trato de un< botón con algo de texto. Desafortunadamente, el< el icono no está alineado al centro con el texto. El texto está en la misma línea que el< pero alineado en la parte inferior en lugar de alineado en el medio.

No tuveflex: 1. El código ha sido actualizado.

Mi código

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

Mis estilos

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

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