NavigationBar gets overwritten by other elements about ui

[SoHotSoup]

Hm, this is probably because NavigationBar is positioned absolute, so it doesn't affect layout. We use it as navigationBar component in Navigator, so we didn't notice this issue yet. Could you, please, try this:

<NavigationBar style={{ container: { zIndex: 1 } }}
centerComponent={<Title>TITLE</Title>}
/>

This will make NavigationBar rendered at the top of Image.

Also, I think we should introduce styleName="inline" for NavigationBar which would render NavigationBar with position relative.

[SoHotSoup]

cc @ekhall

[ekhall]

Thanks man - that works in as much as it positions it higher, although content is still positioned behind it. I believe that's what you're referring to with your last point. Would be super if it was positioned relatively (as I imagine you're pointing out, inline as a styleName doesn't work yet).

Really like these components - thank you and please let me know if I can troubleshoot/help any further.

[guilhermedecampo]

Had the same issue here. End up adding a paddingTop on the Screen component

<Screen
        style={{ paddingTop: 70 }}
      >
        <NavigationBar
          centerComponent={<Title>My Title</Title>}
        />
        <ListView
          data={this.data()}
          renderRow={this.rows}
        />
      </Screen>

What do you think in create a styleName named navigation-bar for Screen component?
@SoHotSoup

[SoHotSoup]

Hey @guilhermedecampo! Sorry for late response, I believe that better option would be to add new styleName for NavigationBar which would define it as inline. Something like this:

'.inline': {
  width: window.width,
  position: 'relative',
}

Maybe zIndex should be defined as well, because it may be covered by ScrollView content.
That should be enough. Could I ask you to submit PR for it?

[guilhermedecampo]

For sure @SoHotSoup

[SoHotSoup]

#104