Nativebase: Size of icon at left and right of header is not similar?
<View>
<Header style={headerContainerStyle}>
<Left style={headerLeftStyle}>
<Button transparent>
<Icon name='ios-refresh' type='Ionicons' style={headerIconStyle} />
</Button>
</Left>
<Body style={{ flexDirection: 'column' }}>
<Title style={headerSmallText}>Jobs</Title>
<Title style={headerSmallSubText}>Today, someStatus</Title>
</Body>
<Right style={headerLeftStyle}>
<Button transparent>
<Icon name='ios-refresh' type='Ionicons' style={headerIconStyle} />
</Button>
</Right>
</Header>
<View>
<Text>JobsScreen Component</Text>
</View>
</View>
react-native, react and native-base version
"native-base": "^2.7.2",
"react": "16.4.1",
"react-native": "0.56.0",
Expected behaviour
Refresh button for left and right to be the same size
Actual behaviour
Very obvious the icon on the left is much larger. They are sharing the exact same style, headerLeftStyle, which is only a marginLeft: 10
Is the bug present in both iOS and Android or in any one of them?
Both ios and android behave the same
isaaclem
All 5 comments
I've also found that applying fontSize at Icon as below seems to be working consistently
<Icon name='ios-refresh' type='Ionicons' style={{ fontSize: 30 }} />
Wondering if this is the right way?
isaaclem
on 13 Aug 2018
👍8
🎉4
@isaaclem true. This is due to https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/Header.js#L320
The condition values should be reversed
SupriyaKalghatgi
on 14 Aug 2018
SupriyaKalghatgi
on 14 Aug 2018
👍1
SupriyaKalghatgi
on 14 Aug 2018
Fixed with 2.8.0
SupriyaKalghatgi
on 28 Aug 2018
Was this page helpful?
0 / 5 - 0 ratings
Related issues
sihemhssine
路
3Comments
natashache
路
3Comments
georgemickael-b
路
3Comments
eggybot
路
3Comments
Cotel
路
3Comments
Most helpful comment
I've also found that applying
fontSizeat Icon as below seems to be working consistently<Icon name='ios-refresh' type='Ionicons' style={{ fontSize: 30 }} />Wondering if this is the right way?