jacobp100 / react-native-tableview-list

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.

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

react-native-tableview-list's Issues

integration with FlashList or Wishlist?

Can this library be integrated with Shopify's FlashList or Margelo's WishList? I'm thinking of having the speeds of FlashList with these native gestures

Drag and Drop

I think it would be pretty trivial to add drag and drop. I can take a crack at it but I am rusty with Objective-C.

Is this something you are willing to support in this library?

Here are the docs on what it will take to add it.

Non-Custom Cell Support

Add support for the default iOS table cells

Basically fork the main JS component, remove all the windowing code, add a title and an optional subtitle prop to sectionData

On the iOS side, either make a base class of RCTTableViewList and subclasses for the custom/non-custom cells - or just make that class handle both if it doesn't impact readability too much

Handle configuring `menu`, `onDeleteRow` per row

One idea is for each property to be able to be set/unset on the component at the top level, in the section, and/or in the row. I.e.

<TableView
  onDeleteRow={fn1}
  sections={[
    {
      ...section,
      onDeleteRow: fn2,
      data: [
        {
          onDeleteRow: fn3,
          value: "something",
        },
      ],
    },
  ]}
/>

So fn3 overrides fn2 overrides fn1 - and if fn3 was undefined, it would unset it (so the row isn't deletable)

This needs to be done for

• onDeleteRow
• menu

This needs the type section.data to be refactored to allow these props

The advantage of this - rather than having things like the menu prop being a function - is that we can minimise the data sent over the bridge.

Android Support