Convert PanResponderExample to not use setNativeProps

Summary:
Changing PanResponderExample to use React state instead of setNativeProps. Fabric likely won't have setNativeProps so this is a conversion in that direction. This is probably one of the most complicated usages of setNativeProps and it feels *okay* with React state. I'm sure it is worse on lower end devices though.

In general we know that going to JS for an animation is not the correct approach so this getting worse in Fabric is probably fine for that reason too. Staying in native with something like react-native-gesture-handler is probably more aligned with the future.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D18258130

fbshipit-source-id: eed6a8eb839c6607463f3140191945ea753a697b

RNTester/js/examples/PanResponder/PanResponderExample.js

@@ -12,6 +12,7 @@
 
 const React = require('react');
 const {PanResponder, StyleSheet, View} = require('react-native');
+const RNTesterPage = require('../../components/RNTesterPage');
 
 import type {
   PanResponderInstance,
@@ -28,8 +29,24 @@ type CircleStyles = {
 const CIRCLE_SIZE = 80;
 
 type Props = $ReadOnly<{||}>;
+type State = {|
+  left: number,
+  top: number,
+  pressed: boolean,
+|};
+
+class PanResponderExample extends React.Component<Props, State> {
+  _previousLeft: number = 20;
+  _previousTop: number = 84;
+  _circleStyles: {|style: CircleStyles|} = {style: {}};
+  circle: ?React.ElementRef<typeof View> = null;
+
+  state: State = {
+    left: 20,
+    top: 84,
+    pressed: false,
+  };
 
-class PanResponderExample extends React.Component<Props> {
   _handleStartShouldSetPanResponder = (
     event: PressEvent,
     gestureState: GestureState,
@@ -50,17 +67,22 @@ class PanResponderExample extends React.Component<Props> {
     event: PressEvent,
     gestureState: GestureState,
   ) => {
-    this._highlight();
+    this.setState({
+      pressed: true,
+    });
   };
 
   _handlePanResponderMove = (event: PressEvent, gestureState: GestureState) => {
-    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
-    this._circleStyles.style.top = this._previousTop + gestureState.dy;
-    this._updateNativeStyles();
+    this.setState({
+      left: this._previousLeft + gestureState.dx,
+      top: this._previousTop + gestureState.dy,
+    });
   };
 
   _handlePanResponderEnd = (event: PressEvent, gestureState: GestureState) => {
-    this._unHighlight();
+    this.setState({
+      pressed: false,
+    });
     this._previousLeft += gestureState.dx;
     this._previousTop += gestureState.dy;
   };
@@ -74,52 +96,29 @@ class PanResponderExample extends React.Component<Props> {
     onPanResponderTerminate: this._handlePanResponderEnd,
   });
 
-  _previousLeft: number = 0;
-  _previousTop: number = 0;
-  _circleStyles: {|style: CircleStyles|} = {style: {}};
-  circle: ?React.ElementRef<typeof View> = null;
-
-  UNSAFE_componentWillMount() {
-    this._previousLeft = 20;
-    this._previousTop = 84;
-    this._circleStyles = {
-      style: {
-        left: this._previousLeft,
-        top: this._previousTop,
-        backgroundColor: 'green',
-      },
-    };
-  }
-
-  componentDidMount() {
-    this._updateNativeStyles();
-  }
-
-  _highlight() {
-    this._circleStyles.style.backgroundColor = 'blue';
-    this._updateNativeStyles();
-  }
-
-  _unHighlight() {
-    this._circleStyles.style.backgroundColor = 'green';
-    this._updateNativeStyles();
-  }
-
-  _updateNativeStyles() {
-    this.circle && this.circle.setNativeProps(this._circleStyles);
-  }
-
   render(): React.Node {
     return (
-      <View style={styles.container}>
-        <View
-          ref={circle => {
-            this.circle = circle;
-          }}
-          style={styles.circle}
-          {...this._panResponder.panHandlers}
-        />
-      </View>
+      <RNTesterPage
+        noSpacer={true}
+        noScroll={true}
+        title="Basic gesture handling">
+        <View style={styles.container}>
+          <View
+            ref={circle => {
+              this.circle = circle;
+            }}
+            style={[
+              styles.circle,
+              {
+                translateX: this.state.left,
+                translateY: this.state.top,
+                backgroundColor: this.state.pressed ? 'blue' : 'green',
+              },
+            ]}
+            {...this._panResponder.panHandlers}
+          />
+        </View>
+      </RNTesterPage>
     );
   }
 }
@@ -143,6 +142,7 @@ const styles = StyleSheet.create({
 exports.title = 'PanResponder Sample';
 exports.description =
   'Shows the Use of PanResponder to provide basic gesture handling';
+exports.simpleExampleContainer = true;
 exports.examples = [
   {
     title: 'Basic gesture handling',