react-native-yet-another-sortable

Features

A sortable scrollable grid / list component for React Native, essentially based on react-native-sortable-grid. Does not require react-native-reanimated.

• Change number of columns and row height on the fly
• Performant item additions, deletions, order shuffles, container width/height changes
• Controllable order
• Allows for not-swappable and not-draggable grid elements
• Auto-scroll when dragged item is close to container's borders

Installation

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

Usage

Check out example project.

Or check a minimal example to copy-paste:

Minimal SortableGrid example

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { SortableGrid } from 'react-native-yet-another-sortable';
const Component = () => {
  const [ items, setItems ] = useState(Array.from({ length: 5 }, (_, i) => ({ value: i, key: i })));
  const [ order, setOrder ] = useState(items.map(({ key }) => key));
  return (
    <SortableGrid
      items={items}
      order={order}
      renderItem={({ value }) => (<View><Text>{value}</Text></View>)}
      onDeactivateDrag={(order) => setOrder(order)}
    />
  );
};

API

Autogenerated documentation is here.

Q&A

How make certain items not draggable?

When passing items array set dragDisabled property to true for those items that you don't want to be draggable.

How to make certain items fixed?

Provide a fixed prop with a Set of keys.

How to use custom activation animation or add haptic feedback?

1. Use animateActiveStyle property by providing function to animate activation progress animation like this:

  (animation) => requestAnimationFrame(() => {
    animation.setValue(1);
    Animated.spring(animation, { toValue: 0, velocity: 2000, tension: 2000, friction: 5, useNativeDriver: true }).start();
  })

2. Use getActiveStyle property by providing function that maps the animation to active Cell style:

  (animation) => ({
    transform: [ { rotate: animation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '1deg'] }) } ],
    elevation: 10,
    zIndex: 1,
  })

Other side-effects could be performed in onActivateDrag callback.

Development

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

1. Clone this repository
2. Navigate to parent directory and install dev dependencies with npm ci for linting npm run lint and typescript typechecking npm run typecheck.
3. Navigate to example folder: cd example
4. Install example project dependencies npm ci, since library has only peer dependencies
5. Run Metro bundler with npm run start
6. Connect physical device or an emulator 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 npm run-android, changes from src directory are picked automatically because of example metro and babel configurations.

Note: example project is configured in a way, that may cause issues if you save anything as a regular dependency in parent library

Contributions

PR are always welcome!