Search code examples
javascriptreactjsreact-nativeecmascript-6draggable

React Native passing Component/Object property to OnPress function


Just started learning React Native and running into some basic issues. I am using the React-native-draggable component, and I would like to use the position of the element to update the state of my current scene.

<Draggable renderColor='white' offsetX={0} renderSize={48} reverse={false} pressDragRelease={PASS X,Y POSITION TO A FUNCTION HERE?}>

For the life of me I can not get this to work; I really just want to get the x and y position of the Draggable element that is released, and use that in this.setState( ... ). I've tried binding, but really I'm a complete beginner and don't even know where to look right now. Any pointers would be greatly appreciated.


Solution

  • This is not possible at the moment. By taking a quick look at the module source code, you can see here that the pressDragRelease function is called without any parameters.

    onPanResponderRelease: (e, gestureState) => {
        if(pressDragRelease)
            pressDragRelease();
    [...]
    

    What we want here is to get x and y from gestureState. We can pass onPanResponderRelease params to pressDragRelease:

    onPanResponderRelease: (e, gestureState) => {
        if(pressDragRelease)
            pressDragRelease(e, gestureState);
    [...]
    

    Feel free to fork and submit a pull request!

    Update

    I've made a PR here: https://github.com/tongyy/react-native-draggable/pull/7

    Update 2

    The PR has been merged and a new version of the module published to npm!

    npm install react-native-draggable@1.0.8