Skip to content

mochixuan/react-native-drag-sort

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-drag-sort

Drag and drop sort control for react-native

GitHub license npm

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
Anysize Anysize
AutomaticSlidingOnePage AutomaticSlidingThreePage
ScrollFixedAddPage DragDeletePage
dragdelete.gif
SortAndFixedPage OneRowsPage
ezgif.com-resize.gif one-line.gif

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