Nativebase: Header has extra top padding in latest release(2.13.12)

[ansarikhurshid786]

Hi
This is really very nice UI library for react native.

Today I update native-base for tabs crashing in old version. Latest version has other issue and could not resolve through old issue.

Issue Description

Header component is very tall.
I checked Header component has extra paddingTop.

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: 10.15.0
react-native: 0.59.10
native-base: 2.13.12
xcode: 11.3.1

Expected behaviour

Proper header height.

Actual behaviour

Header height is too tall

Steps to reproduce

Update to latest version.

[aspidvip]

me to

[eggybot]

same here, the issue is appearing on iOS devices and simulator (No issue for android just in ios only)

[ansarikhurshid786]

same here, the issue is appearing on iOS devices and simulator (No issue for android just in ios only)

Yes, this issue in iPhone X

[GunnarAK]

The reason for this is the following line in Header component (line 384):

paddingTop: platform === "ios" ? 18 : 0,

We could probably just change this to paddingTop: 0, but that might have unwanted results in future releases of NativeBase?

[ansarikhurshid786]

@GunnarAK paddingTop: 0 make content inside center but height of head is still tall.

[GunnarAK]

Correct, that is the issue that I got. I checked the before/after with the Inspector (RN Debug menu).
I temporarily made the following changes:
Header.js:

paddingTop: 0,

platform.js

toolbarHeight: 56,

Not saying this is a great fix, but it gets around the issue I'm having for now I guess

[ansarikhurshid786]

@GunnarAK do i need to eject or without eject i cant change in platform.js and header.js

[hanykumar]

Hi @ansarikhurshid786 , we have fixed header issue for iOS and it has been merged in master branch.
Thanks for letting us know this issue.

[ansarikhurshid786]

@hanykumar thank alot. i will install from github and check.

[ansarikhurshid786]

@hanykumar i tried
npm i https://github.com/GeekyAnts/NativeBase.git#master --save

But i am getting error react-timer-mixing is does not exit in haste module map.

[hanykumar]

Hi @ansarikhurshid786 , You have to install react-timer-mixin for now because you are using Native base from master branch.

[ansarikhurshid786]

sure i will try that also and check it.

[ansarikhurshid786]

I installed react-timer-mixing and error gone. But I am still facing same issue tall header in my application.

[hanykumar]

Hi @ansarikhurshid786 , since you are using master branch, you have to change path "main": "dist/src/index.js" to "main": "src/index.js" in node_modules/native-base/package.json file.

[ansarikhurshid786]

@hanykumar I tried still same issue.

[hanykumar]

please run npm i and
stop & start the application using react-native run-ios.

[ansarikhurshid786]

i already did stop and start the application. i will try npm i

[ansarikhurshid786]

Better I will use 2.13.8 which perfectly working. In master version header is also fluctuating up and down and header too tall.

[hanykumar]

Hi @ansarikhurshid786, i followed same procedure, I told you.

[ansarikhurshid786]

hi @hanykumar right alignment inside header is fine now but little tall now. and when i am navigating to another page header is fluctuating up and down. I am using react navigation for navigation.

[hanykumar]

Hi @ansarikhurshid786 , can you provide snack for minimal code reproduction for the same?

[ansarikhurshid786]

ok sure it will take some time in snack expo or can i share screenshort

[eggybot]

@hanykumar still has extra height on iOS, you may try to test on iPhone 8,7,6 devices

[hanykumar]

@hanykumar still has extra height on iOS, you may try to test on iPhone 8,7,6 devices

can you share screenshot please? If it is possible, please share snack for minimal code reproduction for the same

[eggybot]

@hanykumar Sorry I could not produce or share the code, but as you can see I use the basic code on the sample screenshot above

import {Platform,Text,View} from 'react-native';
import { StackActions,NavigationActions } from 'react-navigation';
import { Container, Header, Title, Content, Left, Right, Body,Button} from 'native-base';
import styles from '../styles/styles.js';
export default class Language extends Component {
  constructor(props) {
      super(props);
      this.state = {
        drkmode:'default',
      }
  }
  componentDidMount() {
  }
  componentWillUnmount() {
  }
  render() {
  return (
    <Container style={styles.mainbgcon} >
        <Header style={styles.headstyle} androidStatusBarColor="black" iosBarStyle={this.state.drkmode} noShadow={false} hasTabs={false}>
                      <Left>
                          <Button transparent>
                              <Icon name='arrow-left' style={styles.colordef} />
                          </Button>
                      </Left>
                      <Body style={styles.hbdy}>
                          <Title allowFontScaling={false} style={styles.colordef}>Language</Title>
                      </Body>
                      <Right>
                      </Right>
        </Header>
        <Content disableKBDismissScroll={true} padder={false} style={styles.bodystyle} bounces={false}>
            <View style={{marginBottom:30, flex:1, marginTop:10}}></View>
        </Content>
    </Container>);
    }
}

