Mixing
react native pan responder locationX/Y not correct
1
I am trying to get the x, y co-ordinates of the circle relative to it's parent using the pan responding in real time as I drag it around the screen.
according to the docs (https://facebook.github.io/react-native/docs/panresponder) locationY should be The Y position of the touch, relative to the element, however, it doesn't seem to be correct. Is there something I am missing?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Obstacle from './Obstacle';
import {
StyleSheet,
Text,
View,
Dimensions,
TouchableOpacity,
PanResponder,
Animated
} from 'react-native';
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
const NUM_OBSTACLES = 1;
const CIRCLE_RADIUS = 40;
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
class Canvas extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
mousePosition: { x: 0, y: 0 }
};
}
componentWillMount() {
// Add a listener for the delta value change
this._val = { x: 0, y: 0 };
this.state.pan.addListener(value => (this._val = value));
// Initialize PanResponder with move handling
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setOffset(this.state.pan.__getValue());
this.state.pan.setValue({ x: 0, y: 0 });
this.locationPageOffsetX =
evt.nativeEvent.pageX - evt.nativeEvent.locationX;
this.locationPageOffsetY =
evt.nativeEvent.pageY - evt.nativeEvent.locationY;
},
onPanResponderMove: Animated.event(
[null, { dx: this.state.pan.x, dy: this.state.pan.y }],
{
listener: (evt, gestureState) => {
console.log(
`locationX : ${evt.nativeEvent.locationX} locationY : ${
evt.nativeEvent.locationY
}`
);
}
}
)
});
}
render() {
const panStyle = {
transform: this.state.pan.getTranslateTransform()
};
// );
return (
<>
<View
style={{
borderWidth: 1,
height: '80%',
width: '100%',
backgroundColor: 'lightgrey'
}}
>
<Animated.View
{...this.panResponder.panHandlers}
style={[panStyle, styles.circle]}
/>
</View>
</>
);
}
}
const styles = StyleSheet.create({
circle: {
position: 'absolute',
backgroundColor: 'skyblue',
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
borderRadius: CIRCLE_RADIUS,
zIndex: 1
}
});
export default Canvas;
I seem to get similar values no matter where I drag the ball, I would expect these values to be closer to zero as the ball is in the top left corner:
locationX : 48 locationY : 48
locationX : 48 locationY : 47.5
locationX : 47 locationY : 48
locationX : 44 locationY : 46.5
javascript reactjs react-native
asked Jan 3 at 1:25
neekoneeko
85272758
add a comment |
1
I am trying to get the x, y co-ordinates of the circle relative to it's parent using the pan responding in real time as I drag it around the screen.
according to the docs (https://facebook.github.io/react-native/docs/panresponder) locationY should be The Y position of the touch, relative to the element, however, it doesn't seem to be correct. Is there something I am missing?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Obstacle from './Obstacle';
import {
StyleSheet,
Text,
View,
Dimensions,
TouchableOpacity,
PanResponder,
Animated
} from 'react-native';
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
const NUM_OBSTACLES = 1;
const CIRCLE_RADIUS = 40;
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
class Canvas extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
mousePosition: { x: 0, y: 0 }
};
}
componentWillMount() {
// Add a listener for the delta value change
this._val = { x: 0, y: 0 };
this.state.pan.addListener(value => (this._val = value));
// Initialize PanResponder with move handling
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setOffset(this.state.pan.__getValue());
this.state.pan.setValue({ x: 0, y: 0 });
this.locationPageOffsetX =
evt.nativeEvent.pageX - evt.nativeEvent.locationX;
this.locationPageOffsetY =
evt.nativeEvent.pageY - evt.nativeEvent.locationY;
},
onPanResponderMove: Animated.event(
[null, { dx: this.state.pan.x, dy: this.state.pan.y }],
{
listener: (evt, gestureState) => {
console.log(
`locationX : ${evt.nativeEvent.locationX} locationY : ${
evt.nativeEvent.locationY
}`
);
}
}
)
});
}
render() {
const panStyle = {
transform: this.state.pan.getTranslateTransform()
};
// );
return (
<>
<View
style={{
borderWidth: 1,
height: '80%',
width: '100%',
backgroundColor: 'lightgrey'
}}
>
<Animated.View
{...this.panResponder.panHandlers}
style={[panStyle, styles.circle]}
/>
</View>
</>
);
}
}
const styles = StyleSheet.create({
circle: {
position: 'absolute',
backgroundColor: 'skyblue',
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
borderRadius: CIRCLE_RADIUS,
zIndex: 1
}
});
export default Canvas;
I seem to get similar values no matter where I drag the ball, I would expect these values to be closer to zero as the ball is in the top left corner:
locationX : 48 locationY : 48
locationX : 48 locationY : 47.5
locationX : 47 locationY : 48
locationX : 44 locationY : 46.5
javascript reactjs react-native
asked Jan 3 at 1:25
neekoneeko
85272758
How can you tell it's not correct? Are you getting a different value than expected? Is locationY undefined? Also, what solutions have you tried already?
– schu34
Jan 3 at 1:32
@schu34 thanks for the reply, I have updated the post. I have tried to apply an offset as described here github.com/facebook/react-native/issues/15290, however, it still shows something similar to locationX : 66.5 locationY : 66 when in the top left corner
– neeko
Jan 3 at 9:53
add a comment |
1
1
1
I am trying to get the x, y co-ordinates of the circle relative to it's parent using the pan responding in real time as I drag it around the screen.
according to the docs (https://facebook.github.io/react-native/docs/panresponder) locationY should be The Y position of the touch, relative to the element, however, it doesn't seem to be correct. Is there something I am missing?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Obstacle from './Obstacle';
import {
StyleSheet,
Text,
View,
Dimensions,
TouchableOpacity,
PanResponder,
Animated
} from 'react-native';
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
const NUM_OBSTACLES = 1;
const CIRCLE_RADIUS = 40;
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
class Canvas extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
mousePosition: { x: 0, y: 0 }
};
}
componentWillMount() {
// Add a listener for the delta value change
this._val = { x: 0, y: 0 };
this.state.pan.addListener(value => (this._val = value));
// Initialize PanResponder with move handling
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setOffset(this.state.pan.__getValue());
this.state.pan.setValue({ x: 0, y: 0 });
this.locationPageOffsetX =
evt.nativeEvent.pageX - evt.nativeEvent.locationX;
this.locationPageOffsetY =
evt.nativeEvent.pageY - evt.nativeEvent.locationY;
},
onPanResponderMove: Animated.event(
[null, { dx: this.state.pan.x, dy: this.state.pan.y }],
{
listener: (evt, gestureState) => {
console.log(
`locationX : ${evt.nativeEvent.locationX} locationY : ${
evt.nativeEvent.locationY
}`
);
}
}
)
});
}
render() {
const panStyle = {
transform: this.state.pan.getTranslateTransform()
};
// );
return (
<>
<View
style={{
borderWidth: 1,
height: '80%',
width: '100%',
backgroundColor: 'lightgrey'
}}
>
<Animated.View
{...this.panResponder.panHandlers}
style={[panStyle, styles.circle]}
/>
</View>
</>
);
}
}
const styles = StyleSheet.create({
circle: {
position: 'absolute',
backgroundColor: 'skyblue',
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
borderRadius: CIRCLE_RADIUS,
zIndex: 1
}
});
export default Canvas;
I seem to get similar values no matter where I drag the ball, I would expect these values to be closer to zero as the ball is in the top left corner:
locationX : 48 locationY : 48
locationX : 48 locationY : 47.5
locationX : 47 locationY : 48
locationX : 44 locationY : 46.5
javascript reactjs react-native
asked Jan 3 at 1:25
neekoneeko
85272758
I am trying to get the x, y co-ordinates of the circle relative to it's parent using the pan responding in real time as I drag it around the screen.
according to the docs (https://facebook.github.io/react-native/docs/panresponder) locationY should be The Y position of the touch, relative to the element, however, it doesn't seem to be correct. Is there something I am missing?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Obstacle from './Obstacle';
import {
StyleSheet,
Text,
View,
Dimensions,
TouchableOpacity,
PanResponder,
Animated
} from 'react-native';
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
const NUM_OBSTACLES = 1;
const CIRCLE_RADIUS = 40;
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
class Canvas extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
mousePosition: { x: 0, y: 0 }
};
}
componentWillMount() {
// Add a listener for the delta value change
this._val = { x: 0, y: 0 };
this.state.pan.addListener(value => (this._val = value));
// Initialize PanResponder with move handling
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setOffset(this.state.pan.__getValue());
this.state.pan.setValue({ x: 0, y: 0 });
this.locationPageOffsetX =
evt.nativeEvent.pageX - evt.nativeEvent.locationX;
this.locationPageOffsetY =
evt.nativeEvent.pageY - evt.nativeEvent.locationY;
},
onPanResponderMove: Animated.event(
[null, { dx: this.state.pan.x, dy: this.state.pan.y }],
{
listener: (evt, gestureState) => {
console.log(
`locationX : ${evt.nativeEvent.locationX} locationY : ${
evt.nativeEvent.locationY
}`
);
}
}
)
});
}
render() {
const panStyle = {
transform: this.state.pan.getTranslateTransform()
};
// );
return (
<>
<View
style={{
borderWidth: 1,
height: '80%',
width: '100%',
backgroundColor: 'lightgrey'
}}
>
<Animated.View
{...this.panResponder.panHandlers}
style={[panStyle, styles.circle]}
/>
</View>
</>
);
}
}
const styles = StyleSheet.create({
circle: {
position: 'absolute',
backgroundColor: 'skyblue',
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
borderRadius: CIRCLE_RADIUS,
zIndex: 1
}
});
export default Canvas;
I seem to get similar values no matter where I drag the ball, I would expect these values to be closer to zero as the ball is in the top left corner:
locationX : 48 locationY : 48
locationX : 48 locationY : 47.5
locationX : 47 locationY : 48
locationX : 44 locationY : 46.5
javascript reactjs react-native
javascript reactjs react-native
asked Jan 3 at 1:25
neekoneeko
85272758
asked Jan 3 at 1:25
neekoneeko
85272758
edited Jan 3 at 9:49
neeko
asked Jan 3 at 1:25
neekoneeko
85272758
asked Jan 3 at 1:25
neekoneeko
85272758
asked Jan 3 at 1:25
neekoneeko
85272758
85272758
How can you tell it's not correct? Are you getting a different value than expected? Is locationY undefined? Also, what solutions have you tried already?
– schu34
Jan 3 at 1:32
@schu34 thanks for the reply, I have updated the post. I have tried to apply an offset as described here github.com/facebook/react-native/issues/15290, however, it still shows something similar to locationX : 66.5 locationY : 66 when in the top left corner
– neeko
Jan 3 at 9:53
add a comment |
How can you tell it's not correct? Are you getting a different value than expected? Is locationY undefined? Also, what solutions have you tried already?
– schu34
Jan 3 at 1:32
@schu34 thanks for the reply, I have updated the post. I have tried to apply an offset as described here github.com/facebook/react-native/issues/15290, however, it still shows something similar to locationX : 66.5 locationY : 66 when in the top left corner
– neeko
Jan 3 at 9:53
How can you tell it's not correct? Are you getting a different value than expected? Is locationY undefined? Also, what solutions have you tried already?
– schu34
Jan 3 at 1:32
How can you tell it's not correct? Are you getting a different value than expected? Is locationY undefined? Also, what solutions have you tried already?
– schu34
Jan 3 at 1:32
@schu34 thanks for the reply, I have updated the post. I have tried to apply an offset as described here github.com/facebook/react-native/issues/15290, however, it still shows something similar to locationX : 66.5 locationY : 66 when in the top left corner
– neeko
Jan 3 at 9:53
@schu34 thanks for the reply, I have updated the post. I have tried to apply an offset as described here github.com/facebook/react-native/issues/15290, however, it still shows something similar to locationX : 66.5 locationY : 66 when in the top left corner
– neeko
Jan 3 at 9:53
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015234%2freact-native-pan-responder-locationx-y-not-correct%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015234%2freact-native-pan-responder-locationx-y-not-correct%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How can you tell it's not correct? Are you getting a different value than expected? Is locationY undefined? Also, what solutions have you tried already?
– schu34
Jan 3 at 1:32
@schu34 thanks for the reply, I have updated the post. I have tried to apply an offset as described here github.com/facebook/react-native/issues/15290, however, it still shows something similar to locationX : 66.5 locationY : 66 when in the top left corner
– neeko
Jan 3 at 9:53