Socket
Socket
Sign inDemoInstall

react-native-drag-sort

Package Overview
Dependencies
0
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-drag-sort

Drag and drop sort control for react-native


Version published
Maintainers
1
Weekly downloads
2,498
decreased by-11.17%

Weekly downloads

Readme

Source

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)

AnyThreePageAnyThreePage
AnysizeAnysize
AutomaticSlidingOnePageAutomaticSlidingThreePage
ScrollFixedAddPageDragDeletePage
dragdelete.gif
SortAndFixedPageOneRowsPage
ezgif.com-resize.gifone-line.gif

API

AutoDragSortableView、DragSortableView

isRequired if there is a * in the name field

nameProptypesDescription
dataSource *array
parentWidthnumberparent width
childrenHeight *numberEach item height
childrenWidth *numberEach item width
marginChildrenTopnumberSo the item's outermost view adds margin, you can only use this method.
marginChildrenBottomnumber
marginChildrenLeftnumber
marginChildrenRightnumber
sortableboolDo not allow dragging
onClickItemfuncclick
onDragStartfunc
onDragEndfunc
onDataChangefuncThis method is called every time the data changes.
renderItem *funcrender item view
fixedItemsarrayno remove
keyExtractorfunc(item,index) => key
delayLongPressnumber
isDragFreelyboolWhether to limit the drag space
onDraggingfunc
maxScalenumber
minOpacitynumber
The following attributes belong only to AutoDragSortableView
nameProptypesDescription
scaleDurationnumber
slideDurationnumber
autoThrottlenumber
autoThrottleDurationnumber
renderHeaderViewelement
headerViewHeightnumber
scrollIndicatorInsets({top:number, left:number, bottom:number, right:number})
renderBottomViewelement
bottomViewHeightnumber
onScrollListener(event: NativeSyntheticEvent) => void
onScrollRef(ref: any) => void
AnySizeDragSortableView
nameProptypesDescription
dataSource *array
keyExtractorfunc.isRequired(item,index) => key
renderItem *funcrender item view
onDataChangefuncThis method is called every time the data changes.
renderHeaderViewelement
headerViewHeightnumber
renderBottomViewelement
bottomViewHeightnumber
autoThrottlenumber
autoThrottleDurationnumber
onDragEndfunc
scrollIndicatorInsets({top:number, left:number, bottom:number, right:number})
onScrollListener(event: NativeSyntheticEvent) => void
onScrollRef(ref: any) => void
areaOverlapRationumberMust be greater than 0.5
movedWrapStyleStylePropstyle
childMarginTopnumber
childMarginBottomnumber
childMarginLeftnumber
childMarginRightnumber

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

Keywords

FAQs

Last updated on 29 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc