2

I am currently trying to develop an app with draggable elements using React Native and the library react Native draggable (https://www.npmjs.com/package/react-native-draggable).

My goal is to get the position of my Draggable element. (So I can change their color depending on where it is on the screen).

I tried different method but nothing worked for me. Here is the last thing I tried :

return (
    <View>
      <Draggable 
        onDragRelease={event =>
        {const layout = event.nativeEvent.layout;
          console.log('x:', layout.x);
          console.log('y:', layout.y);
        }
        }
        x={positionX} 
        y={positionY} 
        renderSize={56} 
        renderColor='#BDFF00' 
        renderText={'Drag me'} 
        // onDrag={getPosition}
        /> 
    </View>
  )

The code above returns this error (TypeError: undefined is not an object (evaluating 'layout.x'))

I also tried to do this :

  const getPosition = (event) => {
    console.log(event.locationX)
    setPositionX(event.locationX)
    setPositionY(event.locationY)
  };

  const changerColorFunction = () => {
  
  }

  return (
    <View>
      <Draggable 
        x={positionX} 
        y={positionY} 
        renderSize={56} 
        renderColor='#BDFF00' 
        renderText={'Drag me'} 
        onDrag={getPosition}
        /> 
    </View>
  )

Based on the react native Draggable documentation, but it is not working too. I think, I didn't fully understand how it should be working. Any help would be great.

bob
  • 4,282
  • 2
  • 22
  • 30
owdji
  • 151
  • 2
  • 12
  • this link should be helpful for you >> https://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element – Vhora Abdulrauf Jul 29 '22 at 17:48
  • @VhoraAbdulrauf As you can see above I tried to already tried to apply the second most voted answear of the question you sent me but I was getting an error. – owdji Jul 29 '22 at 20:58

0 Answers0