Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

panResponder calls move handlers while simple tapping #13756

Closed
karpoff opened this issue May 3, 2017 · 2 comments
Closed

panResponder calls move handlers while simple tapping #13756

karpoff opened this issue May 3, 2017 · 2 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@karpoff
Copy link
Contributor

karpoff commented May 3, 2017

I'm using pan responder to handle touches and I see that it raises move events while simple tapping on Android

please see code above

export default class extends Component {
    componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
            onPanResponderGrant: this._handlePanResponderGrant,
            onPanResponderMove: this._handlePanResponderMove,
            onPanResponderRelease: this._handlePanResponderEnd,
            onPanResponderTerminate: this._handlePanResponderEnd,
        });
    }

    _handleStartShouldSetPanResponder = (e, ges) => {
        console.log("should start", e.nativeEvent, ges);
        return false;
    };
    _handleMoveShouldSetPanResponder = (e, ges) => {
        console.log("should move", e.nativeEvent, ges);
        return true;
    };
    _handlePanResponderGrant = e => {
        console.log("grant", e.nativeEvent);
    };
    _handlePanResponderMove = e => {
        console.log("move", e.nativeEvent);
    };
    _handlePanResponderEnd = e => console.log("end", e.nativeEvent);

    render() {
        return (
            <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#eee"}} {...this._panResponder.panHandlers}>
                <TouchableOpacity onPress={() => alert("click")}><Text>click</Text></TouchableOpacity>
            </View>
        );
    }
}

I want to handle touch moves only and single taps should be passed to child component
But I see that it is quite difficult to do single tap (so it will be handled by TouchableOpacity) Because most of the time when I tap my device, move events are raised by PanResponder so TouchableOpacity doesn't works.
I tried to distinguish single taps and moves in onMoveShouldSetPanResponder handler (so I can return false in single tap case) but I see no difference in event argument

I think that timeout between tapping and raising move event is too small and should be increased (or maybe configured)

  • React Native version: 0.44
  • Platform: Android
  • Development Operating System: Windows
@hramos hramos closed this as completed Jun 26, 2017
@northern-fox
Copy link

northern-fox commented Dec 5, 2017

onMoveShouldSetPanResponder: (e, gestureState) => {
     return Math.abs(gestureState.dx) >= 1 || Math.abs(gestureState.dy) >= 1;
}

@zc-Mukden
Copy link

@karpoff 您的这个问题解决了吗???怎么解决的???

@facebook facebook locked as resolved and limited conversation to collaborators Jun 26, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants