Issue with allowFontScaling option interfering with lineHeight

[oblador]

Issue with allowFontScaling option interfering with lineHeight

[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.