Skip to content

Commit

Permalink
Apply Animated initialProps handling to Fabric only (#34927)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #34927

The changes made in D36902220 (a041951) and D36958882 (d8c25ca) attempted to reduce flickering and consistency issues when using Animated.

In the old renderer, we explicitly reset all animated props, and wait for the subsequent React commit to set the props to the right state, but if `initialProps` are used, the React reconciliation may not be able to identify the prop-update is required and will leave out the value. This behaviour is different in the new renderer, where we do not explicitly `restoreDefaultValues` on detaching the animated node, and instead rely on the latest state being correct(?).

Changelog:
[General][Fixed] Stop styles from being reset when detaching Animated.Values in old renderer

Fixes #34665

Reviewed By: rshest

Differential Revision: D40194072

fbshipit-source-id: 1b3fb1d1f4a39036a501a8a21e57002035dd5659

# Conflicts:
#	Libraries/Animated/createAnimatedComponent.js
  • Loading branch information
javache authored and kelset committed Oct 11, 2022
1 parent 37790e4 commit fe8f0fb
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 17 deletions.
19 changes: 13 additions & 6 deletions Libraries/Animated/createAnimatedComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -200,18 +200,25 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
},
});

render() {
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 (
Expand Down
4 changes: 1 addition & 3 deletions Libraries/Animated/nodes/AnimatedProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ 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)) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -883,7 +883,7 @@ public void execute(NativeAnimatedNodesManager animatedNodesManager) {
if (ANIMATED_MODULE_DEBUG) {
FLog.d(
NAME,
"execute: disconnectAnimatedNodeFromView: "
"execute disconnectAnimatedNodeFromView: "
+ animatedNodeTag
+ " viewTag: "
+ viewTag);
Expand All @@ -897,19 +897,15 @@ 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(
new UIThreadOperation() {
@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);
}
Expand Down

0 comments on commit fe8f0fb

Please sign in to comment.