panResponder nativeEvent.locationX and nativeEvent.locationY values do not update on Android

[Kielan]

We use GitHub Issues for

I am referencing #9786 but because of the unspecific title I worry the react-native team is not paying attention to this bug.

Description

in onPanResponderMove evt.nativeEvent.locationX and evt.nativeEvent.locationY do not update on Android. pageX and pageY do update on Android. @Arkanine 's suggestion to return true at the end of the panresponder does not fix this issue.

[FILL THIS OUT: Explain what you did, what you expected to happen, and what actually happens.]

Reproduction

Many people are having this issue and no feedback from the team, I am researching this further but not an Android wizard and haven't looked at the android end of the source for react-native too much.

Additional Information

• React Native version: 0.38.1
• Platform: Android only
• Operating System: MacOS

[ericvicenti]

Thanks for filing a new more specific issue. Can you see if this is reproducible on new versions of RN such as 0.41?

Also is it possible to get a code snippet, with an inline comment describing exactly what is not working?

Once we have these clarifications I'll do a quick sanity check and prioritize the issue with the core team.

[albinhubsch]

@ericvicenti Yes I can confirm this also affects 0.41! This is really annoying since it performs differently on iOS and Android! On Android I have to use evt.nativeEvent.locationY + gestureState.dy to get the same results evt.nativeEvent.locationY gives me on iOS

[LucasThompson]

Same thing observed with 0.41.2, static evt.nativeEvent.locationX - had been using some code to track the changing location of the first touch (from the touches array) - as gestureState.dx is influenced by additional touches. Works great on iOS but nothing on android.

On closer inspection, it appears that actually it is only the first touch which isn't updated. If there are two touches, for example, locationX is updated for the second touch.

[ghost]

I'm also using 0.41.2 and can confirm that locationX and locationY are NOT updated on Android (everything is fine on iOS). Our app has some drawing capabilities and we use locationX/Y to determine the position of the drawing within the view. On Android, when we log evt.nativeEvent.locationX (or locationY) inside the onPanResponderMove we see the same value that we get in the onPanResponderGrant when the drawing activity began and that value never changes as you draw. Interestingly, pageX and pageY are updated correctly. This is a major issue in our app at the moment.

[julesmoretti]

A bit more context. (and this is also true to iOS)

react-native init dragDrop

On my end I have been using this as my reference for the index.ios.js file: https://github.com/crysfel/DragAndDrop/blob/master/app/Viewport.js

for the package.json

	"dependencies": {
		"react": "16.0.0-alpha.6",
		"react-native": "0.43.4"
	},
	"devDependencies": {
		"babel-jest": "19.0.0",
		"babel-preset-react-native": "1.9.1",
		"jest": "19.0.2",
		"react-test-renderer": "16.0.0-alpha.6"
	},
	"jest": {
		"preset": "react-native"
	}

you will notice that the following works as expected:

            onPanResponderMove: Animated.event([null,{
                dx  : this.state.pan.x,
                dy  : this.state.pan.y
            }]),

But in my case I need it to be written in a way for me to pass arguments which breaks the behavior if written like so:

      onPanResponderMove: (evt, gestureState) => {
        Animated.event([gestureState, {
          dx : this.state.pan.x,
          dy : this.state.pan.y
        }]);
      },

same for this version:

      onPanResponderMove: (evt, gestureState) => {
        return Animated.event([gestureState, {
          dx : this.state.pan.x,
          dy : this.state.pan.y
        }]);
      },

please note that if I am to console.log both the evt and or the gestureState, those gets logged as expected.

I am testing this on iOS only.

global packages

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

thank you for your help with this.

[JonesN3]

This was also reported early 2016 in #7221. I've started tinkering with a fix for this, but having some issues with the interaction with multiple overlapping views with gesture handlers, and I have limited time to spare at the moment.

@ericvicenti I've made a simple example showcasing the bug. By tapping and dragging you will see, on Android, the locationX/Y not updating while pageX/Y are. On iOS devices both these values will update as dragging. I have tested this in react native 0.43.4.

Expo
Github gist

[julesmoretti]

@JonesN7 - found a solution:

in your state:

this.state = {
responderCount: 0,
multiple: [
  {panResponder: {}},
  {panResponder: {}},
]
}

and then I created a createPanResponders function that gets called on componentWillMount:

   const currentDeviceIndex = this.state.responderCount;

...
        onPanResponderMove: Animated.event([null, {
          dx: this.state.multiple[currentDeviceIndex].pan.x,
          dy: this.state.multiple[currentDeviceIndex].pan.y
        }]),

The issue is that you cant for loop through the array you have to call the createPanResponders and then update the responderCount based on the length of your array. And then pass a callback to the setState within the createPanResponders to initiate the next createPanResponders until you have gone through your entire array.

this.setState({...}, createPanResponders())

and finally:

                <Animated.View
                  {...this.state.multiple[index].panResponder.panHandlers}

where index is pulled from the multiple.map

I hope this helps.

Cheers.

J

[JonesN3]

@julesmoretti Thanks, but I was actually talking about a fix in the react-native source code. It has a lot of functions for selecting the correct view when determining position relative to the view (nativeEvent.locationX/Y) that I have not had time to read into and understand properly.

[hramos]

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.

[michaelspeed]

is there any update on the fix? julesmoretti could you elaborate how did you manage to fix it

[newyankeecodeshop]

The PR I submitted (#15123) is still in the "Import Started" phase. I hope it makes it into 0.48, but I haven't seen any activity on it in the past few days.

[alephmarket]

@michaelspeed - no idea as I dont dev for this project. :/