React-native-vector-icons: (react-native) Ionicon icons are aligned left within their <Icon>'s internal <Text> component.

[elnygren]

FYI: I am using NativeBase's Icon component that uses Ionicons.

Pictures are worth a thousand words:

and the other icon highlighted too:

This makes working with the icons a bit tedious as it's really hard to align different kinds of icons.

Is this intended behavior or is there something wrong with my setup? Is there a way to make the icons align center instead of left?

Note: this is not an issue with my own code, I have:

<View style={{width: 40, alignItems: 'center', justifyContent: 'center'}}>
  <Icon active name={icon} size={20} />   
</View>

and the highlighted part in the above pictures is not the View, it's inside the Icon component.

[elnygren]

Closing, it was a NativeBase issue.

[lufinkey]

How did you fix this?

[Nikaoto]

For those who end up here from a google search just like I did:

Solved it using textalign: "center" on the icon component's style.

This is how my code looks:

<Icon style={{textAlign: "center"}} name={icon} size={20} />