0

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.

salmanthasleem
  • 15
  • 6

1 Answers1

0

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

}
jircdeveloper
  • 424
  • 2
  • 17
  • I haven't learnt about ```event.stopPropogation()``` . But this seems the solution to stop parent element from getting the touch. I will look into it. It's prospective – salmanthasleem Sep 01 '21 at 10:06
  • This is just the way to prevent that. I hope it would be useful for you. if is ok, mark as answered the question, please. If not, let me know – jircdeveloper Sep 01 '21 at 10:27
  • Is it possible to show me a small example on how to use it in react-native? – salmanthasleem Sep 01 '21 at 11:53