Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to update original position #144

Open
AnsonSavage opened this issue Mar 17, 2024 · 3 comments
Open

Unable to update original position #144

AnsonSavage opened this issue Mar 17, 2024 · 3 comments

Comments

@AnsonSavage
Copy link

I think this may be related to this issue: #89 . I am also seeing if there is any feedback on StackOverflow.

By setting the shouldReverse prop to true, the draggable item smoothly returns to its original position.

However, I can't seem to dynamically update the "original position" of the draggable item by updating the position.x and position.y values, as in the following code:

    <View style={styles.answerContainer}>
        {answerParts.map((item, index) => (
            <Draggable
                key={item.index}
                x={item.position.x}
                y={item.position.y}
                disabled={item.placed}
                shouldReverse={!item.placed}
                onDragRelease={(event) => onReleaseItem(item, event)}
            >
                <View style={styles.draggableItem}>
                    <Text style={styles.draggableText}>{item.text}</Text>
                </View>
            </Draggable>
        ))}
    </View>

Any thoughts on how I can properly change the original location of a draggable React Native component?

Thanks!

@flyskywhy
Copy link

flyskywhy commented Apr 3, 2024

Or ref to #89 (comment)

key={'x' + item.position.x + 'y' + item.position.y + 't' + this.state.dragTime}
onDragRelease={(event, gestureState, bounds) => this.setState({dragTime: new Date().getTime()})}

Or for "smoothly returns", need hack to onDragRelease(e, gestureState, getBounds(), pan) in node_modules/react-native-draggable/Draggable.js then

key={item.index}
onDragRelease={(event, gestureState, bounds, pan) => Animated.spring(pan.current, {
    toValue: {x: 0, y: 0},
    useNativeDriver: false,
  }).start();
}

@ARSSHEIKH
Copy link

Or ref to #89 (comment)

key={'x' + item.position.x + 'y' + item.position.y + 't' + this.state.dragTime}
onDragRelease={(event, gestureState, bounds) => this.setState({dragTime: new Date().getTime()})}

Or for "smoothly returns", need hack to onDragRelease(e, gestureState, getBounds(), pan) in node_modules/react-native-draggable/Draggable.js then

key={item.index}
onDragRelease={(event, gestureState, bounds, pan) => Animated.spring(pan.current, {
    toValue: {x: 0, y: 0},
    useNativeDriver: false,
  }).start();
}

pan is not returning from onDragRelease there are just event, gestureState, bounds

@flyskywhy
Copy link

Or ref to #89 (comment)

key={'x' + item.position.x + 'y' + item.position.y + 't' + this.state.dragTime}
onDragRelease={(event, gestureState, bounds) => this.setState({dragTime: new Date().getTime()})}

Or for "smoothly returns", need hack to onDragRelease(e, gestureState, getBounds(), pan) in node_modules/react-native-draggable/Draggable.js then

key={item.index}
onDragRelease={(event, gestureState, bounds, pan) => Animated.spring(pan.current, {
    toValue: {x: 0, y: 0},
    useNativeDriver: false,
  }).start();
}

pan is not returning from onDragRelease there are just event, gestureState, bounds

That's why I mean "hack", you can modify Draggable.js to add pan be returned in onDragRelease.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants