Minimal update of Animated

Ref #1576

packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js

@@ -13,6 +13,7 @@ import { AnimatedEvent } from './AnimatedEvent';
 import AnimatedProps from './nodes/AnimatedProps';
 import React from 'react';
 import invariant from 'fbjs/lib/invariant';
+import setAndForwardRef from '../../../modules/setAndForwardRef';
 
 function createAnimatedComponent(Component: any, defaultProps: any): any {
   invariant(
@@ -40,10 +41,6 @@ function createAnimatedComponent(Component: any, defaultProps: any): any {
       this._detachNativeEvents();
     }
 
-    setNativeProps(props) {
-      this._component.setNativeProps(props);
-    }
-
     UNSAFE_componentWillMount() {
       this._attachProps(this.props);
     }
@@ -143,6 +140,27 @@ function createAnimatedComponent(Component: any, defaultProps: any): any {
       }
     }
 
+    _setComponentRef = setAndForwardRef({
+      getForwardedRef: () => this.props.forwardedRef,
+      setLocalRef: ref => {
+        this._prevComponent = this._component;
+        this._component = ref;
+
+        // TODO: Delete this in a future release.
+        if (ref != null && ref.getNode == null) {
+          ref.getNode = () => {
+            console.warn(
+              '%s: Calling `getNode()` on the ref of an Animated component ' +
+                'is no longer necessary. You can now directly use the ref ' +
+                'instead. This method will be removed in a future release.',
+              ref.constructor.name ?? '<<anonymous>>',
+            );
+            return ref;
+          };
+        }
+      },
+    });
+
     render() {
       const props = this._propsAnimated.__getValue();
       return (
@@ -158,22 +176,18 @@ function createAnimatedComponent(Component: any, defaultProps: any): any {
         />
       );
     }
-
-    _setComponentRef = c => {
-      this._prevComponent = this._component;
-      this._component = c;
-    };
-
-    // A third party library can use getNode()
-    // to get the node reference of the decorated component
-    getNode() {
-      return this._component;
-    }
   }
 
   const propTypes = Component.propTypes;
 
-  return AnimatedComponent;
+  return React.forwardRef(function AnimatedComponentWrapper(props, ref) {
+    return (
+      <AnimatedComponent
+        {...props}
+        {...(ref == null ? null : {forwardedRef: ref})}
+      />
+    );
+  });
 }
 
 export default createAnimatedComponent;