React-native-vector-icons: Icon centered ?

[martinezguillaume]

Yo ! I'm using this lib to render icon component and I find that the icons are not vertically centered. Maybe I'm using it wrong, but even if I render just the Icon component and put his background color to see better, the icon is clearly not centered.

import { Ionicon } from '@expo/vector-icons'

<Ionicon
  color='white'
  name='close'
  style={ { backgroundColor: 'red' } }
/>

I tried to put alignItems: 'center' and justifyContent: 'center' to style without success...

If I put paddingTop: 2 to style, the icon is centered

[ZackTRobertson]

Wrap the icon component in a parent view and then set that view's justifyContent style property to "center". (or alignItems if you make the flexDirection "row")

<View style={{justiftyContent:"center", alignItems:"center"}}>
   <Icon>
</View>

[leonchabbey]

Same issue with Ionicons, I fixed it by reducing its height by 1.
For example:

const { name, size, color, style } = props;

<Ionicons name={name} size={size} color={color} style={{ height: size - 1, ...style }} />

[basbase]

Thanks @leonchabbey , I got my icons centered by setting both width and height to size:
<Ionicons name={name} size={size} color={color} style={{ height: size, width: size, ...style }} />

[martinezguillaume]

@basbase solution is good. And if you want to center the icon inside (because sometimes icons are not centered), you can add textAlign: 'center' to style icon

[sinewave440hz]

Well, I actually got the most sensible behaviour in my case by wrapping my icon in a view and setting the height on the view. This is the _only_ way that allowed me to set arbitrary vertical spacing on a centered icon! (This was with an Entypo 'arrow-right' icon, if that is important...)

[mahmoudmahdi24]

@martinezguillaume your solution solved the issue for me 👍
<Icon size={100} style={{ textAlign: 'center' }} name={Platform.OS === "android" ? "md-checkmark-circle-outline" : "ios-checkmark-circle-outline"} color="green" />

[rafael2412]

You can put

and it going to align it self to the center

[shruthibadri]

I think the right way to do this is to use containerStyle rather than style.
containerStyle ={{ flex: 1, justifyContent: 'center', alignSelf:'center'}}

[kushan2]

{{textAlign:'center', justifyContent:'center',width:50,paddingRight:0}}

[philipbel]

@basbase solution is good. And if you want to center the icon inside (because sometimes icons are not centered), you can add textAlign: 'center' to style icon

This is the only solution that provided pixel perfect alignment for me. Some of the other snippets here are off by 1 pixel.

It would be nice if this could make it into the official documentation.

[basbase]

This is the only solution that provided pixel perfect alignment for me. Some of the other snippets here are off by 1 pixel.

I've found that Android sometimes cuts off the bottom 2-3 pixels of an icon. I fixed it by also setting the lineHeight to the same size. Full code would then become:

<Ionicons 
  name={name} 
  size={size} 
  color={color} 
  style={{ 
    height: size, 
    width: size, 
    lineHeight: size, 
    textAlign: 'center',
     ...style
  }} 
/>

[jainkuniya]

Setting paddingEnd: 0, to the icon style worked for me.

[tuanngocptn]

I solve this problem with this code

const {size} = props;

<View style={{height:size, width:size}}>
   <Icon size={size}/>
</View>

[staghouse]

I have a more complex issue. I need the Icon centered AND wrapped inside of a Text because the Text area has a larger hit zone for an onPress event and View does not have that event at all and frankly, the Button component is lacking any uniform meaning and value:

<Text style={styles.buttonText} onPress={onFavoritePress}>
    <View style={styles.iconView}>
        <Icon style={styles.icon} name="star" />
    </View>
</Text>

I've tried all the solutions above and using just the icon as a pressable area is not acceptable for me.

[martinezguillaume]

@staghouse take a look at the new Pressable component https://reactnative.dev/docs/pressable
The props hitSlop is what you are looking for

[staghouse]

@martinezguillaume Thank you ~ Perfect!

[madcoda]

Wrap the icon component in a parent view and then set that view's justifyContent style property to "center". (or alignItems if you make the flexDirection "row")

<View style={{justiftyContent:"center", alignItems:"center"}}>
   <Icon>
</View>

@ZackTRobertson bro you have a typo in your code "justiftyContent" should be "justifyContent", people copying your code will be banging their heads on the table wondering what went wrong for hours 😷