diff --git a/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js b/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js index 763b5283..82faaadc 100644 --- a/packages/react-native-web/src/vendor/react-native/Animated/createAnimatedComponent.js +++ b/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 ?? '<>', + ); + 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 ( + + ); + }); } export default createAnimatedComponent;