[PanResponder] onPanResponderMove locationX/locationY values incorrect

[njafei]

Is this a bug report?

yes

Have you read the Bugs section of the How to Contribute guide?

yes

Environment

1. react-native -v: 0.43.4
2. node -v: v6.9.1
3. npm -v: 3.10.8
4. yarn --version: 0.18.1

Then, specify:

• Target Platform: iOS

• Development Operating System: macOS

• Build tools: Xcode

Steps to Reproduce

(Write your steps here:)

1. use panResponder
2. console.log locationX and locationY of view when I move it in onPanResponderMove

Expected Behavior

the locationX change with the view move

Actual Behavior

locationX do change when view move, but the value is not currect, just like:

locationX : 38.5 locationY : 53.5
locationX : 152.5 locationY : 278.5
locationX : 29.5 locationY : 45
locationX : 138 locationY : 264.5

Reproducible Demo

import React, {PureComponent, Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    PanResponder,
} from 'react-native';

export default class TouchStartAndRelease extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: 'red',
            marginTop: 100,
            marginLeft: 100,
        }
    }

    componentWillMount(){
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onMoveShouldSetPanResponder:  (evt, gestureState) => {
                return true;
            },
            onPanResponderGrant: (evt, gestureState) => {
                this._highlight();
            },
            onPanResponderMove: (evt, gestureState) => {
                console.log(`locationX : ${evt.nativeEvent.locationX}   locationY : ${evt.nativeEvent.locationY}`);
                this.setState({
                        marginLeft: evt.nativeEvent.locationX,
                        marginTop: evt.nativeEvent.locationY,
                });
            },
            onPanResponderRelease: (evt, gestureState) => {
                this._unhighlight();
            },
            onPanResponderTerminate: (evt, gestureState) => {
            },
        });
    }

    _unhighlight(){
        this.setState({
            backgroundColor: 'red',
        });
    }

    _highlight(){
        this.setState({
            backgroundColor: 'blue',
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.redView,
                    {
                        backgroundColor: this.state.backgroundColor,
                        marginTop: this.state.marginTop,
                        marginLeft: this.state.marginLeft,
                    }
                ]}
                    {...this._panResponder.panHandlers}
                ></View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    redView: {
        width: 100,
        height: 100,
    },

});

AppRegistry.registerComponent('TouchStartAndRelease', () => TouchStartAndRelease);

[shergin]

PR: #15123

[Ashoat]

@shergin, your PR is for Android, while this bug report is for iOS. I am seeing this behavior on both iOS and Android. PanResponder sometimes gets into a state where the values of locationX and locationY it's passing on are rather incorrect. pageX and pageY are unaffected.

[Ashoat]

I am seeing the issue that your PR addressed as well, which is that on Android, onPanResponderMove doesn't update the values of locationX/locationY.

However, there is another distinct issue, that I can repro on both iOS and Android. If you press a location twice in short succession, the second press will register incorrect (and in my case, far smaller) values of locationX and locationY.

[shergin]

@Ashoat Oh, sorry. Unfortunately I don't have a solution for PanResponder, probably it is problem in JS, probably on native side, or on both sides.

I would love to review and land PR fixing this problem, btw. 😄

[notgiorgi]

I think this is also related:

see the gif first: https://giphy.com/gifs/3ov9k5OWQQictSMZfG/fullscreen

panResponder is attached to the red box, onPanResponderMove I'm logging the locationX which should be relative to the red box but appears it is not (take a look at the logs in gif)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[Ashoat]

Regarding the issue where two clicks within a second will yield two onPanResponderGrant events, the second of which has wildly incorrect locationX/locationY values: this issue is still extant in 0.51. I should note that this seems to be distinct from the onPanResponderMove issue with locationX/locationY, but I assume they are related. I haven't checked that one on 0.51, but I assume it's still going on as well.

Overall, the issue is that the relative positions reported by PanResponder are impossibly to rely on. This forces developers to rely on absolute positions reported by layout calls, but since onLayout does not report absolute positions, messy measure() calls are necessary.

I do not think we should close this issue, as this problem prevents the use of PanResponder for correct relative positioning information. In my opinion, this is the kind of "wtf?" experience that turns off a lot of newcomers from React Native.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.