# react-native-drag-sort-cr

> Drag and drop sort control for react-native

Latest version **2.7.3** (published 2021-09-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-drag-sort-cr
pnpm add react-native-drag-sort-cr
yarn add react-native-drag-sort-cr
bun add react-native-drag-sort-cr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.3 |
| Published | 2021-09-27 |
| First published | 2021-09-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 101.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mochixuan |
| Maintainers | corupta |
| Keywords | drag, drop, sort, react, react-component, ios, android, react-native, list |

## Links

- npm: https://www.npmjs.com/package/react-native-drag-sort-cr
- Repository: https://github.com/corupta/react-native-drag-sort
- Homepage: https://github.com/corupta/react-native-drag-sort#readme
- Issues: https://github.com/corupta/react-native-drag-sort/issues
- npm.io page: https://npm.io/package/react-native-drag-sort-cr

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.7.3 (latest) — 2021-09-27
- 2.7.2 — 2021-09-27
- 2.7.1 — 2021-09-27
- 2.7.0 — 2021-09-24
- 2.6.2 — 2021-09-24
- 2.6.1 — 2021-09-22
- 2.6.0 — 2021-09-22
- 2.5.2 — 2021-09-22
- 2.5.1 — 2021-09-22
- 2.5.0 — 2021-09-22
- 2.4.5 — 2021-09-21

## README

# react-native-drag-sort
Drag and drop sort control for react-native

![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)
[![npm](https://img.shields.io/npm/v/react-native-drag-sort.svg?style=flat)](https://npmjs.com/package/react-native-drag-sort)

### Version Iteration
- [English Version Iteration](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_History.md) 
- [中文版本迭代](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_ZH_History.md)


### Installation

```bash
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save 

export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }
```

### Tip

> Use priority: DragSortableView > AutoDragSortableView > AnySizeDragSortableView

- 1、If the width and height are fixed and there is no need to slide, use DragSortableView.
- 2、If the width and height are fixed and you need to slide, use AutoDragSortableView.
- 3、If the width and height are arbitrary and need to slide, please use AnySizeDragSortableView.

### Performance（GIF）

[AnyThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AnyThreePage.js) | [AnyThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AnyThreePage.js)
| ------ | ----------- | 
![Anysize](https://github.com/mochixuan/react-native-drag-sort/blob/master/img/any1.gif?raw=true) | ![Anysize](https://github.com/mochixuan/react-native-drag-sort/blob/master/img/any2.gif?raw=true)

[AutomaticSlidingOnePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingOnePage.js) | [AutomaticSlidingThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingThreePage.js)
| ------ | ----------- | 
| ![](https://user-gold-cdn.xitu.io/2020/2/15/170487f5ce137e15?w=240&h=514&f=gif&s=2527386) | ![](https://user-gold-cdn.xitu.io/2020/2/15/1704896e0729f8b7?w=240&h=514&f=gif&s=4958289) 

[ScrollFixedAddPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/ScrollFixedAddPage.js) | [DragDeletePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/DragDeletePage.js)  
| ------ | ----------- |
| ![](https://user-gold-cdn.xitu.io/2020/2/10/1702ea81299f097d?w=240&h=400&f=gif&s=863218)  | ![dragdelete.gif](https://upload-images.jianshu.io/upload_images/2646598-4d22ddb8f92a6563.gif?imageMogr2/auto-orient/strip)  


[SortAndFixedPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/SortAndFixedPage.js)  | [OneRowsPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/OneRowsPage.js)  
| ------ | ----------- | 
| ![ezgif.com-resize.gif](https://upload-images.jianshu.io/upload_images/2646598-405b01d61547c972.gif?imageMogr2/auto-orient/strip)  | ![one-line.gif](https://upload-images.jianshu.io/upload_images/2646598-dd17c76291514316.gif?imageMogr2/auto-orient/strip)  

### API

#### AutoDragSortableView、DragSortableView

isRequired if there is a * in the name field

|name|Proptypes|Description|
----|----|-----|
|**dataSource** *|array|
|**parentWidth**|number|parent width
|**childrenHeight** *|number|Each item height
|**childrenWidth** *|number|Each item width
|**marginChildrenTop**|number|So the item's outermost view adds margin, you can only use this method.
|**marginChildrenBottom**|number
|**marginChildrenLeft**|number
|**marginChildrenRight**|number
|**sortable**|bool|Do not allow dragging
|**onClickItem**|func|click
|**onDragStart**|func
|**onDragEnd**|func
|**onDataChange**|func|This method is called every time the data changes.
|**renderItem** *|func|render item view
|**fixedItems**|array|no remove
|**keyExtractor**|func|(item,index) => key
|**delayLongPress**|number
|**isDragFreely**|bool|Whether to limit the drag space
|**onDragging**|func
|**maxScale**|number
|**minOpacity**|number

#### The following attributes belong only to AutoDragSortableView

|name|Proptypes|Description|
----|----|-----|
|**scaleDuration**|number
|**slideDuration**|number
|**autoThrottle**|number
|**autoThrottleDuration**|number
|**renderHeaderView**|element
|**headerViewHeight**|number
|**scrollIndicatorInsets**|({top:number, left:number, bottom:number, right:number})|
|**renderBottomView**|element
|**bottomViewHeight**|number
|**onScrollListener** | (event: NativeSyntheticEvent<NativeScrollEvent>) => void 
|**onScrollRef** | (ref: any) => void

##### AnySizeDragSortableView

|name|Proptypes|Description|
----|----|-----|
|**dataSource** *|array|
|**keyExtractor**|func.isRequired|(item,index) => key
|**renderItem** *|func|render item view
|**onDataChange**|func|This method is called every time the data changes.
|**renderHeaderView**|element
|**headerViewHeight**|number
|**renderBottomView**|element
|**bottomViewHeight**|number
|**autoThrottle**|number
|**autoThrottleDuration**|number
|**onDragEnd**|func
|**scrollIndicatorInsets**|({top:number, left:number, bottom:number, right:number})|
|**onScrollListener** | (event: NativeSyntheticEvent<NativeScrollEvent>) => void 
|**onScrollRef** | (ref: any) => void
|**areaOverlapRatio**|number| Must be greater than 0.5
|**movedWrapStyle**| StyleProp<ViewStyle> |style
|**childMarginTop**|number
|**childMarginBottom**|number
|**childMarginLeft**|number
|**childMarginRight**|number

### Example

```jsx
<DragSortableView
    dataSource={this.state.data}
    parentWidth={parentWidth}
    childrenWidth= {childrenWidth}
    childrenHeight={childrenHeight}
    keyExtractor={(item,index)=> item.id}
    renderItem={(item,index)=>{
        return this.renderItem(item,index)
    }}
/>
    
<AutoDragSortableView
    dataSource={this.state.data}
    parentWidth={parentWidth}
    childrenWidth= {childrenWidth}
    childrenHeight={childrenHeight}
    keyExtractor={(item,index)=> item.id}
    renderItem={(item,index)=>{
        return this.renderItem(item,index)
    }}
/>

// ====== AnySizeDragSortableView start =======

constructor(props) {
    super(props);
    this.sortableViewRef = createRef()
}

<AnySizeDragSortableView
    ref={this.sortableViewRef}
    dataSource={items}
    keyExtractor={(item) => item.text} // 1、isRequired
    renderItem={this._renderItem}
    onDataChange={(data, callback)=> {
        this.setState({items: data},()=>{
            callback() // isRequired
        })
    }}
/>

_renderItem = (item, index, isMoved) => {
    return (
    	<TouchableOpacity
	        onLongPress={() => {
	            this.sortableViewRef.current.startTouch(item, index) // 2、isRequired	        }}
	        onPressOut = {() => {
	        	this.sortableViewRef.current.onPressOut() 3、isRequired
	        }}
	      >
      	<...>
      </TouchableOpacity>
    )
}


// ====== AnySizeDragSortableView end =======
```

---
_Source: https://npm.io/package/react-native-drag-sort-cr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._