Back out "Remove deprecated lifecycles usage"

Summary:
Changelog:
[General][Changed] REVERT: createAnimatedComponent: removed deprecated lifecycles usage

Original commit changeset: 04d016b30ae0

Reviewed By: JoshuaGross

Differential Revision: D27053061

fbshipit-source-id: 6bb50da0a773070a979e7c52957a375b20c7c609

Libraries/Animated/createAnimatedComponent.js

@@ -53,16 +53,8 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   );
 
   class AnimatedComponent extends React.Component<Object> {
-    constructor(props) {
-      super(props);
-      this._waitForUpdate();
-      this._attachProps(this.props);
-      this._lastProps = this.props;
-    }
-
     _component: any; // TODO T53738161: flow type this, and the whole file
     _invokeAnimatedPropsCallbackOnMount: boolean = false;
-    _lastProps: Object;
     _prevComponent: any;
     _propsAnimated: AnimatedProps;
     _eventDetachers: Array<Function> = [];
@@ -182,6 +174,10 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     _attachProps(nextProps) {
       const oldPropsAnimated = this._propsAnimated;
 
+      if (nextProps === oldPropsAnimated) {
+        return;
+      }
+
       this._propsAnimated = new AnimatedProps(
         nextProps,
         this._animatedPropsCallback,
@@ -223,11 +219,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     });
 
     render() {
-      if (this._lastProps !== this.props) {
-        this._waitForUpdate();
-        this._attachProps(this.props);
-        this._lastProps = this.props;
-      }
       const {style = {}, ...props} = this._propsAnimated.__getValue() || {};
       const {style: passthruStyle = {}, ...passthruProps} =
         this.props.passthroughAnimatedPropExplicitValues || {};
@@ -272,6 +263,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       );
     }
 
+    UNSAFE_componentWillMount() {
+      this._waitForUpdate();
+      this._attachProps(this.props);
+    }
+
     componentDidMount() {
       if (this._invokeAnimatedPropsCallbackOnMount) {
         this._invokeAnimatedPropsCallbackOnMount = false;
@@ -283,6 +279,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       this._markUpdateComplete();
     }
 
+    UNSAFE_componentWillReceiveProps(newProps) {
+      this._waitForUpdate();
+      this._attachProps(newProps);
+    }
+
     componentDidUpdate(prevProps) {
       if (this._component !== this._prevComponent) {
         this._propsAnimated.setNativeView(this._component);

packages/rn-tester/js/examples/Animated/AnimatedExample.js

@@ -12,14 +12,7 @@
 
 const RNTesterButton = require('../../components/RNTesterButton');
 const React = require('react');
-const {
+const {Animated, Easing, StyleSheet, Text, View} = require('react-native');
-  Animated,
-  Easing,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} = require('react-native');
 
 import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
 
@@ -90,17 +83,11 @@ exports.examples = ([
       }
 
       type Props = $ReadOnly<{||}>;
-      type State = {|
+      type State = {|show: boolean|};
-        disabled: boolean,
-        pressCount: number,
-        show: boolean,
-      |};
       class FadeInExample extends React.Component<Props, State> {
         constructor(props: Props) {
           super(props);
           this.state = {
-            disabled: true,
-            pressCount: 0,
             show: true,
           };
         }
@@ -110,35 +97,15 @@ exports.examples = ([
               <RNTesterButton
                 testID="toggle-button"
                 onPress={() => {
-                  this.setState(state => ({pressCount: 0, show: !state.show}));
+                  this.setState(state => ({show: !state.show}));
                 }}>
                 Press to {this.state.show ? 'Hide' : 'Show'}
               </RNTesterButton>
-              <RNTesterButton
-                testID="toggle-pressable"
-                onPress={() => {
-                  this.setState(state => ({disabled: !state.disabled}));
-                }}>
-                Press to {this.state.disabled ? 'Enable' : 'Disable'}
-              </RNTesterButton>
               {this.state.show && (
                 <FadeInView>
-                  <Pressable
+                  <View testID="fade-in-view" style={styles.content}>
-                    testID="fade-in-view"
+                    <Text>FadeInView</Text>
-                    style={styles.content}
+                  </View>
-                    disabled={this.state.disabled}
-                    onPress={() => {
-                      this.setState(state => ({
-                        pressCount: this.state.pressCount + 1,
-                      }));
-                    }}>
-                    <Text>
-                      FadeInView
-                      {this.state.disabled
-                        ? ''
-                        : ` Pressable: ${this.state.pressCount}`}
-                    </Text>
-                  </Pressable>
                 </FadeInView>
               )}
             </View>