Drag-and-drop -style rearrangable grid view

react-native-sortable-grid

Installation

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

Usage

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

...

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

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

    )
  }
</SortableGrid>

SortableGrid properties

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

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.

SortableGrid's children's properties

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.

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                = { (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>

cmrichards/react-native-sortable-grid