title: How to Get ListView Section Header to Stick
body: <p>I have buttons displayed on the top of the screen (used <strong>react-native-scrollable-tab-view</strong>). Underneath the buttons, I have <code>ListView</code> with section header on it.</p>
  
  <blockquote>
    <p>Is there a way to get the header to stick to the bottom edge of the tab-view when I am scrolling?</p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/G9HxH.gif" width="300" /></p>
  
  <p>I have had a hard time trying to get <code>ListView</code>'s section header to stick to the bottom of Facebook TabBar, and its default is to stick to the top of the screen.</p>
  
  <p>When I scroll, the section header slides under the tab-bar.</p>
  
  <blockquote>
    <p>Any thoughts on this? Is there anything I should change in FacebookTabBar.js to make this work?</p>
  </blockquote>
  
  <p><em><strong>Without tab bar at the top</strong></em></p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/1529857/8390937/a7c828bc-1c61-11e5-9940-e8d887f90ebb.gif" alt="nobar"></p>
  
  <p><em><strong>With tab bar at the top</strong></em></p>
  
  <p><em><strong>Note</strong></em>: It is strange how this GIF does not show the full animation correctly; you can imagine that the list is scrolled a lot and the section header slides under the tab bar.</p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/1529857/8390938/b8906042-1c61-11e5-9c78-e038a6bf1eca.gif" alt="withbar"></p>
  
  <p><em><strong>Section header styles</strong></em></p>
  
  <pre class="lang-css prettyprint-override"><code>catListHeaderContainer: {
      padding: 12,
      backgroundColor: '#1F2036',
  }
  </code></pre>
  
  <p><em><strong>FacebookTabBar styles</strong></em></p>
  
  <pre class="lang-css prettyprint-override"><code>var styles = StyleSheet.create({
    tab: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingBottom: 10,
    },
  
    tabs: {
      height: 60,
      flexDirection: 'row',
      paddingTop: 5,
      borderWidth: 0,
      borderTopWidth: 0,
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderBottomColor: 'rgba(0,0,0,0)',
    },
  
    activeTabTitle: {
      marginTop: 40,
      color: '#3B5998',
    },
  
    nonActiveTabTitle: {
      marginTop: 40,
      color: '#BDBDBD',
    },
  
  });
  </code></pre>