Skip to main content

Sticky Headers

Section headers that stick to the top of the screen while scrolling through their section.

Live Example​

How It Works​

Enable Sticky Headers​

<SectionFlow
  stickySectionHeadersEnabled={true}
  // ...
/>

Style the Sticky Header​

Apply additional styles when the header is stuck:

<SectionFlow
  stickySectionHeadersEnabled={true}
  stickyHeaderStyle={{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  }}
/>

Dynamic Header Styling​

Access the section in renderSectionHeader for dynamic styling:

renderSectionHeader={({ section }) => (
  <View
    style={[
      styles.header,
      { borderLeftColor: getColorForSection(section.key) },
    ]}
  >
    <Text>{section.title}</Text>
  </View>
)}

Best Practices​

  1. Solid Background - Always use a solid background color for sticky headers to prevent content showing through

  2. Shadow for Depth - Add shadow/elevation to make it clear the header is floating

  3. Compact Height - Keep sticky headers relatively short to maximize visible content

  4. High Contrast - Ensure text is readable against the header background