Remove deprecated lifecycles usage

Summary: Changelog: [General][Changed] createAnimatedComponent: removed deprecated lifecycles usage Reviewed By: lunaleaps Differential Revision: D26734209 fbshipit-source-id: 04d016b30ae0d989890a4b3d8602d47a399dcd11
facebook · Mar 12, 2021 · ba61267 · ba61267
1 parent b512beb
commit ba61267
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 20 deletions.
diff --git a/Libraries/Animated/createAnimatedComponent.js b/Libraries/Animated/createAnimatedComponent.js
@@ -53,8 +53,16 @@ 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> = [];
@@ -174,10 +182,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     _attachProps(nextProps) {
       const oldPropsAnimated = this._propsAnimated;
 
-      if (nextProps === oldPropsAnimated) {
-        return;
-      }
-
       this._propsAnimated = new AnimatedProps(
         nextProps,
         this._animatedPropsCallback,
@@ -219,6 +223,11 @@ 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 || {};
@@ -263,11 +272,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       );
     }
 
-    UNSAFE_componentWillMount() {
-      this._waitForUpdate();
-      this._attachProps(this.props);
-    }
-
     componentDidMount() {
       if (this._invokeAnimatedPropsCallbackOnMount) {
         this._invokeAnimatedPropsCallbackOnMount = false;
@@ -279,11 +283,6 @@ 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);

diff --git a/packages/rn-tester/js/examples/Animated/AnimatedExample.js b/packages/rn-tester/js/examples/Animated/AnimatedExample.js
@@ -12,7 +12,14 @@
 
 const RNTesterButton = require('../../components/RNTesterButton');
 const React = require('react');
-const {Animated, Easing, StyleSheet, Text, View} = require('react-native');
+const {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} = require('react-native');
 
 import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
 
@@ -83,11 +90,17 @@ exports.examples = ([
       }
 
       type Props = $ReadOnly<{||}>;
-      type State = {|show: boolean|};
+      type State = {|
+        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,
           };
         }
@@ -97,15 +110,35 @@ exports.examples = ([
               <RNTesterButton
                 testID="toggle-button"
                 onPress={() => {
-                  this.setState(state => ({show: !state.show}));
+                  this.setState(state => ({pressCount: 0, 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>
-                  <View testID="fade-in-view" style={styles.content}>
-                    <Text>FadeInView</Text>
-                  </View>
+                  <Pressable
+                    testID="fade-in-view"
+                    style={styles.content}
+                    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>