From 7abf8ba631e0ff0840b1452f8b6154e716affc7a Mon Sep 17 00:00:00 2001 From: Atticus White Date: Fri, 9 Oct 2015 17:29:45 -0700 Subject: [PATCH] PanResponderExample fix for responding to events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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](https://github.com/facebook/react-native/blob/381e2acd184fc4ba80a240ba3d7dda0464c6416b/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. ![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 --- Examples/UIExplorer/PanResponderExample.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/Examples/UIExplorer/PanResponderExample.js b/Examples/UIExplorer/PanResponderExample.js index b41b56f3e..c2e6a667c 100644 --- a/Examples/UIExplorer/PanResponderExample.js +++ b/Examples/UIExplorer/PanResponderExample.js @@ -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) {