From 9ab2a2b0ccfe0b9011565660d41318fc8d337359 Mon Sep 17 00:00:00 2001
From: Eli White <eliwhite@fb.com>
Date: Mon, 11 Nov 2019 10:50:06 -0800
Subject: [PATCH] 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
---
 .../PanResponder/PanResponderExample.js       | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/RNTester/js/examples/PanResponder/PanResponderExample.js b/RNTester/js/examples/PanResponder/PanResponderExample.js
index 8b6d75a35e8..cc480520f33 100644
--- a/RNTester/js/examples/PanResponder/PanResponderExample.js
+++ b/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',