status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

PanResponderExample fix for responding to events 

Summary: Fixes #3312.

The example was no longer reacting to touch/drag events.

It looks like `setNativeProps` requires the `style` property to contain the style rules. It appears that this warning is [only in development mode](381e2acd18/Libraries/ReactIOS/NativeMethodsMixin.js (L115-L117)), but after fixing it I am seeing the gestures recognized and properly handled. Running outside of the dev environment yielded the circle to be positioned at the top left of the screen, below the navigation bar, and inaccessible.

<img src="https://cloud.githubusercontent.com/assets/656630/10407224/1449b1b2-6eb6-11e5-8116-20d08f7721ec.png" width="350" />

![after](http://g.recordit.co/UIbeHcKZUg.gif)
Closes https://github.com/facebook/react-native/pull/3315

Reviewed By: @​svcscm

Differential Revision: D2529010

Pulled By: @vjeux

fb-gh-sync-id: 6b79573f42a2520197f77dcb76cd640ea614477f
This commit is contained in:
Atticus White 2015-10-09 17:29:45 -07:00 committed by facebook-github-bot-9
parent 05c08a472c
commit 7abf8ba631
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Examples/UIExplorer/PanResponderExample.js
View File

@ -52,8 +52,10 @@ var PanResponderExample = React.createClass({
this._previousLeft = 20;
this._previousTop = 84;
this._circleStyles = {
left: this._previousLeft,
top: this._previousTop,
style: {
left: this._previousLeft,
top: this._previousTop
}
};
},
@ -78,13 +80,17 @@ var PanResponderExample = React.createClass({
_highlight: function() {
this.circle && this.circle.setNativeProps({
backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
style: {
backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
}
});
},
_unHighlight: function() {
this.circle && this.circle.setNativeProps({
backgroundColor: processColor(CIRCLE_COLOR)
style: {
backgroundColor: processColor(CIRCLE_COLOR)
}
});
},
@ -106,8 +112,8 @@ var PanResponderExample = React.createClass({
this._highlight();
},
_handlePanResponderMove: function(e: Object, gestureState: Object) {
this._circleStyles.left = this._previousLeft + gestureState.dx;
this._circleStyles.top = this._previousTop + gestureState.dy;
this._circleStyles.style.left = this._previousLeft + gestureState.dx;
this._circleStyles.style.top = this._previousTop + gestureState.dy;
this._updatePosition();
},
_handlePanResponderEnd: function(e: Object, gestureState: Object) {