Fix up PanResponder example

Summary: Simplify and fix up a broken example

Reviewed By: hedgerwang

Differential Revision: D3137234

fb-gh-sync-id: 653086796d40a81f472274877fb890eee4b9b57b
fbshipit-source-id: 653086796d40a81f472274877fb890eee4b9b57b

Examples/UIExplorer/PanResponderExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -24,8 +31,6 @@ var {
 } = React;
 
 var CIRCLE_SIZE = 80;
-var CIRCLE_COLOR = 'blue';
-var CIRCLE_HIGHLIGHT_COLOR = 'green';
 
 var PanResponderExample = React.createClass({
 
@@ -54,13 +59,14 @@ var PanResponderExample = React.createClass({
     this._circleStyles = {
       style: {
         left: this._previousLeft,
-        top: this._previousTop
+        top: this._previousTop,
+        backgroundColor: 'green',
       }
     };
   },
 
   componentDidMount: function() {
-    this._updatePosition();
+    this._updateNativeStyles();
   },
 
   render: function() {
@@ -79,24 +85,16 @@ var PanResponderExample = React.createClass({
   },
 
   _highlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
-      style: {
-        backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
-      }
-    });
+    this._circleStyles.style.backgroundColor = 'blue';
+    this._updateNativeStyles();
   },
 
   _unHighlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
-      style: {
-        backgroundColor: processColor(CIRCLE_COLOR)
-      }
-    });
+    this._circleStyles.style.backgroundColor = 'green';
+    this._updateNativeStyles();
   },
 
-  _updatePosition: function() {
+  _updateNativeStyles: function() {
     this.circle && this.circle.setNativeProps(this._circleStyles);
   },
 
@@ -116,7 +114,7 @@ var PanResponderExample = React.createClass({
   _handlePanResponderMove: function(e: Object, gestureState: Object) {
     this._circleStyles.style.left = this._previousLeft + gestureState.dx;
     this._circleStyles.style.top = this._previousTop + gestureState.dy;
-    this._updatePosition();
+    this._updateNativeStyles();
   },
   _handlePanResponderEnd: function(e: Object, gestureState: Object) {
     this._unHighlight();
@@ -130,7 +128,6 @@ var styles = StyleSheet.create({
     width: CIRCLE_SIZE,
     height: CIRCLE_SIZE,
     borderRadius: CIRCLE_SIZE / 2,
-    backgroundColor: CIRCLE_COLOR,
     position: 'absolute',
     left: 0,
     top: 0,