Drag-and-drop -style rearrangable grid view
react-native-sortable-grid
Forked from ollija/react-native-sortable-grid, because it's not in maintained
Installation
npm i react-native-sort-grid --save
Usage
// ... <SortableGrid> 'a' 'b' 'c' </SortableGrid>
SortableGrid properties
-
style
ObjectCustom styles to override or complement the sortableGrid native style.
- When a row becomes empty of items due to item deletion, the height of the grid is smoothly adjusted to fit the new rows. However, passing
flex:1
inside the style prop will cause the grid to fill up the available space and not adjust height when rows become empty. - User cannot drag items outside of the grid. Assigning
flex:1
will expand the grid, therefore giving more space for the items to be dragged in. - When deleting items from the last row on Android, the items can get clipped. You can workaround this by giving the grid
bottomPadding
. (This is a known issue withoverflow
-property on Android)
- When a row becomes empty of items due to item deletion, the height of the grid is smoothly adjusted to fit the new rows. However, passing
-
blockTransitionDuration
NumberHow long should the transition of a passive block take when the active block takes its place (milliseconds)
-
activeBlockCenteringDuration
NumberHow long should it take for the block that is being dragged to seek its place after it's released (milliseconds)
-
itemsPerRow
NumberHow many items should be placed on one row
-
itemWidth
NumberIf set, itemsPerRow will be calculated to fit items of this size
-
itemHeight
NumberWhen used together with itemsPerRow, sets the size of a block to something other than the default square
-
dragActivationThreshold
NumberHow long must the user hold the press on the block until it becomes active and can be dragged (milliseconds)
-
doubleTapThreshold
NumberHow long will the execution wait for the second tap before deciding it was a single tap (milliseconds). Will be omitted if no onDoubleTap-property is given to the item being tapped - In which case single-tap callback will be executed instantly
-
onDragStart
Callback (activeItem)Function that is called when the dragging starts. This can be used to lock other touch responders from listening to the touch such as ScrollViews and Swipers.
-
onDragRelease
Callback (itemOrder)Function that is executed after the drag is released. Will return the new item order.
-
onDeleteItem
Callback (item)Function that is executed item is deleted. Will return the properties of the deleted item.
-
dragStartAnimation
ObjectCustom animation to override the default wiggle. Must be an object containing a key
transform
, which is an array of transformations. Read about transforms and animations and see the example to learn how to use this.
SortableGrid methods
-
toggleDeleteMode
accepts no argumentsCalling this will toggle item deletion mode on/off. Will return object
{ deleteModeOn: true/false }
.
SortableGrid's children's properties
-
onTap
CallbackFunction that is executed when the block is tapped once, but not pressed for long enough to activate the drag.
-
onDoubleTap
CallbackFunction that is executed when the block is double tapped within a timeframe of
doubleTapTreshold`(default 150ms). Assigning this will delay the execution of
onTap```. Omitting this will cause all taps to be handled as single taps, regardless of their frequency. -
inactive
Boolean
Flag to mark a child node as being inactive. If set, no touch events will be fired when users interact with the node.
onDragRelease return value looks like this:
Object {
itemOrder: Array [
0: Object {
key: "1"
order: 0
ref: null
}
1: Object {
key: "5"
order: 1
ref: null
}
n: Object ...
]
}
Full SortableGrid example:
<SortableGrid blockTransitionDuration = 400 activeBlockCenteringDuration = 200 itemsPerRow = 4 dragActivationTreshold = 200 onDragRelease = console onDragStart = console > 'a' 'b' 'c' </SortableGrid>
Demos
Basic item deletion
toggleDeleteMode() is called during onTap in this example
Custom block animation can be passed to the grid
Smooth resizing of the grid when the last row becomes empty:
No grid resizing if the grid has flex:1 assigned:
The item drag is constrained within the grid:
With flex:1 there is more space to drag: