React-native-navigation: [V2] topBarHeight constant always 0

[steve228uk]

Issue Description

It seems that when accessing the topBarHeight from Navigation.constants() that the value is always set to 0.

I'm not certain if there's another way to access the height of the navigation bar.

Steps to Reproduce / Code Snippets / Screenshots

const constants = await Navigation.constants();
console.table(constants);

---

Environment

• React Native Navigation version: 2.0.2594
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator / iOS 12 / Debug

[guyca]

Are you calling await Navigation.constants() before setting a root with a stack layout?

IIRC, we get the TopBar height from the inflated NavigationController so calling it before a stack was set will return 0.

[steve228uk]

@guyca Called with await within a controller in the navigation stack. Specifically, I've tried on a registered screen as well as a component that was being rendered by said screen.

[kyledmellander]

Is there a workaround for using KeyboardAvoidingView with a top bar? The Keyboard Avoiding View gets pushed down by the top bar so normally I would use the prop keyboardVerticalOffset along with the top bar height.

[steve228uk]

@kyledmellander currently I’m using 44 + the status bar height which is being set. It’s not ideal but it works for the time being.

[kyledmellander]

@steve228uk Thanks! Do you know if this work across all/most IOS devices? We have users ranging from the 5s to the iPhone X/XS/...

[steve228uk]

@kyledmellander It should do as the status bar height changes for devices that include a safe area inset. The only problem that will arise in the future is if Apple changes the navigation bar height from 44.

[qiaolin-pan]

Any update on this?

[morelearn1990]

When i ran Navigation.constants() in a page with tabBar and bottomTab, topBarHeight and bottomTabsHeight was correct.
When i ran Navigation.constants() in a page with tabBar and without bottomTab, topBarHeight was correct and bottomTabsHeight was incorrect.
When i ran Navigation.constants() in a page without tabBar and with bottomTab, topBarHeight was incorrect and bottomTabsHeight was correct.

[ericschaal]

Hi everyone,

I think the Constant API should be modified as Navigation.constants() can only work if the NavigationRoot is a stack layout. i.e. it will not work if you have a side menu layout with a stack layout as the center component (will return topBarHeight: 0). UIApplication.sharedApplication.delegate.window.rootViewController.navigationController will return nil. A solution could be to pass a componentId to Navigation.constants(componentId) and retrieve the appropriate ViewController and NavigationController.

[ericschaal]

Hi, this issue seems to be about topBarHeight being wrong. It seeems that #4637 is only fixing bottomTabsHeight. Correct me if I’m wrong.

[ItsNoHax]

Yeah I just tested this myself, still getting a height of 0.

[preko96]

The problem is still the same. We are always getting the the first initialised root's constants. Isn't there a way to grab the absolute possible ones? Or the constants of the current screen?

[rh389]

I just came up against this, but one workaround is to use onLayout to measure a <View /> that fills the screen - the difference between that height and Dimensions.get('window').height should give you the height of the top bar + status bar.

<View 
  style={StyleSheet.absoluteFill} 
  onLayout={e => this.setState({ 
    keyboardVerticalOffset: Dimensions.get('window').height - e.nativeEvent.layout.height
  })}>
  <KeyboardAvoidingView keyboardVerticalOffset={this.state.keyboardVerticalOffset || 0} /* ... */ >
    // ...
  </KeyboardAvoidingView>
</View>

NB: Simplified example - you'll want to make sure you're not calling setState unnecessarily (eg measure once, store offset in your global state), watch out for screen rotation, and test on Android.

[guyca]

Fixed in version 2.22.3

[MakhouT]

I can confirm it is working!

[dreamhb]

@guyca I'm using 2.26.3, but topBarHeight is still 0

[dreamhb]

@guyca I'm using 2.26.3, but topBarHeight is still 0

[emilioheinz]

@guyca I'm using 2.27.3 and I'm getting 0 from the topBarHeight in iOS

[guyca]

@emilioheinz on iOS this was fixed in v4.x.x