React-native-vector-icons: Vertical Alignment (Ionicons)

[alexcurtis]

The vertical alignment of Ionicons seems to be off in the latest release.

Seems to happen on most icons. Not just one shown.

[danvass]

@alexcurtis Did you find any solution to this?

[marcus-chr]

@alexcurtis @DVassilev I have the same issue, did you find any solution? The issue only appears for Ionicons.

This is an "ios-square" icon with a yellow background on the Icon-component.

[jordanmkoncz]

Anyone find a solution for this? I'm having the same issue with Ionicons. As a workaround I've been manually applying paddingTop rules to the icons to get them to be vertically aligned, but the amount of paddingTop required varies for different icons and sizes so this is very tedious.

This seems to be a big issue in iOS, but strangely the alignment is better in Android. It's still a bit off-center in Android, but it's less off-center in Android than in iOS.

[oblador]

Have you guys experimented with lineHeight?

[pvinis]

lineHeight doesnt help. we should reopen this.

[bduyng]

+1

[luco]

+1 on this.

[pvinis]

@oblador can we reopen this? @alexcurtis looks gone.

[sampsasaarela]

I think the issue still exists in iOS and here is my workaround. I modified IonicIcon.ttf file; instructions are here: https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

I just changed lineGap value to 0 in the font file, and now alignment seems to be correct on both platforms in my app.

Edit: After checking again I also changed ascender from 448to 471 which is ascender+(lineGap/2), and now it seems to be perfect in my app.

Before:

After:

[jordanmkoncz]

@sampsasaarela just to clarify, you modified the Ionicons.ttf file located in /node_modules/react-native-vector-icons/Fonts/Ionicons.ttf? Meaning that any other developers working on the project would have to make the same modification to the file on their local machine, and also that you'd have to make this modification again every time you remove your node_modules folder and reinstall the project's dependencies?

Also, when following those instructions, do you simply end up with a modified Ionicons.ttf file, meaning that you can just copy this modified file somewhere and place it in the /node_modules/react-native-vector-icons/Fonts/ directory whenever you need to (e.g. the scenarios above)? Or do those instructions also result in other changes, e.g. to the Xcode project's configuration? If it's the former, could you upload the modified Ionicons.ttf file somewhere for people to be able to use?

[sampsasaarela]

@jordanmkoncz yes that is the case.

Currently, I have postinstall script in my project which will fix the alignment everytime developer run npm install. Of course, this is not the optimal solution but works for us for now.

Here is the script:
FONT_PATH=./node_modules/react-native-vector-icons/Fonts FONT_FILE=$(FONT_PATH)/Ionicons.ttf XML_FILE=$(FONT_PATH)/Ionicons.hhea.xml ftxdumperfuser -t hhea -A d $(FONT_FILE) && sed -i '' 's/lineGap="46"/lineGap="0"/' $(XML_FILE) && sed -i '' 's/ascender="448"/ascender="471"/' $(XML_FILE) && ftxdumperfuser -t hhea -A f $(FONT_FILE)

[gregblass]

Any reason why this is closed? I'm still experiencing this - on Android too.

[jordanmkoncz]

Thanks @sampsasaarela, that's very helpful!

@gregblass For some reason @alexcurtis closed the issue and seems to be no longer looking at it, so I created a new issue at https://github.com/oblador/react-native-vector-icons/issues/566 which will hopefully be noticed by one of the maintainers.

[pie6k]

Could it be reopened by some repository contributor? @oblador