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 nativeEvent.locationX and nativeEvent.locationY values do not update on Android #12591

Closed
Kielan opened this issue Feb 26, 2017 · 12 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@Kielan
Copy link

Kielan commented Feb 26, 2017

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
Copy link
Contributor

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
Copy link

@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
Copy link

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
Copy link

ghost commented Mar 13, 2017

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
Copy link

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

├── angular-cli@1.0.0-beta.19-3
├── create-react-app@1.3.0
├── ios-deploy@1.9.1
├── nodemon@1.11.0
├── npm@4.2.0
├── npm-check@5.4.0
├── react-native-cli@2.0.1
├── react-native-git-upgrade@0.2.7
├── rnpm@1.9.0
├── sass-lint@1.10.2
├── sinopia@1.4.0
├── t2-cli@0.1.4
├── tessel@0.3.25
├── webpack@1.13.3
└── webpack-dev-server@1.16.2

thank you for your help with this.

@JonesN3
Copy link

JonesN3 commented Apr 25, 2017

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
Copy link

@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
Copy link

JonesN3 commented Apr 25, 2017

@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
Copy link
Contributor

hramos commented Jul 25, 2017

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.

@hramos hramos added the Icebox label Jul 25, 2017
@hramos hramos closed this as completed Jul 25, 2017
@michaelspeed
Copy link

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

@newyankeecodeshop
Copy link
Contributor

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
Copy link

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

facebook-github-bot pushed a commit that referenced this issue Aug 28, 2017
…move

Summary:
Fixes #12591

The Android JSTouchDispatcher was using `mTargetCoordinates` when creating the TouchEvent for a move. However, these are final values which are set when the touch down is received. When the user's finger moves, it's important to be able to track the coordinates of the touch as it moves. Thus, we need to update the x,y coordinates by calling `TouchTargetHelper` on each move event.
Closes #15123

Reviewed By: achen1

Differential Revision: D5476663

Pulled By: shergin

fbshipit-source-id: ce79e96490f3657a13f9114fcc93e80d5fdbebaf
@facebook facebook locked as resolved and limited conversation to collaborators Jul 25, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 25, 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