ump-plugin-sectionlist

SectionList — RN-shape sectioned list (headers / footers / item-separators / section-separators / sticky headers) built on top of FlatList for UMP apps.

Install

npm install ump-plugin-sectionlist

Peer dependencies (must already be installed in your app):

• ump-core
• ump-native

Usage

import { SectionList } from 'ump-plugin-sectionlist';

<SectionList
    sections={[
        { title: 'A', data: [{ id: 'a1', label: 'one' }] },
        { title: 'B', data: [{ id: 'b1', label: 'two' }, { id: 'b2', label: 'three' }] },
    ]}
    renderItem={({ item }) => <Text>{item.label}</Text>}
    renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
    keyExtractor={(item) => item.id}
/>

Props

| Prop | Type | Default | Notes | |-------------------------------|---------------------------------------------------------|----------|--------------------------------------------------------------------------------| | sections | ReadonlyArray<SectionListSection<ItemT, SectionT>> | required | Each section has data: ReadonlyArray<ItemT> plus optional per-section overrides. | | renderItem | (info: SectionListRenderItemInfo) => any | required | Per-item renderer. Section can override via its own renderItem. | | renderSectionHeader | (info: { section }) => any | — | Header above each section. | | renderSectionFooter | (info: { section }) => any | — | Footer below each section. | | keyExtractor | (item, index) => string | — | Default falls back to indexInSection if a section provides no key. | | ItemSeparatorComponent | component or element | — | Inserted between items inside a section. | | SectionSeparatorComponent | component or element | — | Inserted between adjacent sections. | | ListHeaderComponent | component or element | — | Above the first section. Forwarded to FlatList. | | ListFooterComponent | component or element | — | Below the last section. Forwarded to FlatList. | | ListEmptyComponent | component or element | — | Rendered when sections is empty (no items). | | stickySectionHeadersEnabled | boolean | true | Sticky headers require getItemLayout; otherwise a one-shot dev warn fires. | | getItemLayout | (data, index) => { length, offset, index } | — | Required to enable sticky overlay; mirrors FlatList's getItemLayout. | | style | FlatList style | — | Pass-through. | | contentContainerStyle | FlatList style | — | Pass-through. | | onScroll | (ScrollEvent) => void | — | Pass-through; SectionList wraps it to drive the sticky overlay. | | scrollEventThrottle | number | — | Pass-through. | | scrollEnabled | boolean | — | Pass-through. | | onEndReached | () => void | — | Pass-through. | | onEndReachedThreshold | number | — | Pass-through. | | initialNumToRender | number | — | Pass-through. | | windowSize | number | — | Pass-through. |

v1 limitations

• Sticky overlay requires getItemLayout (FlatList's internal heights table is private; without getItemLayout we can't compute exact section starts and fall back to non-sticky with a one-shot dev warn).
• Inherits all FlatList v1 limits (no inverted, no maintainVisibleContentPosition, etc.) — see FlatList in ump-native.

Migration from ump-native

In ump-native 0.1.x, SectionList (and the related types SectionListProps, SectionListSection, SectionListRenderItemInfo, SectionBase) shipped from the main package. Starting 0.2.x they ship as this separate plugin.

- import { SectionList } from 'ump-native';
- import type { SectionListProps, SectionListSection } from 'ump-native';
+ import { SectionList } from 'ump-plugin-sectionlist';
+ import type { SectionListProps, SectionListSection } from 'ump-plugin-sectionlist';

No API changes.