From 40f4c662bc7a66e5caea4909d74f435f5b72190c Mon Sep 17 00:00:00 2001 From: Genki Kondo Date: Wed, 25 May 2022 10:33:17 -0700 Subject: [PATCH] Set correct initial value for AnimatedComponent for styles backed by native animated nodes Summary: In AnimatedComponent.render, we get the initial values of any styles backed by AnimatedNode, but ONLY for non-native animations. Thus, if convert an animated node to native before the call to render to mount the component, we will end up not applying the initial value until after the component is mounted. This may result in a visible flicker as the expected value is applied some time after the component is mounted and visible. - Without native driver: BaseViewManager.setTransform called during view preallocation (ViewManager.createViewInstance) - With native driver: BaseViewManager.setTransform called during MountingManager.updateProps (called from PropsAnimatedNode.updateView) This diff removes the isNative check in AnimatedStyle and AnimatedProps when traversing style props. This shouldn't be a problem: - Created as non-native, animated with JS driver - This diff does not affect this scenario - Created as non-native, animated with native driver - Initial value is applied correctly on render/mount. On subsequent renders, the outdated value from JS side will not apply on the platform view as it has not changed. - Created as native, animated with native driver - Initial value is applied correctly on render/mount. On subsequent renders, the outdated value from JS side will not apply on the platform view as it has not changed. Changelog: [Internal][Fixed] - Set correct initial value for AnimatedComponent for styles backed by native animated nodes Reviewed By: JoshuaGross, javache Differential Revision: D36612758 fbshipit-source-id: 922d6534c605b3eb0a1d9476753111b726f138f2 --- Libraries/Animated/nodes/AnimatedProps.js | 6 +----- Libraries/Animated/nodes/AnimatedStyle.js | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/Libraries/Animated/nodes/AnimatedProps.js b/Libraries/Animated/nodes/AnimatedProps.js index 76576de422ff23..44e4759750e741 100644 --- a/Libraries/Animated/nodes/AnimatedProps.js +++ b/Libraries/Animated/nodes/AnimatedProps.js @@ -41,11 +41,7 @@ class AnimatedProps extends AnimatedNode { for (const key in this._props) { const value = this._props[key]; if (value instanceof AnimatedNode) { - if (!value.__isNative || value instanceof AnimatedStyle) { - // We cannot use value of natively driven nodes this way as the value we have access from - // JS may not be up to date. - props[key] = value.__getValue(); - } + props[key] = value.__getValue(); } else if (value instanceof AnimatedEvent) { props[key] = value.__getHandler(); } else { diff --git a/Libraries/Animated/nodes/AnimatedStyle.js b/Libraries/Animated/nodes/AnimatedStyle.js index 92dfb3cc7c041d..0d70430b872681 100644 --- a/Libraries/Animated/nodes/AnimatedStyle.js +++ b/Libraries/Animated/nodes/AnimatedStyle.js @@ -39,11 +39,7 @@ class AnimatedStyle extends AnimatedWithChildren { for (const key in style) { const value = style[key]; if (value instanceof AnimatedNode) { - if (!value.__isNative) { - // We cannot use value of natively driven nodes this way as the value we have access from - // JS may not be up to date. - updatedStyle[key] = value.__getValue(); - } + updatedStyle[key] = value.__getValue(); } else if (value && !Array.isArray(value) && typeof value === 'object') { // Support animating nested values (for example: shadowOffset.height) updatedStyle[key] = this._walkStyleAndGetValues(value);