react-native-drag-sort

react-native-drag-sort

Drag and drop sort control for react-native

Version Iteration

• English Version Iteration
• 中文版本迭代

Installation

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	AnyThreePage

AutomaticSlidingOnePage	AutomaticSlidingThreePage

ScrollFixedAddPage	DragDeletePage

SortAndFixedPage	OneRowsPage

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) => 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) => void
onScrollRef	(ref: any) => void
areaOverlapRatio	number	Must be greater than 0.5
movedWrapStyle	StyleProp	style
childMarginTop	number
childMarginBottom	number
childMarginLeft	number
childMarginRight	number

Example

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