Skip to content

payhereinc/react-native-drag-sort

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 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 }

Performance(GIF)

AutomaticSlidingOnePage AutomaticSlidingThreePage
ScrollFixedAddPage DragDeletePage
dragdelete.gif
SortAndFixedPage OneRowsPage
ezgif.com-resize.gif one-line.gif

API

AutoDragSortableView、DragSortableView
  • dataSource: PropTypes.array.isRequired :

  • parentWidth: PropTypes.number //parent width

  • childrenHeight: PropTypes.number.isRequired, //Each item height

  • childrenWidth: PropTypes.number.isRequired,//Each item width

  • marginChildrenTop: PropTypes.number, //So the item's outermost view adds margin, you can only use this method.

  • marginChildrenBottom: PropTypes.number,

  • marginChildrenLeft : PropTypes.number,

  • marginChildrenRight : PropTypes.number,

  • sortable: PropTypes.bool, //Do not allow dragging

  • onClickItem: PropTypes.func, //click

  • onDragStart: PropTypes.func,

  • onDragEnd : PropTypes.func,

  • onDataChange : PropTypes.func, //This method is called every time the data changes.

  • renderItem : PropTypes.func.isRequired, //render item view

  • fixedItems:PropTypes.array //no remove

  • keyExtractor: keyExtractor: PropTypes.func //(item,index) => key

  • delayLongPress: PropTypes.number,

  • isDragFreely: PropTypes.bool, // Whether to limit the drag space

  • onDragging: PropTypes.func

  • maxScale: PropTypes.number;

  • minOpacity: PropTypes.number;

The following attributes belong only to AutoDragSortableView
  • scaleDuration: PropTypes.number;
  • slideDuration: PropTypes.number;
  • autoThrottle: PropTypes.number;
  • autoThrottleDuration: PropTypes.number;
  • renderHeaderView: PropTypes.element,
  • headerViewHeight: PropTypes.number,
  • renderBottomView: PropTypes.element,
  • bottomViewHeight: PropTypes.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)
    }}
/>

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.6%
  • Objective-C 2.4%
  • Starlark 1.1%
  • Java 0.9%