Nativebase: (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.
I've also submitted this here: https://github.com/oblador/react-native-vector-icons/issues/556

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.

[akhil-geekyants]

@elnygren you can bring the icon to center. To do this, you need to eject the theme as described in the NativeBase docs

After ejecting the theme, go to file native-base-theme/components/ListItem.js add

textAlign:'center'

to "NativeBase.Icon":{} object inside "NativeBase.Left":{} (if you are using <Left>) inside listItemTheme:{} object.

[elnygren]

hi @akhil-geekyants,

I'm using https://docs.nativebase.io/Components.html#card-list-headref

Code is similar to:

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

      <View style={{flex: 1}}>
        <Text>{name}</Text>
      </View>

      <View style={{width: 20}}>
        <Icon name="arrow-forward" />
      </View>
    </CardItem>
    ...
  </Card>
</View>

EDIT:

so, apparently <Icon active name={icon} size={20} style={{textAlign: 'center'}}/> solves my problem.

[svnscha]

@elnygren you can bring the icon to center. To do this, you need to eject the theme as described in the NativeBase docs

After ejecting the theme, go to file native-base-theme/components/ListItem.js add

textAlign:'center'

to "NativeBase.Icon":{} object inside "NativeBase.Left":{} (if you are using <Left>) inside listItemTheme:{} object.

Actually this helped a lot. Thanks.