npm i react-native-sortable-grid --save

import SortableGrid from 'react-native-sortable-grid'

...

<SortableGrid>
  {
    ['a', 'b', 'c'].map( (letter, index) =>

      <View key={index}>
        <Text>{letter}</Text>
      </View>

    )
  }
</SortableGrid>

• style Object

Custom 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 with overflow-property on Android)

• blockTransitionDuration Number

How long should the transition of a passive block take when the active block takes its place (milliseconds)

• activeBlockCenteringDuration Number

How long should it take for the block that is being dragged to seek its place after it's released (milliseconds)

• itemsPerRow Number

How many items should be placed on one row

• itemWidth Number

If set, itemsPerRow will be calculated to fit items of this size

• itemHeight Number

When used together with itemsPerRow, sets the size of a block to something other than the default square

• dragActivationTreshold Number

How long must the user hold the press on the block until it becomes active and can be dragged (milliseconds)

• doubleTapTreshold Number

How 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 Object

Custom 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.

• toggleDeleteMode accepts no arguments

Calling this will toggle item deletion mode on/off. Will return object { deleteModeOn: true/false }.

• onTap Callback

Function that is executed when the block is tapped once, but not pressed for long enough to activate the drag.

• onDoubleTap Callback

Function 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.

Object {

  itemOrder: Array [
    0: Object {
      key: "1"
      order: 0
      ref: null
    }
    1: Object {
      key: "5"
      order: 1
      ref: null
    }
    n: Object ...
  ]

}

 <SortableGrid
   blockTransitionDuration      = { 400 }
   activeBlockCenteringDuration = { 200 }
   itemsPerRow                  = { 4 }
   dragActivationTreshold       = { 200 }
   onDragRelease                = { (itemOrder) => console.log("Drag was released, the blocks are in the following order: ", itemOrder) }
   onDragStart                  = { ()          => console.log("Some block is being dragged now!") } >

   {
     ['a', 'b', 'c'].map( (letter, index) =>

       <View key={index} onTap={() => console.log("Item number:", index, "was tapped!") }>
         <Text>{letter}</Text>
       </View>

     )
   }

 </SortableGrid>

Basic item deletion
toggleDeleteMode() is called during onTap in this example

Custom block animation can be passed to the grid