NavBar overlays content

[axelander]

Is there a way to get the navbar to not overlay the content? I have not found a way to do this without setting magic paddings on a content view wrapper ({paddingTop: 64} for iOS).

[aksonov]

It is not problem of this component actually. As far as i see paddingTop is one from optimal solutions....

[axelander]

Ok, so you set the paddingTop property to push down the content? I want to get the same result as when adding a header to the router.

[aksonov]

This component just re-uses existing RN Navigator and works in the same way.

[lrettig]

The behavior of this component appears to have changed with the switch to ExNavigator. Here are screenshots of the exact same code (it's below) rendered using versions 0.3.4, 1.0.1, and 2.0.2 of this component.

Any idea why this changed?

Thanks!

0.3.4:

1.0.1:

2.0.2:

Code for the route:

    return (
      <View style={{flex: 1}}>
        <View style={{position:'absolute',left:0,right:0,top:0,bottom:0,backgroundColor:'#F5FCFF'}}/>
        <Router>
          <Route name="home" component={HomeScreen} initial={true} title="Home"/>
        </Router>
      </View>
    );

Code for the HomeScreen component:

  render: function() {
    return (
      <View>
        <Text>{this.state.cartAnnouncement}</Text>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderProduct}
          style={styles.listView}
        />
      </View>
    );
  }

var styles = StyleSheet.create({
  listView: {
    //paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },
});

[aksonov]

Please check default examples from React Native distribution and exNavigator. I believe all they work like 1.* and 2.* versions. The reason why 0.* version worked differently that the component used 'non-RN' navigator bar (react-native-navbar) that was just 'header' for each the scene. As the result you were not able to do semi-transparent navbar, so you could see underlying scroll content (correct me if i'm wrong).

Btw, you still could do the same with newest versions - just set footer as your custom navbar and disable internal navbar by setting hideNavBar={true}

[lrettig]

Hi @aksonov, thank you very much, this is very helpful. So may I summarize by stating that the pre-1.* behavior was incorrect or suboptimal (or in any case different from the norm), and that the post-1.* behavior is normal and as expected? Thanks. This makes sense.

[aksonov]

So may I summarize by stating that the pre-1.* behavior was incorrect or suboptimal (or in any case different from the norm), and that the post-1.* behavior is normal and as expected?

Yes.

[lrettig]

Thanks. In case it helps anyone else, there is a related thread on the topic here: facebook/react-native#4264.

[navels]

FYI I think the correct solution is to tell the navigator about the padding via sceneStyle. You can just add this to your route's schema:

sceneStyle={{paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight}}

Edit: per my comment below, this doesn't work.

[lrettig]

This does not work for me. I thought this module uses NavigatorIOS?

[navels]

It uses exNavigator, which extends Navigator. The sceneStyle works for me except in the case of a ScrollView, where I had to add paddingTop to the ScrollView's style.

Ugh, never mind, sceneStyle has no impact.

Finally got this working by putting the sceneStyle property on the Router.

[CreepGin]

@navels Thanks! I got it working for my scenario using Navigator.NavigationBar.Styles.General.TotalNavHeight

[helsont]

@CreepGin's method worked best for me:
TLDR: On your Router, use the style
sceneStyle={{paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight}}