Skip to main content

Props

Complete reference for all SectionFlow component props.

Required Props​

sections​

sections: Section<T>[]

Array of section objects. Each section must have:

PropertyTypeDescription
keystringUnique identifier for the section
titlestringDisplay title for the section header
dataT[]Array of items in this section
const sections: Section<Task>[] = [
  { key: 'backlog', title: 'Backlog', data: [...] },
  { key: 'in-progress', title: 'In Progress', data: [...] },
];

renderItem​

renderItem: (info: RenderItemInfo<T>) => React.ReactElement

Renders each item in the list.

interface RenderItemInfo<T> {
  item: T;           // The item data
  index: number;     // Index within the section
  section: Section<T>; // Parent section
  sectionIndex: number; // Index of the section
}

Example:

renderItem={({ item, index }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
)}

Section Header Props​

renderSectionHeader​

renderSectionHeader?: (info: RenderSectionHeaderInfo<T>) => React.ReactElement

Renders section headers.

interface RenderSectionHeaderInfo<T> {
  section: Section<T>;  // The section data
  index: number;        // Section index
  isCollapsed: boolean; // Whether section is collapsed
}

Example:

renderSectionHeader={({ section, isCollapsed }) => (
  <View style={styles.header}>
    <Text>{section.title}</Text>
    <Text>{isCollapsed ? '▸' : '▾'}</Text>
  </View>
)}

stickySectionHeadersEnabled​

stickySectionHeadersEnabled?: boolean

Enable sticky section headers. Default: false

stickyHeaderStyle​

stickyHeaderStyle?: ViewStyle

Additional styles applied to the sticky header container.

stickyHeaderStyle={{
  backgroundColor: '#1e293b',
  shadowOpacity: 0.1,
}}

Collapsible Props​

collapsible​

collapsible?: boolean

Enable collapsible sections. Default: false

initialCollapsedSections​

initialCollapsedSections?: string[]

Array of section keys that should be collapsed initially.

initialCollapsedSections={['archived', 'completed']}

onSectionCollapse​

onSectionCollapse?: (sectionKey: string, isCollapsed: boolean) => void

Called when a section's collapsed state changes.

Layout Props​

estimatedItemSize​

estimatedItemSize?: number

Estimated height of each item. Improves initial render performance.

estimatedSectionHeaderSize​

estimatedSectionHeaderSize?: number

Estimated height of section headers. Default: 40

contentContainerStyle​

contentContainerStyle?: ViewStyle

Style applied to the scroll content container.

style​

style?: ViewStyle

Style applied to the outer container.

Scroll Props​

onScroll​

onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void

Called on scroll events.

onMomentumScrollEnd​

onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void

Called when momentum scroll ends.

scrollEventThrottle​

scrollEventThrottle?: number

How often to fire scroll events (ms). Default: 16

showsVerticalScrollIndicator​

showsVerticalScrollIndicator?: boolean

Show vertical scroll indicator. Default: true

Viewability Props​

onViewableItemsChanged​

onViewableItemsChanged?: (info: {
  viewableItems: ViewToken[];
  changed: ViewToken[];
}) => void

Called when viewable items change.

viewabilityConfig​

viewabilityConfig?: ViewabilityConfig

Configuration for determining which items are viewable.

viewabilityConfig={{
  itemVisiblePercentThreshold: 50,
  minimumViewTime: 250,
}}

Performance Props​

windowSize​

windowSize?: number

Number of items to render outside the visible area. Default: 21

maxToRenderPerBatch​

maxToRenderPerBatch?: number

Maximum items to render per batch. Default: 10

updateCellsBatchingPeriod​

updateCellsBatchingPeriod?: number

Time between batch renders (ms). Default: 50

removeClippedSubviews​

removeClippedSubviews?: boolean

Remove views outside viewport. Default: true on Android

Keyboard Props​

keyboardShouldPersistTaps​

keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'

Keyboard dismiss behavior on tap.

keyboardDismissMode​

keyboardDismissMode?: 'none' | 'on-drag' | 'interactive'

When to dismiss keyboard while scrolling.

Other Props​

inverted​

inverted?: boolean

Invert the scroll direction. Default: false

ListEmptyComponent​

ListEmptyComponent?: React.ComponentType | React.ReactElement

Rendered when sections array is empty.

ListHeaderComponent​

ListHeaderComponent?: React.ComponentType | React.ReactElement

Rendered at the top of the list.

ListFooterComponent​

ListFooterComponent?: React.ComponentType | React.ReactElement

Rendered at the bottom of the list.

keyExtractor​

keyExtractor?: (item: T, index: number) => string

Extract unique key for each item. Default uses item.id or item.key.

refreshControl​

refreshControl?: React.ReactElement

Pull-to-refresh component.

refreshControl={
  <RefreshControl
    refreshing={refreshing}
    onRefresh={onRefresh}
  />
}