tongyy / react-native-draggable Goto Github PK

I created a sample app by using the same examples as README. It worked on iOS but not on Android. Nothing is getting rendered on-screen in Android. Here is a screenshot.

Android OS - 9.0 Pie, API 28

There is no error in the console also to debug it.

I used this component in my app.js and the touch events not working in android but its perfectly working fine in ios

node_modules/react-native-draggable/node_modules/react-native/package.json
node_modules/react-native/package.json

I need help, please!

I am getting this error when I am removing an object (which contains image path with x and y position) from array of objects.

images: [
        {
          path: require('image path here')
          x: 1,
          y: 1
        },
        {
          path: require('image path here')
          x: 1,
          y: 1
        },
      ]

remove func

pressDrag={() => {
          array.splice(idx, 1); //to remove the table
          this.dispatchToRedux("TABLES_LAYOUT", floors_info);
}}

Hello,

When I try to drag an element with your example code, that element is dragged behind the view.

return ( <View > <Draggable renderSize={56} renderColor='black' offsetX={-100} offsetY={-200} renderText='A' pressDrag={()=>alert('touched!!')}/> <Draggable reverse={false} renderColor='red' renderShape='square' offsetX={0} offsetY={0} renderText='B'/> <Draggable/> </View> );

Thanks in advance for your answer

In the examples it show only works with circle, square or a text, can this work for or any custom component?, like I want to create a field, after a user type in some words, then the user want to move it by dragging and dropping, can this module do that?
Thanks

Hi @tongyy
I was wondering if you have any suggestions on how to make a draggable view which can only be dragged within certain boundaries, e.g. its parent?
I'm facing a task where I want to place a marker on a background image and get the coordinates of the marker within the image.

Best regards
Jens

Hi, I use:
[email protected]
[email protected]

Is there some way to get the X/Y values while dragging? Some var or function which returns this information?

Thanks!

I have an image array that i wanna reorder with the draggable component, is it posible to reorder de array just dragging the image to another position?

When I reload the app state, draggable reset the positions. How can I maintain the position of each draggale (I have many draggables)

Hey there, great work thank you so much.

Would you ever consider going through this kind of path for this project;

https://github.com/btk/react-native-draggable-holder

I feel like using children components might be more generic? I just want to learn your reason not to implement children components instead using a non-generic styling scheme?

Thank you.

When i drag these texts on tshirt. It should be the place where i release the dragging.
So my code looks like this

const designArea = (
      <View
        style={[
          {borderWidth: this.props.anyItemSelected ? 1 : 0},
          styles.designArea,
        ]}>
        {this.props.texts.map((text, id) => (
          <Draggable
            x={text.left}
            y={text.top}
            key={id}
            onPressIn={e => this.props.onSelectText(text)}
            touchableOpacityProps={{activeOpactiy: 1}}
            onDragRelease={this.props.onDragRelease}>
            <Text
              style={{
                fontSize: 25,
                color: 'black',
                includeFontPadding: false,
                borderWidth: text.isSelected ? 1 : 0,
              }}>
              {text.title}
            </Text>
          </Draggable>
        ))}
      </View>
    );

So onDragRelease i make the component re-render so that every text renders on its current position. But it doesn't work, it is like it adds more on x and y. But when i go to the another component and then go back , it works correctly, i mean dropped element location is the where i put the element before.

on android
react-native: 0.62.2
react-native-draggable: "^3.0.0"

I get a warning ,

Animated: 'useNativeDriver' was not specified. This is a required option and must be explicitly set to 'true' or 'false'

This article seems to be talking about it. But I am not sure how to fix this in this.

dragged item gets hidden on dragging item outside of scrollview

Is it somehow possible to ease off the dragged element after dragging? Like with scrolling: when I scroll somewhere and stop scrolling, it doesn't stop suddenly, the scroll eases off.
Do you know what I mean?

BTW: I'm using Draggable to drag a set of pictures which I render in an View out of an array. It works perfectly! Thanks!

I need to use reversePosition function in version v3.0.0. Could you implement it?

v3.3.0

