UITableView-based SectionList
npm install react-native-tableview-listSectionList-like component backed by a UITableView (iOS only).
The aim is to have the fully native experience: swipe to delete (with correct haptics and automatic dismissal when scrolling), press and hold menus etc. Performance is probably on par with the default SectionList component.
Only renders custom cells - if you need the standard styles, use react-native-tableview. This library will also handle custom cells - but doing so breaks stuff like Context.
| | | |
| ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| !Screenshot 1 | !Screenshot 2 | !Screenshot 3 |
``sh`
npm install react-native-tableview-list
`jsx
import TableviewListView from 'react-native-tableview-list';
rowHeight={50}
renderItem={({ item }) => (
<>
>
)}
/>;
`
If you need a FlatList-like list, pass a single section with the title set to an empty string ('').
Properties marked with an asterisk (\*) are required
| Name | Type | Description |
| ------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| sections \* | Section[] | See below for props |
| renderItem \* | ({ item, index, section }) => ReactElement | Render row |
| keyExtractor | (Row, index, sectionIndex) => string | Needed if data does not have a key or id property |
| rowHeight \* | number | Currently all rows must have the same, fixed height |
| separatorInset | { left?: number, right?: number } | Margin applied to the left and right of each separator |
| separatorColor | string | Color string or PlatformColor |
| cellContainerStyle | style | Customise cell style: do not chagne postion, width, or height |
| onPressRow | ({ item, index, section }) => void | Called when a row is pressed |
| editing | boolean | Enable indicators for moving and deleting rows |
| moveRows | 'none' or 'within-section' | Allows re-ordering of rows |
| onMoveRow | ({ fromSection, fromItem, fromIndex, toSection, toItem, toIndex }) => void | Called when a row is moved (see moveRows) - you MUST udpate your data when this is called |
| onDeleteRow | ({ item, index, section }) => void | Enables swipe to delete - you MUST delete the item when this is called |
| menu | MenuItem[] | See below for props |
| leadingActions | ActionItem[] | See below for props |
| trailingActions | ActionItem[] | See below for props |
| initialNumToRender | number | See VirtualisedList |
| maxToRenderPerBatch | number | See VirtualisedList |
| windowSize | number | See VirtualisedList |
| updateCellsBatchingPeriod | number | See VirtualisedList |
| ListEmptyComponent | ReactElement | Displayed when there's no data |
`ts
type Section
title: string;
key?: string;
data: Row[];
// Enables press and hold interaction
menu?: MenuItem
// Swipe actions for left-hand-side (in LTR layouts)
leadingActions?: ActionItem
// Swipe actions for right-hand-side (in LTR layouts)
trailingActions?: ActionItem
// Allows re-ordering of rows within a section
// MUST be used with onMoveRow
moveRows?: 'none' | 'within-section';
// Used with moveRows property
// You MUST update your data when this is called
onMoveRow: (e: MoveRowEvent
// Enables swipe to delete for section
// You MUST delete the item when this is called
onDeleteRow?: (e: RowEvent
};
type MenuItem
title: string;
key?: string;
// See SF Symbols
systemIcon: string;
// Red text
destructive?: boolean;
// Greyed out
disabled?: boolean;
// Display children inline - rather than as a submenu
inline?: boolean;
// Submenu
children?: MenuItem
// On press
onPress: (e: RowEvent
};
type ActionItem
title: string;
key?: string;
destructive?: boolean;
onPress?: (e: RowEvent
};
type RowEvent
item: Row;
section: Section
index: number;
};
type MoveRowEvent
fromItem: Row;
fromSection: Section
fromIndex: number;
toItem: Row;
toSection: Section
toIndex: number;
};
``
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT