react-native-draggable
react-native-draggable copied to clipboard
item is not draggable on android
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
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 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?
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.
What height and width do you get for the custom child of the Draggable in your onLayout call?
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?
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.
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?
Another option would be just moving the onLayout
higher up in the hierarchy.
anybody make it work ? i had same problem
Same Problem not working on android.
@msahu2595 @truongnm95 Can you post your relevant components
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'
Thanks @truongnm95 Problem solved, was also doing same mistake.
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>
still getting issue, how to add draggable option for view with position: 'absolute'
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 :
If you didn't set the
height
but set Draggable
's y
, the dragItem would be outside of Animated.View
, so you wouldn't be able to drag.
I solved this issue by wrapping the other stuff of draggable inside Animated.View and give it a height of 100%.