Renders items as grid by passing each item to renderItem. Each item must have unique key property.
Cell order must be provided in order array of keys.
After user rearranges grid cells by dragging, onDeactivateDrag callback gets called with updated order as an argument.
Activation animation can be customized with animateActiveStyle and getActiveStyle props.
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)}
/>
);
};
| Type Parameter |
T |
K extends React.Key |
new SortableGrid<T, K>(props: SortableGridProps): SortableGrid<T, K>;
SortableGrid<T, K>
React.PureComponent<SortableGridProps<T, K>>.constructor
new SortableGrid<T, K>(props: SortableGridProps, context: any): SortableGrid<T, K>;
SortableGrid<T, K>
React.PureComponent<SortableGridProps<T, K>>.constructor
static defaultProps: Partial<Omit<SortableGridProps<any, any>, "renderItem" | "items" | "order">>;
| Type Parameter |
K extends React.Key |
| Property |
Type |
Description |
dragDisabled? |
boolean |
makes cell not draggable, still allowing it to be swapped with other cells |
key |
K |
key used to order items |
| Type Parameter |
T |
K extends React.Key |
| Property |
Type |
Description |
activationThreshold |
number |
hold time in ms required to activate drag |
animateActiveStyle |
(animation: Value) => number |
animates animation value, returns requestAnimationFrame identifier or nothing for cleanup, use it to achieve custom activation effects. If not provided defaults to: (animation) => requestAnimationFrame(() => { animation.setValue(1); Animated.spring(animation, { toValue: 0, velocity: 2000, tension: 2000, friction: 5, useNativeDriver: true }).start(); }) |
columns |
number |
number of columns per row |
getActiveStyle |
(animation: Value) => CSSProperties |
provides styles for cell from animation, use it to achieve custom activation effects. If not provided, defaults to rotation and elevation: (animation) => ({ transform: [ { rotate: animation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '1deg'] }) } ], elevation: 10, zIndex: 1, }) |
items |
T & Item<K>[] |
array of items each to be passed to renderItem |
onActivateDrag |
(key: K, gridInstance: SortableGrid<T, K>) => any |
will execute after one holds the item for activateTreshold ms, before onGrantBlock, return truthy value to override default behaviour |
onDeactivateDrag |
(order: K[], gridInstance: SortableGrid<T, K>) => any |
will execute on active item drop, after onReleaseBlock, with new order array as argument, return truthy value to override default behaviour |
onGrantBlock |
(...args: [GestureResponderEvent, PanResponderGestureState, SortableGrid<T, K>]) => any |
will execute on drag start, return truthy value to override default behaviour |
onMoveBlock |
(...args: [GestureResponderEvent, PanResponderGestureState, SortableGrid<T, K>]) => any |
will execute on every move, return truthy value to override default behaviour |
onReleaseBlock |
(...args: [GestureResponderEvent, PanResponderGestureState, SortableGrid<T, K>]) => any |
will execute on drag release, return truthy value to override default behaviour |
order |
K[] |
array of item key properties specifying items order in grid |
pinned |
Set<K> |
set of keys for cells that will not be swapped with others |
renderItem |
(item: T & Item<K>) => ReactNode |
render function for each item |
rowHeight |
number |
row height in pixels |
scrollStep |
number |
number of pixels to autoscroll when item is held close to upper or lower boundary of container |
transitionDuration |
number |
time in ms required to move cell to its position on release or swap |