React-native: Stop PanResponder during move gesture

Created on 1 Dec 2016  路  6Comments  路  Source: facebook/react-native

TL;DR

I want to stop the PanResponder system while it's still moving (within onPanResponderMove callback).

Explanation

I've created a basic code where pan responder is used to drag an element around. Now I want the pan responder to stop the event, and trigger some other animation, if a certain condition has been met while dragging.

I use the following code:

let panMover = Animated.event([null,{
    dy : this.state.animatedY,
}]);
this.panResponder = PanResponder.create({
    onPanResponderTerminationRequest: () => false,
    onStartShouldSetPanResponder : () => true,
    onPanResponderMove: (e, gesture) => {
        if( /* certain condition has been met */ ) {
            // 1. stop the pan responder
            // 2. start some other animation
            return false;
        }
        return panMover(e, gesture);
    },
    onPanResponderRelease : (e, gesture) => true,
});

Returning false momentarily stops the responder and creates a jittery effect when paired with some new animation. I want to completely terminate the responder. I'm looking for some API like panResponder.terminate();

Any help would be appreciated.

Locked

Most helpful comment

Same question. Up :)

All 6 comments

@AliFlux - I am experiencing a similar issue? Make any progress?

Nope, nothing so far.

@sebmarkbage, @sahrens.

Same question. Up :)

Once, I had the same problem, then I changed the return false; to return;. Then everything seems to work good and in a more predictable manner. It will not be a solution. But so far it's working good at least for me

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

Any news on this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

despairblue picture despairblue  路  3Comments

lazywei picture lazywei  路  3Comments

aniss picture aniss  路  3Comments

phongyewtong picture phongyewtong  路  3Comments

madwed picture madwed  路  3Comments