react-native-draggable icon indicating copy to clipboard operation
react-native-draggable copied to clipboard

item is not draggable on android

Open hadare1 opened this issue 5 years ago • 17 comments

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

hadare1 avatar Jan 11 '20 02:01 hadare1

OK , So I managed not to fix the issue completely but make it work.

Apparently the issue happens when I render this Draggable inside an <Animatable.View> with animation. for some reason if I comment out the animation everything works but unfortunately because i use the onLayout method from the View inside the Draggable I need to render each draggable twice, the first time will be at x=0, y=0 and on the second render every draggable will be set to it's right position with causing some weird user experience

hadare1 avatar Jan 13 '20 00:01 hadare1

@hadare1 We use onLayout to determine the size of your custom Draggable component as well. I imagine if the dimensions are being changed or are indeterminate then there will be issues. That onLayout in the child component seems a bit odd.

Can you post a gif or something with what you're seeing? Also what kind of animation are you adding to its parent?

baconcheese113 avatar Jan 13 '20 08:01 baconcheese113

just a fadeIn animation with react-native-animatable library..

this is my Draggable container code:

    <Animatable.View
      ref={r => (this.draggable[index] = r)}
      delay={500}
      animation={ PLATFORM === 'ios' ? this.draggablesFadeIn ? 'fadeInUp' : null : null}
    >

in the onLayout method I only update a mobx observable with the values of the width and height.

hadare1 avatar Jan 13 '20 21:01 hadare1

What height and width do you get for the custom child of the Draggable in your onLayout call?

baconcheese113 avatar Jan 15 '20 07:01 baconcheese113

I had the same Problem and found out it can be fixed by setting the height and width of the first inner container inside the Draggable like so: <Draggable><View style={{height: 50, width: 50}}>other stuff here ...</View></Draggable>

Maybe this could also be the solution for your case?

sofarsoghood avatar Jan 15 '20 17:01 sofarsoghood

the height will stay the same once I calculate the phone screen size but the with will differ between each Draggable child because it includes a text. there for setting a constant width will be an issue.

hadare1 avatar Jan 15 '20 23:01 hadare1

then maybe running a script on onComponentDidMount or something to evaluate the Text width and setting it on the View via a state property might work?

sofarsoghood avatar Jan 16 '20 08:01 sofarsoghood

Another option would be just moving the onLayout higher up in the hierarchy.

baconcheese113 avatar Jan 16 '20 20:01 baconcheese113

anybody make it work ? i had same problem

truongnm95 avatar Jul 20 '20 08:07 truongnm95

Same Problem not working on android.

msahu2595 avatar Aug 06 '20 09:08 msahu2595

@msahu2595 @truongnm95 Can you post your relevant components

baconcheese113 avatar Aug 06 '20 16:08 baconcheese113

i already fix it, hahaha, my problem is i change position view container in <Draggable></Draggable with position: 'absolute' 🤪

My Problem:

<Draggable x={...} y={...}>

<TouchableOpacity style={styles.containerInterest} onPress={() => {}}>

<Image style={styles.backInterest} source={Media.InvestProfit} />

<Image style={styles.frontInterest} source={Media.NumberOne} />

</TouchableOpacity>

</Draggable>

My problem is styles.containerInterest have position: 'absolute'

truongnm95 avatar Aug 07 '20 02:08 truongnm95

Thanks @truongnm95 Problem solved, was also doing same mistake.

msahu2595 avatar Aug 08 '20 07:08 msahu2595

i had same issue, so i fix by add flex:1 to out container, like this:

<View style={{backgroundColor: 'blue', flex: 1}} >
        <Draggable 
            imageSource={require('./trump1.png')} 
            renderSize={80} 
            x={200}
            y={300}
            onDragRelease={this._changeFace}
            onLongPress={()=>console.log('long press')}
            onShortPressRelease={()=>console.log('press drag')}
            onPressIn={()=>console.log('in press')}
            onPressOut={()=>console.log('out press')}
        />  
    </View>

israelouteiro avatar Oct 15 '20 20:10 israelouteiro

still getting issue, how to add draggable option for view with position: 'absolute'

Bluegenie avatar May 05 '21 04:05 Bluegenie

This props is key : animatedViewProps

This is my demo:

import React from "react";
import { View, Dimensions } from "react-native";
import Draggable from "react-native-draggable";

/**
 * @desc Draggable demo page.
 * Demo url:https://github.com/supervons/ExploreRN/blob/master/src/screens/home/drag/DraggablePage.js
 * @author Supervons
 */
const { height } = Dimensions.get("window");
export default function DraggablePage() {
  return (
    <View>
      <Draggable
        x={200}
        y={300}
        animatedViewProps={{ height: height }}
        renderSize={56}
        renderColor="black"
        renderText="A"
        isCircle
        shouldReverse
        onShortPressRelease={() => alert("touched!!")}>
        <View style={{ height: 30, width: 30, backgroundColor: "yellow" }} />
      </Draggable>
    </View>
  );
}

Demo git url

If you want know why? look this :

image If you didn't set the heightbut set Draggable's y, the dragItem would be outside of Animated.View, so you wouldn't be able to drag.

supervons avatar Aug 26 '21 03:08 supervons

I solved this issue by wrapping the other stuff of draggable inside Animated.View and give it a height of 100%.

wahas-mughal avatar Feb 27 '23 14:02 wahas-mughal