I tried in simulator and in the actual devices (iphone 7,8plus), the extra padding on top still has some excess space.

Thanks,

UPDATE
I temporarily add the specific height on my style to revert back to the height from the old version for iOS. I assign {height:56} and it goes back to normal. The latest version which assign the iOS header height to 64 which way to large, this will only works if your Left and Right buttons is define as a button with background color, but for the standard header buttons with transparent like text icons the height is too large so going to 56 will revert to the original height of the Header.

[ansarikhurshid786]

In which version latest or old version?

[eggybot]

@ansarikhurshid786 latest version, what I actually did is just add the heigh directly on the header tag <Header style={{height:56,paddingVertical:0}} ...>

[ansarikhurshid786]

@eggybot I tried your solution but still not proper. you can see. different :
Before

After :

[ansarikhurshid786]

If i am not using header component and header from react navigation then looks fine :

[andresmtz98]

Same issue

[Aryk]

Better I will use 2.13.8 which perfectly working. In master version header is also fluctuating up and down and header too tall.

Im having the exact same issue, going back to 2.13.8. I'm using Expo 38 btw.

[angelxmoreno]

So is the only solution at the moment reverting to an old version?

[angelxmoreno]

v2.11.0 does not have this issue

[GunnarAK]

The issue is not present in v2.13.13, or at least it looks fine on my iPhone X. Unfortunately my iPhone 5s broke

[teckel12]

I'm having the problem in v2.13.8. I had to use marginTop: platform === "ios" ? -15 : -30 to get it to work, which made me feel super dirty doing.

Tried upgrading to v2.13.13 with the same results. Downgraded to v2.11.0 and the same.

Ever since upgrading to Expo 38, I can't get the Header to work unless I set marginTop to -15 on iOS and -30 on Android.

[ansarikhurshid786]

@teckel12 not help me. i have tested in iphone 11 emulator

[teckel12]

@ansarikhurshid786 Really? <Header style={{ marginTop: -30 }}> will push the Header up 30 removing the space. For me, iOS needed -30 and Android -15 to be about equal the height in previous versions. But doing the -30 should move it up for sure.

[Aung-Myint-Thein]

Yep. This method will definitely removed the space but it feels very dirty doing it. but I will just stick with 2.13.13 and keep this as a known bug .. because i don't want to go and change all the pages' headers. Hope the fix will land soon thou..

[GreatAuk]

stop use header😅

[hanykumar]

Hi, can you provide minimal code reproduction after testing with latest NativeBase v2.13.14 with the screenshots.

[eddiexsun]

Please see iOS.

2.13.9 - 2.13.14 (header height larger than expected)
https://snack.expo.io/@eddiesun/native-base-header-2.13.14

2.13.8 (header height is expected)
https://snack.expo.io/@eddiesun/native-base-header-2.13.8

[hanykumar]

Hi @eddiexsun , After testing, we found that only expo virtual iOS device shows differences. Header looks same on Mac simulator iPhone 8 with both v2.13.8 and v2.13.14 . If you are testing it on real device iPhone 6/7/8, let us know.

Mac simulator iPhone 8

[eddiexsun]

I can reproduce the problem on real iPhone 7 device and iPhone 11 simulator (I expect/assume the same issue on other devices).

2.13.9 - 2.13.14 (header height larger than expected)
https://snack.expo.io/@eddiesun/native-base-header-2.13.14

2.13.8 (header height is expected)
https://snack.expo.io/@eddiesun/native-base-header-2.13.8

[hanykumar]

Hi @eddiexsun , You were right. But this is expected behavior in v2.13.14, as you can see SafeAreaView in green color.
Extra TopPadding has been removed
v2.13.8

v2.13.14

[eddiexsun]

Ok. So it seems Native Base introduced some vertical padding on the header after 2.13.8, so the buttons would have some space from the top and the bottom of the header border, instead of touching the header border as in 2.13.8.
I wonder if there is an option to remove this added padding, because many people use transparent buttons and the inner padding of the button is good enough as a spacer.

[eddiexsun]

Also, just realized this after waiting on this issue for months...

If you ejected the theme before (you have this native-base-theme directory), you need to re-eject the theme to take the updates from the latest NativeBase version.

$ node node_modules/native-base/ejectTheme.js

Hope this helps someone.

[hanykumar]

Thanks @eddiexsun . we will take care of it in NativeBase v3.

[Shohrat96]

Hello,

setting headerStatusBarHeight:0 solved the issue for me. Check the screenshot. Hope it helps.