0.2.1 • Published 5 years ago
@coverfy/react-native-draggable-list v0.2.1
react-native-draggable-list
This is a React Native drag and drop project which is capable to have a fixed last element
Installation
yarn add react-native-draggable-list
import DraggableList from 'react-native-draggable-list';
Usage
import DraggableList from 'react-native-draggable-list';
...
class App extends Component {
constructor() {
super();
this.state = {
activeBlock: null,
itemsPerRow: 1,
itemHeight: 150,
data: [], // Your data goes here
};
}
// MARK: - Handle events
onDragRelease(newData) {
this.setState({ activeBlock: null, data: newData });
}
onDragMove(newData) {
this.setState({ data: newData });
}
onDragGrant(index) {
this.setState({ activeBlock: index });
}
// MARK: - Render elements
renderItem(item) {
return (
<View key={item.name}> // this key has to be the same as the keyField in the DraggableList
...
</View>
);
}
renderLastItem() {
return (
...
);
}
render() {
const {
data, activeBlock, itemHeight, itemsPerRow,
} = this.state;
const lastItem = data.length === ALL_DATA.length ? undefined : this.renderLastItem();
return (
...
<DraggableList
onDragRelease={newData => this.onDragRelease(newData)}
onDragMove={newData => this.onDragMove(newData)}
onDragGrant={index => this.onDragGrant(index)}
lastItem={() => this.renderLastItem()}
itemHeight={itemHeight}
itemsPerRow={itemsPerRow}
data={data}
keyField="name" // this key has to be the same has the item view in renderItem
renderItem={item => this.renderItem(item)}
/>
...
);
}
}
SortableGrid properties
renderItem
Functiondata
ArraykeyField
StringonDragRelease
FunctiononDragMove
FunctiononDragGrant
FunctionitemsPerRow
NumberitemHeight
NumberObject
Number