Extra space between NavigatorIOS bar and ListView Section Header

Question

I have some space between my NavigatorIOS navigation bar and my ListView Section Header:

How can I remove that space? I'd like the section header to be flush with my navigation bar.

Answer 1

Check the listView Styles, if you have a style "marginTop", make it to 0

Answer 2

It looks like this bug was because of a couple of circumstances that have since been changed. Here's how the former architecture was:

index.ios.js contained a NavigatorIOS component whose InitialRoute was a Main component involving a TabBarIOS which would render a view based on either Home or Collections being selected.

ListView was within this Home component, essentially a few layers deep.

Here's how I fixed it:

In index.ios.js, I replaced NavigatorIOS with Navigator which still pointed to Main:

  renderScene: function(route, navigator) {
    var Component = route.component;
    return (
      <View style={styles.container}>
        <Component
          route={route}
          navigator={navigator}
          topNavigator={navigator} />
      </View>
      )
  },

  render: function() {
    return (
      <Navigator
        sceneStyle={styles.container}
        ref={(navigator) => { this.navigator = navigator; }}
        renderScene={this.renderScene}
        tintColor='#D6573D'
        barTintColor='#FFFFFD'
        titleTextColor='#D6573D'
        navigationBarHidden={true}
        initialRoute={{
          title: 'Product Kitty',
          component: Main,
        }} />
    );
  }

Main still retained TabBarIOS, but its render methods for both Home and Collection now render its own NavigatorIOS components:

  render: function() {
    return (
      <TabBarIOS>
        <Icon.TabBarItem
          title='Home'
          selected={this.state.selectedTab === 'products'}
          iconName={'home'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'products') {
              this.setState({
                selectedTab: 'products'
              });
            } else if (this.state.selectedTab === 'products') {
              this.refs.productRef.popToTop();
            }
          }}>
          {this.renderProductView()}
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="Collections"
          selected={this.state.selectedTab === 'collections'}
          iconName={'list'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'collections') {
              this.setState({
                selectedTab: 'collections'
              });
            } else if (this.state.selectedTab === 'collections') {
              this.refs.collectionRef.popToTop();
            }
          }}>
          {this.renderCollectionView()}
        </Icon.TabBarItem>
      </TabBarIOS>
      )
  },

  renderProductView: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        tintColor='#D6573D'
        barTintColor='#FFFFFD'
        titleTextColor='#D6573D'
        ref='productRef'
        initialRoute={{
          title: 'Product Kitty',
          component: Products
        }} />
        )
  },

  renderCollectionView: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        tintColor='#D6573D'
        barTintColor='#FFFFFD'
        titleTextColor='#D6573D'
        ref='collectionRef'
        initialRoute={{
          title: 'Collections',
          component: Collections,
          passProps: {
            accessToken: this.state.accessToken
          }
        }} />
        )
  }

From this change, the issue with the extra pixel of horizontal space between NavigatorIOS and ListView SectionHeader disappeared: