diff --git a/Libraries/Animated/createAnimatedComponent.js b/Libraries/Animated/createAnimatedComponent.js index 7889b0de085067..5ee706d64f2b4b 100644 --- a/Libraries/Animated/createAnimatedComponent.js +++ b/Libraries/Animated/createAnimatedComponent.js @@ -199,17 +199,24 @@ function createAnimatedComponent( }); render(): React.Node { + // When rendering in Fabric and an AnimatedValue is used, we keep track of + // the initial value of that Value, to avoid additional prop updates when + // this component re-renders + const initialPropsIfFabric = this._isFabric() + ? this._initialAnimatedProps + : null; + const animatedProps = - this._propsAnimated.__getValue(this._initialAnimatedProps) || {}; + this._propsAnimated.__getValue(initialPropsIfFabric) || {}; + if (!this._initialAnimatedProps) { + this._initialAnimatedProps = animatedProps; + } + const {style = {}, ...props} = animatedProps; const {style: passthruStyle = {}, ...passthruProps} = this.props.passthroughAnimatedPropExplicitValues || {}; const mergedStyle = {...style, ...passthruStyle}; - if (!this._initialAnimatedProps) { - this._initialAnimatedProps = animatedProps; - } - // Force `collapsable` to be false so that native view is not flattened. // Flattened views cannot be accurately referenced by a native driver. return ( diff --git a/Libraries/Animated/nodes/AnimatedProps.js b/Libraries/Animated/nodes/AnimatedProps.js index bcaf685e24fdb4..dbbb8a7ac32538 100644 --- a/Libraries/Animated/nodes/AnimatedProps.js +++ b/Libraries/Animated/nodes/AnimatedProps.js @@ -46,9 +46,7 @@ export default class AnimatedProps extends AnimatedNode { // as they may not be up to date, so we use the initial value to ensure that values of // native animated nodes do not impact rerenders. if (value instanceof AnimatedStyle) { - props[key] = value.__getValue( - initialProps ? initialProps.style : null, - ); + props[key] = value.__getValue(initialProps?.style); } else if (!initialProps || !value.__isNative) { props[key] = value.__getValue(); } else if (initialProps.hasOwnProperty(key)) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java b/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java index f3b7e4e4040d67..bcbb2b082bd85d 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java +++ b/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java @@ -871,7 +871,7 @@ public void disconnectAnimatedNodeFromView( if (ANIMATED_MODULE_DEBUG) { FLog.d( NAME, - "queue: disconnectAnimatedNodeFromView: " + animatedNodeTag + " viewTag: " + viewTag); + "queue disconnectAnimatedNodeFromView: " + animatedNodeTag + " viewTag: " + viewTag); } decrementInFlightAnimationsForViewTag(viewTag); @@ -883,7 +883,7 @@ public void execute(NativeAnimatedNodesManager animatedNodesManager) { if (ANIMATED_MODULE_DEBUG) { FLog.d( NAME, - "execute: disconnectAnimatedNodeFromView: " + "execute disconnectAnimatedNodeFromView: " + animatedNodeTag + " viewTag: " + viewTag); @@ -897,8 +897,7 @@ public void execute(NativeAnimatedNodesManager animatedNodesManager) { public void restoreDefaultValues(final double animatedNodeTagDouble) { final int animatedNodeTag = (int) animatedNodeTagDouble; if (ANIMATED_MODULE_DEBUG) { - FLog.d( - NAME, "queue restoreDefaultValues: disconnectAnimatedNodeFromView: " + animatedNodeTag); + FLog.d(NAME, "queue restoreDefaultValues: " + animatedNodeTag); } addPreOperation( @@ -906,10 +905,7 @@ public void restoreDefaultValues(final double animatedNodeTagDouble) { @Override public void execute(NativeAnimatedNodesManager animatedNodesManager) { if (ANIMATED_MODULE_DEBUG) { - FLog.d( - NAME, - "execute restoreDefaultValues: disconnectAnimatedNodeFromView: " - + animatedNodeTag); + FLog.d(NAME, "execute restoreDefaultValues: " + animatedNodeTag); } animatedNodesManager.restoreDefaultValues(animatedNodeTag); }