react-native-yet-another-sortable

react-native-yet-another-sortable

A sortable scrollable grid / list component for React Native.

• Change number of columns and row height on the fly
• Much better performance (especially in debug, compared to alternatives)
• Fast updates
• Controllable order
• Auto-scroll when dragged item is close to the container's border Essentially based on react-native-sortable-grid, it has some improvements and changes, that made me publish it as a separate package instead of making a PR.

Getting Started

Installation

npm install react-native-yet-another-sortable --save

Usage

Check out example project.

import React, { useState, useCallback } from 'react';
import SortableGrid from 'react-native-yet-another-sortable';

const Example = () => {
  const [data] = useState([
    { value: 0, key: 'key0' },
    { value: 1, key: 'key1' },
    { value: 2, key: 'key2' },
  ]);

  const [order, setOrder] = useState(['key2', 'key1', 'key0']);

  const renderItem = useCallback(({ value, color }) => (
    <View style={{ flex: 1 }}>
      <Text>{value}</Text>
    </View>
  ), []);

  return (
    <View style={{ flex: 1 }}>
      <SortableGrid
        order={order}
        data={data}
        renderItem={renderItem}
        onDeactivateDrag={setOrder}
      />
    </View>
  );
};

Props

parameter	type	required	description
order	array of string keys	yes	array of data key properties used to determine entry order
data	array of objects with key property	yes	array of items to be passed to renderItem
rowHeight	number	no	row height
columns	number	no	number of columns per row
activationTreshold	number	no	time in ms required to activate drag on hold
transitionDuration	number	no	time in ms required to move cell to its position on release
renderItem	function	yes	render function for each entry, is passed a data item

Event props

parameter	type	required	description
onActivateDrag	(key, grid) => void	no	Will execute after one holds the item for activateTreshold, before onGrantBlock
onGrantBlock	(event, gestureState, grid) => void	no	Will execute on drag start
onMoveBlock	(event, gestureState, grid) => void	no	Will execute on each move
onReleaseBlock	(event, gestureState, grid) => void	no	Will execute on drag release
onDeactivateDrag	(order, grid) => void	no	Will execute on active item drop, after onReleaseBlock, with new order as an argument

Data item props

parameter	type	required	description
inactive	boolean	no	Makes block not draggable
key	string	yes	key used to order items

Development

In order to develop the application or build android .apk from the sources one should:

1. Clone this repository
2. Install package dependencies with npm install
3. Navigate to example folder: cd example
4. Install example project dependencies npm install
5. Run Metro bundler with react-native start
6. Connect an emulator or physical device via adb, like this (tested with mEMU):
   • adb connect 127.0.0.1:21503
   • adb reverse tcp:8081 tcp:8081
7. Build and watch with react-native run-android, changes from src directory are picked automatically because of example's metro and babel configurations.

Contributions

PR are always welcome!

Todos

• Better scroll-on-drag behaviour (smooth scroll without ugly timeouts and large scroll results in the dragged block trembling)
• Refactoring while perserving the performance
• Actual tests