Skip to content

jacobp100/react-native-tableview-list

Repository files navigation

react-native-tableview-list

Part of the TechniCalc Project

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

npm install react-native-tableview-list

Usage

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

<TableviewListView
  sections={[{ title: 'title', key: 'key', data: [1, 2, 3] }]}
  rowHeight={50}
  renderItem={({ item }) => (
    <>
      <Text>{item}</Text>
      <View style={styles.lozenge} />
    </>
  )}
/>;

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

Props

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
initialNumToRender number See VirtualisedList
maxToRenderPerBatch number See VirtualisedList
windowSize number See VirtualisedList
updateCellsBatchingPeriod number See VirtualisedList
ListEmptyComponent ReactElement Displayed when there's no data

Types

type Section<Row> = {
  title: string;
  key?: string;
  data: Row[];
  // Enables press and hold interaction
  menu?: MenuItem<Row>[];
  // 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<Row>) => void;
  // Enables swipe to delete for section
  // You **MUST** delete the item when this is called
  onDeleteRow?: (e: RowEvent<Row>) => void;
};

type MenuItem<Row> = {
  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<Row>[];
  // On press
  onPress: (e: RowEvent<Row>) => void;
};

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

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

Contributing

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

License

MIT