Incorrect vertical alignment for Ionicons on iOS

[jordanmkoncz]

On iOS, all icons from the Ionicons set have incorrect vertical alignment. The screenshots below show the difference between the vertical alignment of an Ionicons icon versus a MaterialIcons icon in the iOS simulator.

Ionicons:

MaterialIcons:

The icons in the screenshots above have the following props:

<Ionicons
  name={name}
  size={32}
  color="#FFFFFF"
  style={{ backgroundColor: 'red' }}
/>

As you can see in the screenshots, the Ionicons icon is not vertically centred, it is positioned too high. The MaterialIcons icon is vertically centred, with the same amount of space above and below the icon. Note that on Android, the Ionicons icons are actually correctly vertically centred, this issue appears to only affect iOS.

[jordanmkoncz]

#301 is for the same problem, but for some reason the person who created the issue immediately closed it, even though this issue still exists (and seems to have existed since 24/09/2016 at the least).

[mjmasn]

@jordanmkoncz if it's still relevant I had this problem with a custom icon font but setting lineHeight to the icon size seems to work (the comment stating it doesn't is from May last year so I guess things have changed in this library or RN):

<MyCustomIcon name="blah" size={40} style={{lineHeight: 40}} />

[johnf]

Fixed by #1484