Is there a way to allow only the child component to use the Panresponder which is set up in the parent component?

Question

I'm trying to find a way to allow only the child node to capture Panresponder gesture. My intention here is to make the child component move freely within the parent component. And the parent component shouldn't respond to any touches. Therefore, it won't be able to move. And also, the child component should only be able to move within the parent components border. So far, I've created a big circle component. And it has a small circle nested in it. See the following picture, Click to see the picture And the Panresponder properties are set up on the parent component. However, when i start dragging the component, the parent component responds to the touches too. This is how I've coded in the componentWillMount lifecycle,

 this._panResponder = PanResponder.create({
            onStartShouldSetPanResponderCapture: () => false,
            onMoveShouldSetResponderCapture: () => false,
            onPanResponderTerminationRequest: () => true,

            onPanResponderGrant: (e, gestureState) => {
                Some.Code.Here
            },
            onPanResponderMove: (evt, gesture) => {
                Some.Code.Here
            },

            onPanResponderRelease: (e, gesture) => {
                Some.Code.Here
            },
        });

This is how it looks like in the render method,

return (
            <View {...this._panResponder.panHandlers}>
                <View>
                    <Animated.View
                        style={[panStyle, styles.circle]}
                        onTouchEnd={this.calculateMove}>
                        <View style={{ height: 20, width: 20, borderRadius: 10, backgroundColor: 'black', justifyContent: 'center', alignSelf: 'center' }} ></View>
                    </Animated.View>
                </View>
            </View>
        );

My goal here is to make the deepest node that is the View Component, which is the small black circle to move within the big circle. And the big circle shouldn't move whatsoever. Moreover, the small circle has to only respond to touches within the big circle. Unfortunately, I'm still stuck here. It seems like the the Big circle is reponding to the touches too.

Answer 1

Are you managing the event object correctly?

Seems to be you need to add the next lines in your event handler

event => { // imagine this is your event handler function
event.stopPropagation(); // it goings to avoid executes the event to parents element.
const target = event.currentTarget; // here you will be sure you're getting the correct element

}