iOS Navbar height

[SourceErr0r]

Hi!

For some reason it seems like the navbar on iOS is rendering at double height. I've tried running through various props on the <NavigationBar> component but with no luck. You can see an example below:

Do you happen to know why this might be happening, and how to resolve? I'm using a fairly standard TabBar implementation, and this issue is occurring both top level and on children with breadcrumbs.

[grahammendick]

Could you show me your TabBar implementation, please? Not all the code, just the high level layout

[SourceErr0r]

Sure,

<TabBar
      scrollable={false}
      defaultTab={0}
      labelVisibilityMode="labeled"
      primary={true}
      barTintColor={'rgb(247,247,247)'}
      selectedTintColor="#3B852A"
    >
      <TabBarItem title="Home" image={require('../assets/home.png')}>
        <NavigationHandler stateNavigator={homeNavigator}>
          <NavigationStack />
        </NavigationHandler>
      </TabBarItem>
      <TabBarItem title="Profile" image={require('../assets/profile.png')}>
        <NavigationHandler stateNavigator={profileNavigator}>
          <NavigationStack />
        </NavigationHandler>
      </TabBarItem>
      <TabBarItem title="More" image={require('../assets/more.png')}>
        <NavigationHandler stateNavigator={menuNavigator}>
          <NavigationStack />
        </NavigationHandler>
      </TabBarItem>
    </TabBar>

[grahammendick]

Thanks, and can you show me one of the scenes with the NavigationBar in. Again just the high level layout

[grahammendick]

Does it render double height if you rendered it outside of the TabBar?

[SourceErr0r]

<>
      <NavigationBar
        title={ref}
        barTintColor={colors.Primary}
        titleColor={colors.White}
        tintColor={colors.White}
      />
      <View style={styles.container}>
          <Text style={styles.text}>{title}</Text>
      </View>
      {loading && <GenericLoader />}
</>

I'll have a check re: outside tab bar. One moment

[SourceErr0r]

Correct height when rendered outside of Tabs

[grahammendick]

Can you try the twitter sample and see if you get the double height issue, please?

[SourceErr0r]

Also, if I do not include the <NavigationBar> component, I get the default navbar rendered still at double height (which is the oddest part for me - I thought it might be stacking with the default)

Just need to pop out and grab lunch, I'll give the sample a try when I get back!

[grahammendick]

Oh thanks, I think I've got it. You need to hide the NavigationBar in the scene with the tabs in.

[grahammendick]

Otherwise you're getting 2 navigation bars. One from the tabs scene and then the actual one you want from the tab content scene

[SourceErr0r]

Ahhh that's done it, brilliant, thanks!