Hi ,
I user react-native 0.61.5
react-native-draggable 3.0.0

it works flawlessly on iOS but on Android nothing happens when I try to press or drag an Item, am I missing a prop I need to put or something?

      <Draggable
        x={xPosition}
        y={yPosition}
        shouldReverse
       maxY={this.state.maxY - TAB_BAR_HEIGHT}
        minY={-(this.state.carousel + this.state.tag)}
       onDrag={(e, gesture) => this.onDrag(e, gesture)}
      
        onPressIn={() => alert(dish.DishName)}
        onDragRelease={(e, gesture) =>
         this.onDragRelease(e, gesture, dish, index)
        }>
      <View
          onLayout={e => this.onDragLayout(e, index)}>
          <Text>
            {dish.DishName}
          </Text>
       </View>
      </Draggable>

onPressin is not called either

Is it possible to have a option for colision box? To prevent draggable components overlap?

The only problem I'm having with this library is using offsets instead of absolute positioning.

Is there a way we could add top/left/bottom/right properties like CSS absolute positioning that could be used instead of the offsets? Like top={43} left={width/8-18} instead of offsetX={-50} offsetY={-100}

The dev could choose to use one or the other.

whenever i use absolute view as a child under draggable the view disappears

Not sure if this is a bug but my draggable moves along with sibling scrollview or even nephew scrollview.

This warning is now present and caused by this package.

Hi!
Is there a out of the box solution for a component to register, if it was dropped onto a certain view?
For example a certain function should be fired then.

Thanks in advance and have a nice day.

Are you planning to implement a drop area?

@tongyy Can add features like pinch scale and rotate using gestures?

I've been playing with it for about a week now, and have been unable to get the coordinates accurately. It seems the getPosition method I saw in another issue report is no longer supported.

I am using: "react-native-draggable": "^3.1.0" which I believe to be the latest.

I have tried setting x to x += event.nativeEvent.dx (and similarly for y)
I have tried x = event.nativeEvent.pageX (same for y)
I have tried x = event.nativeEvent.pageX - event.nativeEvent.locationX (same for y) - to try to get the top left corner by subtracting the element offset location from the page offset location
I have tried x = event.nativeEvent.dx (same for y) - because I read in one of the issues that reapplying the coords to an existing element will treat the x,y as offsets to the original.

In all cases, the element jumps around after i drop it, and the saved coordinates render it in a different location.

Please let me know what I am doing wrong!! Thanks.

My users need to be able to drag the object around (including releasing it and then dragging again where they left off) and then reset it to its starting position when they press a button.

Can we add a function to reset the Draggable object to its initial offset? It could be done something like the refs used in react-native-modal-box

i.e., like this

someFunction() {
    this.refs.exampleModal.open();
}

someOtherFunction() {
    this.refs.exampleModal.close();
}

render() {
    <Modal style={styles.modal} ref={"exampleModal"}>
        ...
    </Modal>
}

 <Draggable
                x={x}
                y={y}
                disabled={orientation === 'LANDSCAPE'}
>
                <VideoPlayer updateXY={this.updateXY}  videoHeight={200}/>
</Draggable>

I have this element and when the fullscreen is done on android the landscape view start from position x so I need to reset both x and y to zero to make landscape mode working ?

'react-native-root-toast' is no work after installed this package

Hi,
I need to be able to save the X and Y location of the component after it is moved by the user so I can render it (for example the next day ) that he connects with the look that he prefers.
I've tried followings, but none works as expected.

const [item01X, setItem01X] = useState(30);
const [item01Y, setItem01Y] = useState(50);

const OnDraghandler01 = (itm01X, itm01Y) => {
setItem01X(itm01X);
setItem01Y(itm01Y);
return;
};

1-
onDragRelease={(gestureState) =>
OnDraghandler01(
gestureState.nativeEvent.pageX,
gestureState.nativeEvent.pageY,
)
}
2-
onDragRelease={(getPosition) =>
OnDraghandler02(
getPosition.nativeEvent.locationX,
getPosition.nativeEvent.locationY
)
}

