I made a drag & drop feature on components which are dropped on elements which are in a with coordinates, it is all fine on Android.
But on iOS my animated views which have all the panResponder & handlers seems more large and dont fit with their content, and so when I select one element to drag, I awkwardly select the one on top or below.
{this.dataDrag.map((d, index) => (
<View
style={[this.smileyStyles(index)]}
key={index}
>
<Animated.View
{...this.getPanResponder(index).panHandlers}
style={[this.pan[index].getLayout(), styles.circle]}>
<View style={{width: '100%'}}>
<Image
source={this.sourceSmiley(index)}
resizeMode= 'contain'
style={{width: '100%'}}
/>
</View>
</Animated.View>
</View>
))}
This is how i display my views which contain an image to drag
There is styles.circle:
const styles = StyleSheet.create({
circle: {
backgroundColor: 'transparent',
width: CIRCLE_RADIUS*2,
height: CIRCLE_RADIUS*2,
justifyContent: 'center',
alignItems: 'center',
}
});
Each Animated view is placed with position absolute like this.
//returned from: this.pan[index].getLayout()
ravi: {
position : 'absolute',
top : Window.height/5 - CIRCLE_RADIUS,
left : Window.width/5 - CIRCLE_RADIUS,
},
And there is my pan events.
getPanResponder(index) {
return PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (e, gestureState) => {
Animated.event([null,{
dx : this.pan[index].x,
dy : this.pan[index].y,
}])(e, gestureState)
//this.moveScroll(this.pan[index].x, this.pan[index].y, index)
},
onPanResponderRelease: (e, gesture) => {
var theKey = this.isDropZone(gesture)
var theMood = this.setTheActualMood(index)
if (theKey) {
this.setHumeur( theKey, theMood )
this.changeColor( theKey, theMood )
}
Animated.spring(
this.pan[index],
{toValue:{x:0,y:0}}
).start();
//this.scrollViewProjects.scrollTo({y: 0})
}
});
}
Does someone meet with a similar problems ? I don't know if I have been clear ^^