Issue with allowFontScaling option interfering with lineHeight

[levic92]

When accessibility options for larger text are enabled all text sizes are increased (react native behaviour - for now allowFontScaling=true is default)

So I globally set this to false for all text objects so icons and text stayed the correct size, but there is still an issue and the bottom of the icon is cut off.

I have traced the issue down to this line: https://github.com/oblador/react-native-vector-icons/blob/master/lib/create-icon-set.js#L71 When this is commented out there is no issue

The issue can be reproduced by creating any Text element and defining both a height and lineHeight value that are equal

<Text style={{ lineHeight: 20, height: 20, fontSize: 20}}>TEST</Text>

So is the lineHeight style necessary?

[levic92]

It could be a possible bug in react native that causes the lineHeight to still be adjusted. See: facebook/react-native#2783

[oblador]

I'll await responses to the bugreport. IIRC lineHeight was needed to be able to properly align stuff vertically, but might revisit this :-)

[prenaux]

I had to comment:
// textStyle.lineHeight = size;
// textStyle.height = size;
in create-icon-set.js line 77 & 78 in the latest version.

Without that the icons are truncated badly when using the "zoomed" mode on iOS 9 on an iPhone6s.

[rreusser]

+1 for commenting out 77 & 78. It feels like that's the sort of thing with far-reaching implications, but I'm unable to find any alignment issues that have been hurt by this. On the contrary, together with passing allowFontScaling={false}, this has fixed a number of issues.

[rreusser]

My fix for this issue was to add the ability to pass extra props to the text element (allowFontScaling={false}, passed using PR at #34), then to comment out the two lines mentioned above. My component then looks like:

var disableFontScaling = ComposedComponent => class extends React.Component {
  render() {
    return <ComposedComponent {...this.props} textPropsIOS={{allowFontScaling:false}} />
  }
}

export default disableFontScaling(createIconSet(glyphMap, 'FSIcon'));

[oblador]

I've done a pretty major refactor in the inline-refactor branch that should solve this issue. It breaks some backwards compatibility so please test it before I merge.

[oblador]

Fixed in 0.8.0.

[jamesfzhang]

Noticed this on when testing with the large iPhone for the first time and was perplexed, glad to have found this with a quick search! Thanks :)

[prenaux]

Great, thanks.