mochixuan / react-native-drag-sort Goto Github PK
View Code? Open in Web Editor NEW🔥🔥🔥Drag and drop sort control for react-native
License: Apache License 2.0
🔥🔥🔥Drag and drop sort control for react-native
License: Apache License 2.0
<ScrollView
ref={scrollView => (this.scrollView = scrollView)}
scrollEnabled={scrollEnabled}
style={styles.container}>
<DraggableFlatList
dataSource={fundData.slice()}
parentWidth={parentWidth}
childrenWidth={childrenWidth}
childrenHeight={childrenHeight}
scaleStatus={'scaleY'}
onDragStart={(startIndex, endIndex) => {
model.setScrollEnable(false)
}}
onDragEnd={startIndex => {
model.setScrollEnable(true)
}}
onDataChange={data => {
if (data.length !== fundData.length) {
model.resetData(data)
}
}}
keyExtractor={(item, index) => item.name}
onClickItem={(data, item, index) => {}}
renderItem={(item, index) => {
return this.renderItem(item, index)
}}
/>
</ScrollView>
How can auto scroll down or up ScrollView when drag item to the bottom or top of screen?
Sortable = {false} does not prevent DragSortableView from dragging
<DragSortableView
sortable={false}
dataSource={this.state.appList}
parentWidth={parentWidth}
childrenWidth={childrenWidth}
childrenHeight={childrenHeight}
marginChildrenRight={marginChildrenRight}
marginChildrenLeft={marginChildrenLeft}
marginChildrenTop={marginChildrenTop}
marginChildrenBottom={marginChildrenBottom}
onClickItem={(data, item, index) => { this._onPressItem(item) }}
renderItem={(item, index) =>
<View style={{ width: childrenWidth, height: childrenHeight }}>
}
/>
"dependencies": {
"native-base": "^2.2.1",
"react": "^16.0.0-alpha.12",
"react-dom": "^15.6.1",
"react-native": "0.52.0",
"react-native-base64": "0.0.2",
"react-native-cached-image": "^1.4.3",
"react-native-check-box": "^2.1.6",
"react-native-device-info": "^0.22.2",
"react-native-dialog": "^5.1.0",
"react-native-doc-viewer": "^2.7.8",
"react-native-drag-sort": "^1.0.2",
"react-native-fingerprint-scanner": "^2.5.0",
"react-native-firebase": "4.3.0",
"react-native-keyboard-aware-scroll-view": "^0.3.0",
"react-native-keyboard-listener": "^1.1.0",
"react-native-keychain": "^1.2.1",
"react-native-modal": "^6.5.0",
"react-native-modal-popover": "0.0.10",
"react-native-navigation": "1.1.483",
"react-native-permissions": "^1.1.1",
"react-native-segmented-control-tab": "^3.3.1",
"react-native-version-number": "^0.3.4",
"react-navigation": "^1.0.0-beta.11",
"sprintf-js": "^1.1.1",
"string": "^3.3.3"
},
Hi
your package is grateful. thanks. but it is need to hold long. how to can decrease time press time?
please add a "delayLongPress" props to handle longpress time.
不知道能否实现子项不限制等宽等高?
The items that are rendered don't fit into one view, so I put the DragSortableView
inside a ScrollView
. However, when I drag one item, pulling it down (in order to see other items), the page doesn't scroll.
React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 1.06 GB / 11.63 GB
Shell: 5.4.2 - /bin/zsh
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.19.1 - /usr/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
npmPackages:
react: 16.8.3 => 16.8.3
react-native: ^0.59.8 => 0.59.10
"react-native-drag-sort": "^1.3.4",
react-native: "0.62.2",
react-native-drag-sort: "2.1.0"
Platform: IOS
Animated: useNativeDriver
was not specified. This is a required option and must be explicitly set to true
or false
I just updated to the latest build and I now get this error when trying to load the component. I haven't changed anything within the class...just updated the component. I've cleaned and rebuilt the app (this is on ios btw).
The error is:
2020-03-09 16:47:24.435 [error][tid:com.facebook.react.JavaScript] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Context.Consumer`.
This error is located at:
in RCTScrollContentView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in ScrollView (at KeyboardAwareHOC.js:517)
in KeyboardAwareScrollView (at Content.js:66)
in Content (at connectStyle.js:392)
in Styled(Content) (at Pictures/index.tsx:130)
in Pictures (created by Context.Consumer)
in withNavigation(Pictures) (at PicturesScreen.tsx:40)
in RCTView (at Container.js:12)
in Container (at connectStyle.js:392)
in Styled(Container) (at PicturesScreen.tsx:35)
in PicturesScreen (created by SceneView)
in SceneView (at StackViewLayout.tsx:900)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewCard.tsx:106)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at screens.native.js:101)
in Screen (at StackViewCard.tsx:93)
in Card (at createPointerEventsContainer.tsx:95)
in Container (at StackViewLayout.tsx:975)
in RCTView (at screens.native.js:132)
in ScreenContainer (at StackViewLayout.tsx:384)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewLayout.tsx:374)
in PanGestureHandler (at StackViewLayout.tsx:367)
in StackViewLayout (created by withOrientation)
in withOrientation (at StackView.tsx:104)
in RCTView (at Transitioner.tsx:267)
in Transitioner (at StackView.tsx:41)
in StackView (created by Navigator)
in Navigator (created by KeyboardAwareNavigator)
in KeyboardAwareNavigator (created by SceneView)
in SceneView (created by TabNavigationView)
in RCTView (created by ResourceSavingScene)
in RCTView (created by ResourceSavingScene)
in ResourceSavingScene (created by TabNavigationView)
in RCTView (at screens.native.js:132)
in ScreenContainer (created by TabNavigationView)
in RCTView (created by TabNavigationView)
in TabNavigationView (created by NavigationView)
in NavigationView (created by Navigator)
in Navigator (created by SceneView)
in SceneView (created by SwitchView)
in SwitchView (created by Navigator)
in Navigator (created by NavigationContainer)
in NavigationContainer (at App.tsx:215)
in RCTView (created by MenuProvider)
in RCTView (created by MenuProvider)
in MenuProvider (at App.tsx:206)
in StyleProvider (at App.tsx:205)
in RCTView (at Root.js:14)
in Root (at connectStyle.js:392)
in Styled(Root) (at App.tsx:204)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
2020-03-09 16:47:24.446 [error][tid:com.facebook.react.JavaScript] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Context.Consumer`.
This error is located at:
in NavigationContainer (at App.tsx:215)
in RCTView (created by MenuProvider)
in RCTView (created by MenuProvider)
in MenuProvider (at App.tsx:206)
in StyleProvider (at App.tsx:205)
in RCTView (at Root.js:14)
in Root (at connectStyle.js:392)
in Styled(Root) (at App.tsx:204)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
The code that I use to call it is:
<DragSortableView
dataSource={subscriptionContext && subscriptionContext.transactionReceipt ? this.state.pictures.sort((a, b) => a.order > b.order ? 1 : -1) : this.state.pictures.sort((a, b) => a.order > b.order ? 1 : -1).slice(0, 4)}
parentWidth={parentWidth}
childrenWidth={childrenWidth}
childrenHeight={childrenHeight}
marginChildrenTop={marginChildrenTop}
marginChildrenBottom={marginChildrenBottom}
marginChildrenLeft={marginChildrenLeft}
marginChildrenRight={marginChildrenRight}
onDragStart={(fromIndex) => { // I changed this from (startIndex,endIndex) to (fromIndex)
if (!this.state.isEditState) {
this.setState({ isEditState: true, scrollEnabled: false });
} else {
this.setState({ scrollEnabled: false });
}
}}
onDragEnd={(startIndex) => {
this.setState({
scrollEnabled: true
})
}}
onDataChange={(pictures) => {
// delete or add data to refresh
for (var i = 0; i < pictures.length; i++) {
if (pictures[i].order !== i) {
pictures[i].order = i;
// Update firebase
if (i === 0) {
// Set the profile picture
value.changeProfilePicture(pictures[i])
}
firebase
.database()
.ref(`/images/${this.props.userId}/${pictures[i].id}`)
.update({
profile: (i === 0),
order: i
})
.then()
.catch();
}
}
this.setState({
pictures
})
}}
onClickItem={(data, item, index) => {
if (this.state.isEditState) {
// Confirm/Delete
this.deletePicture(data[index].id);
} else {
this.setState({ showPictureGallery: true, initialPage: index })
}
}}
keyExtractor={(item, index) => item.id}
renderItem={(item, index) => { return this.renderItem(item, index) }} />
Any thoughts???? I couldn't see anything within the instructions that would indicate that the code needed to change.
This lib looks awesome, but I spent more than 2 hours trying to make it run after git cloning it and nothing.
Can you please provide instructions of how we're able to run it?
<DragSortableView
// dataSource={menuStore.firstData}
dataSource={this.state.firstData}
parentWidth={parentWidth}
childrenWidth={childrenWidth}
childrenHeight={childrenHeight}
scaleStatus={'scaleY'}
onDragStart={(startIndex, endIndex) => {
this.setState({
scrollEnabled: false
})
}}
onDragEnd={(startIndex) => {
this.setState({
scrollEnabled: true
})
}}
onDataChange={(data) => {
// if (data.length != menuStore.firstData.length) {
// menuStore.firstData = data;
// this.setState({});
// // this.setState({
// // data: data
// // })
// }
this._changeMoveData(data);
}}
keyExtractor={(item, index) => item.txt} // FlatList作用一样,优化
onClickItem={(data, item, index) => {
}}
renderItem={(item, index) => {
return this.renderDeleteItem(item, index)
}}
/>
拖动前后产生的变化
AutoDragSortableView
scrolling did not work on a page load but when scrolling items once and after that dragged item then scrolling work and scrolling takes more delay.
纵向拖拽,会导致,别替换的位置的item 消失或者或者和别的item 重叠
试过安卓模拟器、ios模拟机、ios真机,情况都不错。只有安卓真机存在问题。
附:
视频和手机型号截图
https://pan.baidu.com/s/1gkxiOAwL-D5CtG0eHYmc4Q
请问无法拖动,按照例子写的,
Thank you @mochixuan ! react-native-drag-sort
is GREAT!
-- Steven Black from 🇨🇦
Is it possible to move an item from drag and drop zone to another?
Imagine like this
Day 1
Day 2
Like i want to move Item 1 to day2?
是否在接下来的版本考虑做子条目尺寸存在不同大小
这样可以借助它实现一些排序以外的功能,参考微信发朋友圈的拖拽到底部删除,谢谢!
Hi! Thanks for the amazing library, could you please add support to shorten the delay of a long press needed to go into dragable mode?
Would be nice to have an inverted list, I have a use case where I want to display the first element on the bottom of the screen so you can reach it easier.
Otherwise awesome library!
Thanks! 💪
Hi, I really like this module due to high quality of implementation and I thought it would be good if working with different children item size was supported. You can see the exact meaning of my feature suggestion in the example below :
Since there is just one children item size for the whole draggable module and you determine the number of each view on a row based on that, this is what happening now :
Thank you
dataSource更新的情况下, onDataChange 方法并不走.
import React,{Component} from 'react'
import {
ActivityIndicator,
StatusBar,
StyleSheet,
ScrollView,
View,
Image,
Text,
Dimensions
} from 'react-native';
const {width} = Dimensions.get('window')
import DragSortableView from 'react-native-drag-sort'
const parentWidth = width - 18
const childrenWidth = 76
const childrenHeight = 76
const marginChildrenTop = 7
const marginChildrenBottom = 0
const marginChildrenLeft = 0
const marginChildrenRight = 7
export default class DragTestScreem extends Component {
constructor(props) {
super(props);
this.state = {
data: ['cat', 'fish', 'beans', 'tree','child','ant','mountain'],
scrollEnabled: false,
}
}
renderItem (word, index) {
return (
<View style={sortStyles.itemContainer}>
<Text>{word}</Text>
</View>
)
}
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ScrollView
ref={(scrollView)=> this.scrollView = scrollView}
scrollEnabled = {this.state.scrollEnabled}
style={{flex: 1}}>
<View style={sortStyles.container}>
<DragSortableView
dataSource={this.state.data}
parentWidth={parentWidth}
childrenWidth= {childrenWidth}
childrenHeight={childrenHeight}
marginChildrenTop={marginChildrenTop}
marginChildrenBottom={marginChildrenBottom}
marginChildrenLeft={marginChildrenLeft}
marginChildrenRight={marginChildrenRight}
onDragStart={(startIndex,endIndex)=>{
this.setState({
scrollEnabled: false
})
}}
onDragEnd={(startIndex)=>{
this.setState({
scrollEnabled: true
})
}}
onDataChange = {(data)=>{
// delete or add data to refresh
if (data.length != this.state.data.length) {
this.setState({
data: data
})
}
}}
onClickItem={(data,item,index)=>{
console.log('clicked')
// click delete
// if (this.state.isEnterEdit) {
// const newData = [...data]
// newData.splice(index,1)
// this.setState({
// data: newData
// })
// }
}}
renderItem={(item,index)=>{
return this.renderItem(item,index)
}}
/>
</View>
</ScrollView>
</View>
);
}
}
const sortStyles = StyleSheet.create({
container: {
borderColor: '#000000',
borderWidth: 4,
padding: 10
},
itemContainer: {
borderColor: '#F0F3F7',
borderRadius: 8,
borderWidth: 4,
paddingHorizontal: 12,
paddingVertical: 12,
width: childrenWidth,
height: childrenHeight,
backgroundColor: '#f0ffff',
justifyContent: 'center',
alignItems: 'center'
},
word: {
color: '#162842',
fontSize: 15,
fontWeight: 'bold',
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 20
},
})
It doesn't drag.
给data 新增数据,不刷新的情况
The library defines a few globals including maxScale
, minOpacity
, scaleDuration
and slideDuration
.
It would be nice if the user could alter these values (e.g., setting maxScale to 1 to disable item scaling).
Please consider merging in MR #45 which removes such globals and replaces them with props with the same defaults. Since all these props are optional and their default values match the ones assigned to the globals we can guarantee backwards compatibility (thus the minor version bump).
childrenHeight has fixed size, this is a problem for a custom size items.
Hi @mochixuan , great library and thanks for sharing! Any plans to update the deprecated methods?
Regards.
请教下,horizontal=true的时候,实现拖拽更改item,需要怎么样进行修改?多谢
First of all, thank you very much for the awesome work! This is the most sophisticated one of the kind I have found.
I am using this in a project with a newer react-native version so I am seeing the orange warning box that says componentWillReceiveProps/componentWillMount has been renamed, and is not recommended for use
.
I would like to know if you have any plan to refactor this recently, or if you would take PR for this? Thanks!
这个例子不知道怎么用,粘贴的代码,不能运行
React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 621.44 MB / 11.63 GB
Shell: 5.4.2 - /bin/zsh
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.19.0 - /usr/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
The same problem occurs in my own app with custom data.
I love this package, saved my project!
I have an issue though when changing orientation on Android.
I cannot get it to work.
This is what I use to detect orientation change (this works):
Dimensions.addEventListener("change", function (dims) {
self.setState({
deviceWidth: dims.screen.width,
deviceHeight: dims.screen.height
});
});
This is what I use on the package:
let delimiter = (this.state.deviceWidth > this.state.deviceHeight) ? 7 : 4;
<AutoDragSortableView
childrenWidth={this.state.deviceWidth / delimiter - PixelRatio.getPixelSizeForLayoutSize(1.3)}
childrenHeight={80}
sortable={!this.state.deleteMode}
marginChildrenTop={PixelRatio.getPixelSizeForLayoutSize(1)}
marginChildrenLeft={PixelRatio.getPixelSizeForLayoutSize(1)}
parentWidth={this.state.deviceWidth}
dataSource={this.props.photoData[this.state.selectedObject]}
onDataChange={(data) => this._orderChange(data)}
keyExtractor={(item, index) => item.id}
onClickItem={(data, item, index) => { this._openGallery(index) }}
renderItem={this._renderListItem} />
If I open the screen vertically or horizontally it works, but if I change orientation while in screen it messes up. I tried to change a few things but I got no progress, is this not implemented or am I doing something wrong?
Thank you!
<DragSortableView
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
bounces={false}
extraData={this.state.refresh}
sortable={false}
dataSource={this.state.appList}
parentWidth={parentWidth}
childrenWidth={parentWidth}
childrenHeight={childrenHeight}
marginChildrenTop={marginChildrenTop}
marginChildrenBottom={marginChildrenBottom}
onClickItem={(data, item, index) => { this._onPressItem(item) }}
renderItem={(item, index) =>
<View style={{ width: parentWidth, height: childrenHeight }}>
<AppListItemView
data={item}
index={index}
/>
</View>
}
/>
Then I add
this.setState({ refresh: !this.state.refresh });
into some button click.
Nothing happen.
Just noticed that on your example you do not used the library using npm, and instead copy pasted the code of the lib. Is there any reason for that that I am not aware of?
Thank you, nice job!
drag-sort Component is nested inside the ParallaxScrollView.
How to ensure that the sliding of ParallaxScrollView is not triggered when dragging internal drag components
看了一下你的源码,里面用了index 作为key值,但是index并不能唯一标识某个组件,因此拖动之后,index改变,组件就会被重新渲染,而导致图片会闪动一下
所以是否能够支持自定义key值,如FlatList 组件的keyExtractor
这样就不会再index改变之后,而重新渲染组件了
hi,
thanks for the library.
Upon dragging and releasing item,
I sometimes get the following error:
TypeError: null is not an object (evaluating '_this5.touchCurItem.ref')
endTouch
AutoDragSortableView.js:401:16
animation.start$argument_2
AnimatedValue.js:217:29
__debouncedOnEnd
Animation.js:56:19
onUpdate
TimingAnimation.js:129:28
onUpdate
[native code]:0
_callTimer
JSTimers.js:148:15
callTimers
JSTimers.js:399:17
callFunctionReturnFlushedQueue
[native code]:0
Doesn't always happen,
it seems to happen when I drag and drop and item quickly.
<ScrollView srcollEnabled={this.state.scrollEnabled}>
<DragSortableView
dataSource={this.state.profilePic}
parentWidth={Dimensions.get('window').width}
childrenWidth= {width}
childrenHeight={width}
marginChildrenTop={20}
marginChildrenLeft={10}
marginChildrenRight={10}
onDragStart={() => this.setState({scrollEnabled: false})}
onDragEnd={() => this.setState({scrollEnabled: true})}
fixedItems={this.getFixedItems()}
onDataChange={(data) => this.setState({profilePic: data})}
onClickItem={this.onItemPress}
keyExtractor={(item, index)=> `${index}_${parseInt(Math.random()*10000)}`}
renderItem={this.renderProfilePicture}
/>
</ScrollView>
DragSortableView works fine if it is not inside ScrollView, but inside ScrollView when I call this.setState() onDragStart, screen freezes and it cannot be dragged.
When an item is dragged it scales up but when it is released it does not scale back to normal (see attached screenshot).
This seems due to an error in the endTouch method, which is responsible to scale the item back to its normal size. This method starts the animation to scale the item back but then calls the changePosition method which triggers a re-render and interrupts the animation.
Please, review MR #43 which fixes this.
How can auto-scroll down or up ScrollView when dragging the item to the bottom or top of the screen?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.