Refactor: PanResponder example to inside the constructor. Avoid componentWillMount(). (facebook#373)

andrwsalcdo · charpeni · commit 18217cfc9f34 · 2018-05-29T20:40:05.000-04:00
diff --git a/docs/panresponder.md b/docs/panresponder.md
@@ -42,48 +42,51 @@ A `gestureState` object has the following:
 ### Basic Usage
 
 ```
-  componentWillMount: function() {
-    this._panResponder = PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) => true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    });
-  },
-
-  render: function() {
-    return (
-      <View {...this._panResponder.panHandlers} />
-    );
-  },
+  class ExampleComponent extends Component {
+    constructor(props) {
+      super(props)
+      this._panResponder = PanResponder.create({
+        // Ask to be the responder:
+        onStartShouldSetPanResponder: (evt, gestureState) => true,
+        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+        onMoveShouldSetPanResponder: (evt, gestureState) => true,
+        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+
+        onPanResponderGrant: (evt, gestureState) => {
+          // The gesture has started. Show visual feedback so the user knows
+          // what is happening!
+
+          // gestureState.d{x,y} will be set to zero now
+        },
+        onPanResponderMove: (evt, gestureState) => {
+          // The most recent move distance is gestureState.move{X,Y}
+
+          // The accumulated gesture distance since becoming responder is
+          // gestureState.d{x,y}
+        },
+        onPanResponderTerminationRequest: (evt, gestureState) => true,
+        onPanResponderRelease: (evt, gestureState) => {
+          // The user has released all touches while this view is the
+          // responder. This typically means a gesture has succeeded
+        },
+        onPanResponderTerminate: (evt, gestureState) => {
+          // Another component has become the responder, so this gesture
+          // should be cancelled
+        },
+        onShouldBlockNativeResponder: (evt, gestureState) => {
+          // Returns whether this component should block native components from becoming the JS
+          // responder. Returns true by default. Is currently only supported on android.
+          return true;
+        },
+      });
+    }
+
+    render() {
+      return (
+        <View {...this._panResponder.panHandlers} />
+      );
+    }
+  }
 ```
 
 ### Working Example
