👆DragAndDropBoard is a simple React Native library, enabling to create a scrollable board component with carousel, sortable columns and draggable cards for your iOS and Android apps
Hi,
When I rotate the device the content boards are not fill all the screen, have any suggestion to avoid this and make full screen?. If I run directly in landscape is showing well but the same with rotte again to portrait, appears that not update the weight of the screen.
Thanks for the library!
When I import this library and try to use it, it makes the web app crash. It works fine on mobile. I saw a pull request that tried to solve what I believe is the same issue, but I'm using the latests versions and it's not working. I created the project using Ignite, and haven't imported any other library except for this one.
Uncaught ReferenceError: process is not defined
at Object.4043 (:2:13168)
at r (:2:306599)
at Object.8048 (:2:9496)
at r (:2:306599)
at Object.8641 (:2:1379)
at r (:2:306599)
at :2:315627
at :2:324225
at :2:324229
at HTMLIFrameElement.e.onload (index.js:1:1)
every time I run my app I get this error, but it looks like nothing gets affected
/node_modules/react-native-draganddrop-board/src/components/Column/Column.styled.js
Attempted import error: 'marginRight' is not exported from 'styled-system'.
Hi, I'm experiencing the following error
TypeError: undefined is not an object (evaluating '_this.listeners[columnId][event]'
whenever I drag an item away from its initial position. What does this error refer to? I tried logging the listeners object within the BoardRepository component and it returns an empty object. Thanks in advance!
Cards are not compatible with ipad/tablets
Hi, I'm trying to make 2D draggable item list, and each item in a list has it's own order.
When I move an item into another column, I can have srcColumnId, destColumnId
but I can't get the moved item's order index in the new destination column,
and also when I change the order in the same column, I can't get the index of new order.
Can you help me to get the information of the source and destination column as it is of course,
and also the order index of each list?
Thanks a lot.
Hi there, I use on iPad and want to make 3 column in a screen. So can we make it like a props. If can, pls make responsive with multi column in 1 screen without scroll vertical.
Thanks for reading and waiting new version ASAP.
I get this error while trying to run the app using react native for web, the error only happens with the "w" option in expo, android and ios work fine
×
TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function
../../../../../../../../../../../react-native-apps/test1/testing/node_modules/react-native-draganddrop-board/src/components/EmptyColumn/EmptyColumn.styled.js
http://172.17.1.155:19006/static/js/bundle.js:79981:78
webpack_require
http://172.17.1.155:19006/static/js/bundle.js:727:30
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
fn
/react-native-apps/test1/testing/screens/LinksScreen.js:96
93 | cardContent={(item) => (<View>
94 |
95 | <Text>{item.name}</Text>
> 96 | <Text>{item.description}</Text>
| ^ 97 | <Text></Text>
98 |
99 | <TouchableHighlight
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
class AdminDeliveries extends React.PureComponent {
constructor(props: any) {
super(props);
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.deliveryInfo.loading !== this.props.deliveryInfo.loading) {
console.log('changed')
//boardRepository.registry.updateData(data)
}
}
componentDidMount() {
/* const {
getDeliveryListNow,
getCourierListNow,
getCourierDeliveryListNow,
} = this.props;
getDeliveryListNow(false);
getCourierListNow();
getCourierDeliveryListNow(); */
}
render() {
const { deliveryInfo, courierList } = this.props;
console.log('[Admins Delivery] courierList', Object.values(courierList.courierDeliveryList));
const data = [
{
id: 1,
name: 'משלוחים פנויים',
rows: [{
id: '1',
name: 'Draw from drawings',
description: 'Learn from the masters by copying them'
},
{
id: '2',
name: 'Draw from photographs',
description: 'For most people, it’s easier to reproduce an image that’s already two-dimensional'
}],
},
{
id: 2,
name: ' פנויים',
rows: [{
id: '3',
name: 'Draw from drawings',
description: 'Learn from the masters by copying them'
},
{
id: '4',
name: 'Draw from photographs',
description: 'For most people, it’s easier to reproduce an image that’s already two-dimensional'
}],
},
// ...Object.values(courierList.courierDeliveryList)
];
const boardRepository = new BoardRepository([]);
return (
<View style={{ flex: 1 }} collapsable={true}>
<Board
boardRepository={boardRepository}
open={() => { }}
onDragEnd={(srcColumnId, destColumnId, draggedItem) => {
}}
badgeBackgroundColor="#18212e"
columnNameTextColor="#18212e"
boardBackground="#18212e"
/>
</View>
);
}
};
const mapDipatchToProps = (dispatch: Dispatch) => ({
getDeliveryListNow: async (byBusiness: boolean) => {
await dispatch(getDeliveryList(byBusiness));
},
getCourierListNow: async () => {
await dispatch(getCourierList());
},
getCourierDeliveryListNow: async () => {
await dispatch(getCourierDeliveryList());
},
});
const mapStateToProps = (state: any) => ({
deliveryInfo: { ...state.deliveryInfo },
courierList: { ...state.courierInfo },
});
const ConnectedComponent = connect(mapStateToProps, mapDipatchToProps)(AdminDeliveries);
export {
ConnectedComponent as AdminDeliveries,
};
Hey, as you see I just implement this board. when i use the UI(drag) I get this error: 'TypeError: Cannot read property 'y' of undefined', important to note that this component is inside Stack navigator, and when i load this component not inside the navigator i get this wired error.
When I press long press the item before dragging it shows the above error.
Drag and Drop is a bit laggy If I transfer a card into another column.
move [TypeError: undefined is not an object (evaluating '_this.listeners[columnId][event]')]
and I think this is the problem?
This issue looks like it's caused by the animation that pulls the card below the finger, in my opinion this animation should be removed
Hi,
Is it possible for the board direction to be vertical?
Is it possible to access the selected column information in transitions between columns?
Here's how to replicate the issue:
Go to board screen: Board is successfully loaded.
Leave the board screen.
Go back again to the board screen: Board is not loaded.
But once I reloaded the app, it's working again.
Here's my code for the creation and updating of the board.
// create
let boardRepository = new BoardRepository(); or let boardRepository = new BoardRepository([]);
// update
useEffect(() => {
if (boardData.length > 0) {
console.log("should update data");
boardRepository.updateData(boardData);
}
}, [boardData]);
Note: it always logged "should update data" so it means that there's data that should be loaded.
Thank you.
it is possible to modify the data that is passed to BoardRepository?
After modify data, i have again pass data to BoardRepository but still not able to work drag and drop properly.
can any one give suggestion?
Hi, this happened when I try to move the cards to another column, then the app crashed and stopped working.
when used in react native web the the columns are too wide, the cards become transparent and only the cards in the first column are draggable, at first, but once one card gets dragged the other cards on the rest of the columns become draggable but the cards in the first column become undraggable.
the shades are displayed incorrectly and the circle behind the card count disapears
Edit: looks like the problem exists because only the cards in the selected column are movable, looks like this may require platform specific code
on android sometimes when dragging a card it will become invisible but will become visible when dragged
I have a priority system in my back end and would like to indicate the priority of a task in some way, I tried to change the the cardNameTextColor but I can only do this globally inside <board/>
is there a way to edit a single card? also the ability to add a timestamp or a date to a card would be nice
Not exactly an issue, but could you elaborate on how to use the 'boardRepository.updateData(data);'. It seems that after I update the dictionary object 'data' with a new value and try and update this using a button press, data is not getting updated.
`
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { SafeAreaView, StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
// @ts-ignore
import { BoardRepository, Board } from 'react-native-draganddrop-board';
export default function App() {
const [txt,setTxt] = useState("");
var data = [
{
id: 1,
name: 'TO DO',
idcount: 0,
rows: []
},
{
id: 2,
name: 'IN PROGRESS',
idcount: 0,
rows: []
},
{
id: 3,
name: 'DONE',
idcount: 0,
rows: []
}
]
const boardRepository = new BoardRepository(data);
const addTask = (taskName) =>{
console.log("Adding task");
data[0].idcount = data[0].idcount + 1;
console.log("Step 1 done");
var task = {id: data[0].idcount.toString(), name:taskName};
console.log("Step 2 done");
data[0].rows.push(task);
console.log("Step 3 done");
console.log(data);
boardRepository.updateData(data); // THIS IS THE LINE WHERE I UPDATE, THE BOARD IS NOT RE-RENDERING
}
return (
<Image style ={{ transform:[{scale:0.27}],}} source = {require('./assets/Kanban-board-1.png')}>
<Board
boardRepository={boardRepository}
open={() => {}}
onPress={() => {}}
onDragEnd={() => {}}
/>
<TextInput style={styles.input}
onChangeText={newText => setTxt(newText)}
placeholder="Enter new to do task here" />
<TouchableOpacity
onPress={() => {
addTask(txt);
}}>
<Image source = {require('./assets/add_task.png')}>
);
}
`
Hi, i've been trying to update the data used by the board with data requested from my API, however the board never updates, and renders nothing as if no data is actually there. I logged the boardRepository to check if it was updated and it was, however the actual board never changed on my app.
The code i'm working on:
Any ideas to make this work?
I just spend the last few hours trying to figure out why my cards were not moving:
Fix:
The BoardRepository's data.id must be exactly like given in the example : like 1,2,3,4,5....and not some random number.
I had to go through the whole code just to figure that out. Can you pls add a note in the docs mentioning that. Thx.
Great library. Saved me a lot of work. Respect!
Hi,
I have started testing your library and when my lists contain around 50 items each, drag become pretty much impossible with custom card content and really slow with default Card.
It takes also a while for items to appear when I scroll.
when you install it trough yarn it stops here and never finishes
Is it possible to integrate with API from backend? and how?
Is it possible to add typescript defs?
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.9.0" from [email protected]
How to get around this error from outdated peer dependency, or can this module be updated for new version of react?
| board 1 |
|---|
| --------- |
| --------- |
| --------- |
| board 2 | | board 3 |
|---------| |---------|
|---------| |---------|
|---------| |---------|
|---------| |---------|
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.