<commit_before>
<h3 align="center" style="margin-bottom: 21px;">
  Drag-and-drop -style rearrangable grid view
</h3>

<p align="center">
  <img alt="Issue Stats" src="http://i.giphy.com/gcB8YYVtL2BsA.gif">
</p>

# react-native-sortable-grid

[![Join the chat at https://gitter.im/react-native-sortable-grid/Lobby](https://badges.gitter.im/react-native-sortable-grid/Lobby.svg)](https://gitter.im/react-native-sortable-grid/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![npm](https://img.shields.io/npm/dm/react-native-sortable-grid.svg)]()
[![Sponsored by Leonidas](https://img.shields.io/badge/sponsored%20by-leonidas-389fc1.svg)](https://leonidasoy.fi/opensource)
[![Packagist](https://img.shields.io/packagist/l/ollija/react-native-sortable-grid.svg)]()
[![David](https://img.shields.io/david/ollija/react-native-sortable-grid.svg)]()
[![David](https://img.shields.io/david/dev/ollija/react-native-sortable-grid.svg)]()

## 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)

 -  ``` 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, but not pressed for long enough to activate the drag.


## 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 ...
  ]

}
```
<commit_msg>Readme update about double taps<commit_after>
<h3 align="center" style="margin-bottom: 21px;">
  Drag-and-drop -style rearrangable grid view
</h3>

<p align="center">
  <img alt="Issue Stats" src="http://i.giphy.com/gcB8YYVtL2BsA.gif">
</p>

# react-native-sortable-grid

[![Join the chat at https://gitter.im/react-native-sortable-grid/Lobby](https://badges.gitter.im/react-native-sortable-grid/Lobby.svg)](https://gitter.im/react-native-sortable-grid/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![npm](https://img.shields.io/npm/dm/react-native-sortable-grid.svg)]()
[![Sponsored by Leonidas](https://img.shields.io/badge/sponsored%20by-leonidas-389fc1.svg)](https://leonidasoy.fi/opensource)
[![Packagist](https://img.shields.io/packagist/l/ollija/react-native-sortable-grid.svg)]()
[![David](https://img.shields.io/david/ollija/react-native-sortable-grid.svg)]()
[![David](https://img.shields.io/david/dev/ollija/react-native-sortable-grid.svg)]()

## 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 ...
  ]

}
```

{'fraction_non_alphanumeric': 0.14589971490860304, 'fraction_numerical': 0.006540332047627034, 'mean_word_length': 3.7597765363128492, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3557364', 'n_tokens_mistral': 2001, 'n_tokens_neox': 1891, 'n_words': 546}