Pan Responder zone too large - React Native

Question

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 ^^

Answer 1

SOLUTION:

If you have a panstart responder issue with Animated elements on IOS, add "overflow: hidden" on your AnimatedView and it will go well.

It works for me.