Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Size of icon at left and right of header is not similar?
See original GitHub issue <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
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Header: text/icons positioning and keeping ... - Stack Overflow
I've tried to position the a tags to the right but it keeps going outside of the header on different browser. I've also...
Read more >Tips for Aligning Icons to Text - CSS-Tricks
Tip 2: Use similarly sized icons Here's an ideal situation: all icons are the exact same size. Let's say all the icons in...
Read more >Align text or adjust the margins within a text box
Click the Shape Options tab if it isn't already selected. Click the text box icon Text box icon , and then click Text...
Read more >Video: Insert headers and footers - Microsoft Support
Training: In this video, learn what a header and footer is, where it is located, and how to print them in Excel. Add...
Read more >How to make div with left aligned text and right aligned icon ...
float: To set the icon on the right side of the div, we use float: right property. Approach: We will use HTML to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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?
Fixed https://github.com/GeekyAnts/NativeBase/commit/502f523726e5cda8c1729ff34aa7d839bafe6844