Search code examples
react-native

react-native PanResponder: OnMoveShouldSetPanResponder Not Working


I am working on a small project using React-Native PanResponder.

My Goal: I am trying to capture if the user is touching the screen, not moving around.

My Problem: I cannot run any code inside onMoveShouldSetPanResponder(evt, gestureState) in order to block PanResponder when the user only touches.

I tried console.log the param gestureState or a random string and it did not response.

my code:

    componentWillMount(){

        this._panResponder = PanResponder.create({

        onStartShouldSetPanResponderCapture: () => true,

        onStartShouldSetPanResponder: (evt, gestureState) => true,

        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

        onMoveShouldSetPanResponder: (evt, gestureState) => {
            // no console.log shown in this scope.
            console.log(gestureState);
            console.log("a string inside should set on move")
            // the PanResponder still works despite this returns false
            return false;
        },

        onPanResponderMove : (evt, gState) => {
            // this works perfectly. 
            this.setState({addAngle: this.state.addAngle + gState.vy*40});
        },

    })

}

My Question is: Am I missing anything here ? I saw the code snippets of others and they seem to be working very well.

where I saw the sample code: https://gist.github.com/teameh/dd055d546a3bd8f85b9516840e3a45f3

Tech:

  • react-native cli (no expo)

  • android API version 23 from Android Emulator (Android Studio)

Note: I have not tested on any Iphone device yet.

Cheers !


Solution

  • I solved this problem by deleting onStartShouldSetPanResponder. I can't point to any documentation to support this but I believe that onStartShouldSetPanResponder and onMoveShouldSetPanResponder are mutually exclusive.