Drag and drop sort control for react-native
npm install react-native-drag-sort!GitHub license

``bash
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save
export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }
`
> 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.
AnyThreePage | AnyThreePage
| ------ | ----------- |
!Anysize | !Anysize
AutomaticSlidingOnePage | AutomaticSlidingThreePage
| ------ | ----------- |
|  | 
ScrollFixedAddPage | DragDeletePage
| ------ | ----------- |
|  | !dragdelete.gif
SortAndFixedPage | OneRowsPage
| ------ | ----------- |
| !ezgif.com-resize.gif | !one-line.gif
#### 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
|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
|onScrollRef | (ref: any) => void
|areaOverlapRatio|number| Must be greater than 0.5
|movedWrapStyle| StyleProp
|childMarginTop|number
|childMarginBottom|number
|childMarginLeft|number
|childMarginRight|number
`jsx
parentWidth={parentWidth}
childrenWidth= {childrenWidth}
childrenHeight={childrenHeight}
keyExtractor={(item,index)=> item.id}
renderItem={(item,index)=>{
return this.renderItem(item,index)
}}
/>
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()
}
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 (
this.sortableViewRef.current.startTouch(item, index) // 2、isRequired }}
onPressOut = {() => {
this.sortableViewRef.current.onPressOut() 3、isRequired
}}
>
<...>
)
}
// ====== AnySizeDragSortableView end =======
``