React-native: Navigator overlapping inner content

[fender]

I'm using the native Navigator component but when using a NavigatorBar, it is overlapping my inner content like so:

This is the content that should be visible but only shows when dragged/scrolled down.

Here is my nav component:

  ...
  render() {
    return (
      <Navigator
        style={styles.appContainer}
        initialRoute={{component: SplashScreen}}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={this.navBarRouteMapper}
            style={styles.navBar}
          />
        }
      />
    );
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
    marginBottom: 5
  },
  button: {
    marginBottom: 7,
    borderWidth: 1,
    borderColor: '#000000',
    borderRadius: 2,
    padding: 5
  }
});

And the inner component:

  ...
  render() {
    return (
      <ListView style={styles.container}
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
  },
  text: {
    flex: 1,
  }
});

[FaridSafi]

you can add sceneStyle={{paddingTop: 64}} to your navigator props

[sospartan]

@FaridSafi better use this "Navigator.NavigationBar.Styles.General.NavBarHeight" I think

[brentvatne]

Hi there! Not a bug, please post these types of issues to StackOverflow :)

[lrettig]

Has this issue been addressed on StackOverflow? I'm having the same issue and couldn't find anything related there. Just wanted to check before opening a new ticket. Thanks!

[fender]

@lrettig I just added a paddingTop as mentioned above.

[lrettig]

Thanks. I was confused by #470 as this:

Very simple solution will be wrap the with a container view, like ScrollView

didn't work for me. Adding paddingTop does, of course, help. I guess this is the accepted way of working around this issue.

[ragamufin]

Just an addition to @sospartan 's comment. I think the correct height can be found in Navigator.NavigationBar.Styles.General.TotalNavHeight

[pejalo]

Another tip: Scroll bars look better if you use marginTop instead of paddingTop

[ReDetection]

Well, Navigator is deprecated and removed from default package. What is recommended solution now?

[nhoxbypass]

I think paddingTop is the only solution if you don't want to embed it in a ScrollView or use 3rd library to get exactly the StatusBar height.