Need help with react-native-drag-sort?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mochixuan
341 Stars 89 Forks Apache License 2.0 58 Commits 10 Opened issues

Description

🔥🔥🔥Drag and drop sort control for react-native

Services available

!
?

Need anything else?

Contributors list

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 }

Performance(GIF)

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

Example

 item.id}
    renderItem={(item,index)=>{
        return this.renderItem(item,index)
    }}
/>

item.id} renderItem={(item,index)=>{ return this.renderItem(item,index) }} />

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.