From 8341411daa0d402141757d7a9f096699d2b97876 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Mon, 10 May 2021 17:01:43 -0700 Subject: [PATCH] Animated: Decouple `__attach` from `new AnimatedProps` Summary: Decouples `__attach` from the constructor in `AnimatedProps`. This change will enable the instantiation of `AnimatedProps` (and subsequent invocation of `__getValue()`) without having to trigger side effects until after mount or update. This is important in order for `Animated` to ever become safe for Concurrent Mode. Changelog: [Internal] Reviewed By: lunaleaps Differential Revision: D28271628 fbshipit-source-id: 6ccfed6de79382cecdfa6939c7dad3134e1ecaaa --- Libraries/Animated/__tests__/Animated-test.js | 13 +++++++++++-- Libraries/Animated/createAnimatedComponent.js | 1 + Libraries/Animated/nodes/AnimatedProps.js | 1 - 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/Libraries/Animated/__tests__/Animated-test.js b/Libraries/Animated/__tests__/Animated-test.js index e24a4e5620fa7c..2b2ffe04dfdfb8 100644 --- a/Libraries/Animated/__tests__/Animated-test.js +++ b/Libraries/Animated/__tests__/Animated-test.js @@ -57,8 +57,6 @@ describe('Animated tests', () => { callback, ); - expect(anim.__getChildren().length).toBe(3); - expect(node.__getValue()).toEqual({ style: { backgroundColor: 'red', @@ -71,6 +69,12 @@ describe('Animated tests', () => { }, }); + expect(anim.__getChildren().length).toBe(0); + + node.__attach(); + + expect(anim.__getChildren().length).toBe(3); + anim.setValue(0.5); expect(callback).toBeCalled(); @@ -811,6 +815,10 @@ describe('Animated tests', () => { }, }); + node.__attach(); + + expect(callback.mock.calls.length).toBe(0); + vec.setValue({x: 42, y: 1492}); expect(callback.mock.calls.length).toBe(2); // once each for x, y @@ -904,6 +912,7 @@ describe('Animated tests', () => { }, callback, ); + view.__attach(); const listener = jest.fn(); const id = value4.addListener(listener); value3.setValue(137); diff --git a/Libraries/Animated/createAnimatedComponent.js b/Libraries/Animated/createAnimatedComponent.js index 596c6cfc75c58c..02782c183cbe0f 100644 --- a/Libraries/Animated/createAnimatedComponent.js +++ b/Libraries/Animated/createAnimatedComponent.js @@ -182,6 +182,7 @@ function createAnimatedComponent( nextProps, this._animatedPropsCallback, ); + this._propsAnimated.__attach(); // When you call detach, it removes the element from the parent list // of children. If it goes to 0, then the parent also detaches itself diff --git a/Libraries/Animated/nodes/AnimatedProps.js b/Libraries/Animated/nodes/AnimatedProps.js index 578ed6718d213f..6f915bb5b8fd1d 100644 --- a/Libraries/Animated/nodes/AnimatedProps.js +++ b/Libraries/Animated/nodes/AnimatedProps.js @@ -33,7 +33,6 @@ class AnimatedProps extends AnimatedNode { } this._props = props; this._callback = callback; - this.__attach(); } __getValue(): Object {