appreciate your help.
thanks
SB

Didn't have time to put them in before shipping v3, but would be a neat project to get them in and make the project still work for js projects as well.

@alchemy-wiki has already added them in here Would need to figure out how to setup the repo to probably include d.ts, and still deliver the js file

Can't get ref for the component, it's null all the time.
Version: "react-native-draggable": "^2.0.0"

Hi,

I am wondering if its possible to when you release the drag for me to manually set where x access ends up. I tried using the x property but that does not seem to work. Any thoughts on how to archive this?

thanks

Hi there!

Pretty cool stuff you did there!
I'm using it for modal-resizing and got one question:
When starting to resize the modal (which is done via your draggable) there is an animation which lights up the <Draggable> for a short period. Is it possible to turn that animation off?

Greets
sofar

Hey I just want to know that like there is a draggable component. So is there any droppable or dropzone component as well.
Let me give you example: - I have my draggable component and there is a dropzone component. So I just want to drag the draggable component to the dropzone and just want the component to stay there until I drag it again?

Please help me with this.

I'm getting this warning:
Invalid props.style key 'z' supplied to 'View'

Do I do something wrong? Shouldn't that be "zIndex" instead of just z?

Here some more of the warning:

Bad object: {
  "transitionProperty": "opacity",
  "transitionDuration": "0.15s",
  "userSelect": "none",
  "cursor": "pointer",
  "touchAction": "manipulation",
  "top": 37,
  "left": 306,
  "elevation": 1,
  "z": 1,
  "alignSelf": "baseline"
}

This "z": 1 most probably throws it.

I had a draggable and have set the pressDrag event. It was fine when i debugged in simulator. But when i debugged in my device. It's hard to press the button. The pressDragRelease worked fine but the pressDrag. Can you help me about that issue?

Hello, I'm new on react native. Can you help me with this android issue.. When I tried to implement this package into my app, it is showing on my Iphone 6 but not on my Huawei Nova 5t. Below is my code in my App.js:

App.js

IOS view

Android view

It seems not working on my android but working on IOS. Can you advise if there something I missed on my code? I have tried adding z and zindex in style but still no luck.

so that image doesn't blink when clicked. I can create a PR for this if it sounds good. could also make it an option

https://github.com/tongyy/react-native-draggable/blob/master/Draggable.js#L174

Now it allows moving the dragging component to go out of the mobile screen. Therefore is there any way to avoid draggable item going out of a component?

Or is there any way to limit the dragging component size?

I am using "react-native-draggable": "^3.0.0",

works fine with shapes.. but once I include an imageSource for some png, it gives me a warning for a failed prop.type

Warning: failed prop type: invalid prop 'imageSource' of type 'object' supplied to 'Draggable', expected 'number'.

The image shows up, so works fine, but the error keeps showing up!

I can't seem to find a way to get the current X and Y position

I have tried wrapping a view around the component, but it did not work.

I have seen this thread, but I am still not sure how it works.

#7

Any advice on this would be much appreciated.

Hi,
I'm using react-native-draggable ^3.2.0, and when I use it in RTL mode the object is moving in the opposite direction when it is dragged. How do I solve this?

• node_modules/react-native-draggable/node_modules/react-native/package.json
• node_modules/react-native/package.json

Two instances of RN package, and hence index.js couldn't get to resolve its access.

Versions:
"react-native": "0.49.3"
"xcode" : 8

hi, i have pressDrag that don't work, Why ? the others props are ok
<Draggable renderShape='image' imageSource={this.state.buttoncamera} renderSize={56} renderColor='transparent' offsetX={-100} offsetY={-200} pressDrag={()=>console.log('touched!!')}/>

Hello, I have three questions!

1. Is there a way to know the new location of the object after the user has dragged it from its starting position? If not, can we add that as a parameter to the existing event function properties?

2. Is there a way to use absolute positioning (i.e., top: 10, left: 50 instead of the existing offset properties? It'd make my life a lot easier if I could set the location using absolute coordinate positioning.

3. Is there a way to make the rendered image centered on the location instead of pinning it to the right side?