## Classes ### SortableGrid 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 ( ({value})} onDeactivateDrag={(order) => setOrder(order)} /> ); }; ``` #### Extends - `PureComponent`\<[`SortableGridProps`](#sortablegridprops)\<`T`, `K`\>\> #### Type Parameters | Type Parameter | | ------ | | `T` | | `K` *extends* `React.Key` | #### Constructors ##### Constructor ```ts new SortableGrid(props: SortableGridProps): SortableGrid; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `props` | [`SortableGridProps`](#sortablegridprops) | ###### Returns [`SortableGrid`](#sortablegrid)\<`T`, `K`\> ###### Inherited from ```ts React.PureComponent>.constructor ``` ##### Constructor ```ts new SortableGrid(props: SortableGridProps, context: any): SortableGrid; ``` ###### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `props` | [`SortableGridProps`](#sortablegridprops) | - | | `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. | ###### Returns [`SortableGrid`](#sortablegrid)\<`T`, `K`\> ###### Inherited from ```ts React.PureComponent>.constructor ``` #### Properties ##### defaultProps ```ts static defaultProps: Partial, "renderItem" | "items" | "order">>; ``` ## Interfaces ### Item #### Type Parameters | Type Parameter | | ------ | | `K` *extends* `React.Key` | #### Indexable ```ts [key: string]: any ``` #### Properties | 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 | *** ### SortableGridProps #### Type Parameters | Type Parameter | | ------ | | `T` | | `K` *extends* `React.Key` | #### Properties | 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`](#item)\<`K`\>[] | array of items each to be passed to `renderItem` | | `onActivateDrag` | (`key`: `K`, `gridInstance`: [`SortableGrid`](#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`](#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`](#sortablegrid)\<`T`, `K`\>\]) => `any` | will execute on drag start, return truthy value to override default behaviour | | `onMoveBlock` | (...`args`: \[`GestureResponderEvent`, `PanResponderGestureState`, [`SortableGrid`](#sortablegrid)\<`T`, `K`\>\]) => `any` | will execute on every move, return truthy value to override default behaviour | | `onReleaseBlock` | (...`args`: \[`GestureResponderEvent`, `PanResponderGestureState`, [`SortableGrid`](#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`](#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 |