Icon size is wrong with 1.0.0

[satya164]

The icon size is wrong in the latest version using the new custom font feature of RN.

Expected (as with 0.8.5):

Current (with 1.0.0 - background set to blue to see the dimensions):

Code used (simplified):

<MaterialIcons name="arrow-back" size={24} style={{ margin: 16 }} />

[timzaak]

#63 this may solve your problem

[satya164]

Doesn't seem to work for me. I'm on Android. I've the following code,

import React from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";

export default class Icon extends React.Component {
    setNativeProps(nativeProps) {
        this._root.setNativeProps(nativeProps);
    }

    render() {
        return (
            <MaterialIcons
                {...this.props}
                style={[ { lineHeight: this.props.size }, this.props.style ]}
                ref={c => this._root = c}
            />
        );
    }
}

Icon.propTypes = {
    size: React.PropTypes.number.isRequired
};

Changing the lineHeight actually makes it worse. Note that allowFontScaling is not supported on Android.

[oblador]

lineHeight behaves very weirdly in React Native, it's nothing like in CSS. What happens if you try to set both height and lineHeight (also try without margin/padding to be sure it doesn't iterfere)?

[satya164]

@oblador I had tried, didn't work, will try more things.

[felipemartim]

Same issue here. I had to set lineHeight to 45 for a icon with size 24 for it to display correctly.

[oblador]

I get that this is annoying, but not sure how to solve it in a good way. Before I was using a subclassed text view with width/height/lineHeight/fontSize all set to props.size. The subclass only added custom font family support, and I can't understand how it can produce different layouts now when using the core text view. The IconExplorer example app works and looks just like before afaik.

One possible solution would be to wrap the icons in a View and center it with flexbox. That's how I handled stuff before, but ended up making the component limited and more complex in some aspects.

[satya164]

The problem is no matter what I do, the lineHeight doesn't seem to change. I can specify the height and width to this.props.size, and it results in a square, but the icon is clipped.

[satya164]

Is it possible to provide a release of the old version which is compatible with RN 0.16? I've tried averything, but cannot seem to get this to work.

[oblador]

@satya164: are you sure you're not overriding the lineHeight in your style prop? Try to put it before the lineHeight object in your composition.

[satya164]

@oblador Yeah, I had tried with only style prop with lineHeight. :(

Anyways, for now I had downgraded to 0.15, because of this and some other issues in 0.16.

[oblador]

@satya164: can you share a gist with your issue, I'd like to research it a bit more. I've upgraded MaterialIcons for the 1.0.0 release so that might be the issue, you could try the 1.0.0-rc instead which has the previous version of MaterialIcons.

[satya164]

@oblador Okies, I'll try the old version of the font file and report back.

[oblador]

@satya164 How did it go? =)

@oblador I can confirm that reverting to 1.0.0-rc fixes this issue. Something is weird with the MaterialIcons upgrade: ac883e3

[satya164]

Sorry for taking such a long time. I tried copyng the old version of the font, but I get this

Downgrading to 1.0.0-rc didn't help either :(