Drag and drop sort control for react-native
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 |
|---|---|
| AutomaticSlidingOnePage | AutomaticSlidingThreePage |
|---|---|
| ScrollFixedAddPage | DragDeletePage |
|---|---|
| SortAndFixedPage | OneRowsPage |
|---|---|
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 |
| 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 |
| 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 |
<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 =======