React-native-router-flux: 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: https://github.com/facebook/react-native/issues/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}}

[simman]

@helsont ,Can be used in a root sceneStyle? I use it in the Scene key="root" does not work, but I use in Scene key="WebView", it can work .

const Scenes = Actions.create(
  <Scene key="modal" component={Modal}>
    <Scene key="root"
          hideNavBar={false}
          titleStyle={{color:'white'}}
          navigationBarStyle={{backgroundColor: '#14649c'}}
          barButtonIconStyle={{tintColor: 'white'}}
          sceneStyle={{paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight}}
          >

      <Scene key="Launch" component={Launch} title="" hideNavBar={true} initial={true}/>
      <Scene key="WebView" component={TNWebView} title="" type="push" hideNavBar={false} sceneStyle={{paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight}}/>

[joewood]

The Navigator.NavigationBar.Styles.General.TotalNavHeight value doesn't seem to be quite large enough to offset the navigationbar. Using the inspector, the NavBar is 64px, but the value of TotalNavHeight is 56.

I've never understood why the NavBar's child navigation card isn't rendered in the body of the Navigation component so this offset isn't necessary. Why not make it the default?

[danvass]

What about the tabbar at the bottom? That also overlays content.

[Cody-G-G]

encountering the same as @joewood. So i guess I have to hardcode the value, not ideal...

[endachao]

@lrettig This is what tools？

[jp928]

@yccphp
just use cmd+d in the simulator and choose inspect from the menu

[endachao]

@jp928 thank you

[slender9168]

@helsont Thanks, your solution worked for me ( tested on android lenovo phone )

[Amurmurmur]

@aksonov But what if you wanted to hide the navbar on scroll?
If sceneStyle={{paddingTop: navbarheight}} is set, listview elements will not reach the top of the screen before they become invisible.

How is it possible to fix that issue, to sort of make listview stick to the navbar, whenever it disappears the listview takes it's place and moves to the top.

Kind like a search bar in the iOS contacts, when you hit the search it increases in size, when you finished typing, the searchbar gets back to the original size and listview's top edge is sticked to them bottom of the searchbar.

Thanks a lot in advance, for any help.

[nao-de]

The solution of adding padding to the router seems to cause issues when using tested scenes, such as with tabs. Everything looks fine until I hit the screen with tabs. Then it seems to double in padding.

For reference, my schema:

  <Scene key="root">
    <Scene key="login" component={LoginScene} title="Login" />
    <Scene key="workspaceSelection" component={WorkspaceSelectionScene}
      title="Workspace Selection" />
    <Scene key="launch" component={LaunchScene} title="Launch" />
    <Scene key="editQuery" component={EditQueryScene} title="Edit Query" />
    <Scene key="results" title="Query Results"
        tabs={true} tabBarStyle={style.tabBarStyle}>
        <Scene
          key="listResultsTab"
          title="List"
          icon={TabIcon}
        >
          <Scene key="listResults" component={ListResultsScene} title="Results List" />
        </Scene>

        <Scene
          key="mapResultsTab"
          title="Map"
          icon={TabIcon}
        >
          <Scene key="mapResults" component={MapResultsScene} title="Results Map" />
        </Scene>
    </Scene>
  </Scene>

Any solutions?

[Amurmurmur]

well just set paddingTop -54 on the child scenes whenever you dont have a navbar and you dont need padding top

[jtmarmon]

@JCDJulian ran into the same issue. not sure where you're applying the padding in your scene, but I was applying it to the sceneStyle prop of the tab bar scene, like so:

<Scene key="tabBar" tabs={true} tabBarStyle={styles.tabBarStyle} sceneStyle={{paddingTop: 64}}>

removing the sceneStyle from the tabBar scene and instead applying it to the child scenes worked for me.