react-native-tableview-list

SectionList-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 |

Installation

``sh
npm install react-native-tableview-list
`

Usage

`jsx
import TableviewListView from 'react-native-tableview-list';

sections={[{ title: 'title', key: 'key', data: [1, 2, 3] }]}
rowHeight={50}
renderItem={({ item }) => (
<>
{item}


)}
/>;
`

If you need a FlatList-like list, pass a single section with the title set to an empty string ('').

$3

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 |

$3

`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) => void;
// Enables swipe to delete for section
// You MUST delete the item when this is called
onDeleteRow?: (e: RowEvent) => void;
};

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) => void;
};

type ActionItem = {
title: string;
key?: string;
destructive?: boolean;
onPress?: (e: RowEvent) => void;
};

type RowEvent = {
item: Row;
section: Section;
index: number;
};

type MoveRowEvent = {
fromItem: Row;
fromSection: Section;
fromIndex: number;
toItem: Row;
toSection: Section;
toIndex: number;
};
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT