Skip to content

Commit 0f615a1

Browse files
Bartlomiej Bloniarzfacebook-github-bot
Bartlomiej Bloniarz
authored and
facebook-github-bot
committed
Pass families to Native Animated (#54613)
Summary: This PR allows C++ Native Animated to use `ShadowNodeFamily` instances to use the `cloneMultiple` method when pushing updates through the `ShadowTree` in `AnimationBackend` # Changelog [General] [Added] - Add `connectAnimatedNodeToShadowNodeFamily` method to `NativeAnimatedModule` and `NativeAnimatedTurboModule` Differential Revision: D84055752
1 parent be94707 commit 0f615a1

File tree

11 files changed

+214
-11
lines changed

11 files changed

+214
-11
lines changed

‎packages/react-native/Libraries/Animated/__tests__/AnimatedBackend-itest.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import ensureInstance from '../../../src/private/__tests__/utilities/ensureInsta
1717
import * as Fantom from '@react-native/fantom';
1818
import {createRef} from 'react';
1919
import {Animated, useAnimatedValue} from 'react-native';
20+
import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
2021
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
2122

2223
test('animated opacity', () => {
@@ -73,3 +74,56 @@ test('animated opacity', () => {
7374
<rn-view opacity="0" />,
7475
);
7576
});
77+
78+
test('animate layout props', () => {
79+
const viewRef = createRef<HostInstance>();
80+
allowStyleProp('height');
81+
82+
let _animatedHeight;
83+
let _heightAnimation;
84+
85+
function MyApp() {
86+
const animatedHeight = useAnimatedValue(0);
87+
_animatedHeight = animatedHeight;
88+
return (
89+
<Animated.View
90+
ref={viewRef}
91+
style={[
92+
{
93+
width: 100,
94+
height: animatedHeight,
95+
},
96+
]}
97+
/>
98+
);
99+
}
100+
101+
const root = Fantom.createRoot();
102+
103+
Fantom.runTask(() => {
104+
root.render(<MyApp />);
105+
});
106+
107+
// const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
108+
109+
Fantom.runTask(() => {
110+
_heightAnimation = Animated.timing(_animatedHeight, {
111+
toValue: 100,
112+
duration: 10,
113+
useNativeDriver: true,
114+
}).start();
115+
});
116+
117+
Fantom.unstable_produceFramesForDuration(10);
118+
119+
// TODO: this shouldn't be neccessary since animation should be stopped after duration
120+
Fantom.runTask(() => {
121+
_heightAnimation?.stop();
122+
});
123+
124+
// TODO: getFabricUpdateProps is not working with the cloneMutliple method
125+
// expect(Fantom.unstable_getFabricUpdateProps(viewElement).height).toBe(100);
126+
expect(root.getRenderedOutput({props: ['height']}).toJSX()).toEqual(
127+
<rn-view height="100.000000" />,
128+
);
129+
});

‎packages/react-native/Libraries/Animated/nodes/AnimatedProps.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type {AnimatedStyleAllowlist} from './AnimatedStyle';
1515

1616
import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
1717
import {findNodeHandle} from '../../ReactNative/RendererProxy';
18+
import {getNodeFromPublicInstance} from '../../ReactPrivate/ReactNativePrivateInterface';
1819
import flattenStyle from '../../StyleSheet/flattenStyle';
1920
import {AnimatedEvent} from '../AnimatedEvent';
2021
import AnimatedNode from './AnimatedNode';
@@ -251,7 +252,9 @@ export default class AnimatedProps extends AnimatedNode {
251252
super.__setPlatformConfig(platformConfig);
252253

253254
if (this._target != null) {
254-
this.#connectAnimatedView(this._target);
255+
const target = this._target;
256+
this.#connectAnimatedView(target);
257+
this.#connectShadowNode(target);
255258
}
256259
}
257260
}
@@ -260,9 +263,10 @@ export default class AnimatedProps extends AnimatedNode {
260263
if (this._target?.instance === instance) {
261264
return;
262265
}
263-
this._target = {instance, connectedViewTag: null};
266+
const target = (this._target = {instance, connectedViewTag: null});
264267
if (this.__isNative) {
265-
this.#connectAnimatedView(this._target);
268+
this.#connectAnimatedView(target);
269+
this.#connectShadowNode(target);
266270
}
267271
}
268272

@@ -283,6 +287,19 @@ export default class AnimatedProps extends AnimatedNode {
283287
target.connectedViewTag = viewTag;
284288
}
285289

290+
#connectShadowNode(target: TargetView): void {
291+
invariant(this.__isNative, 'Expected node to be marked as "native"');
292+
// $FlowExpectedError[incompatible-type] - target.instance may be an HTMLElement but we need ReactNativeElement for Fabric
293+
const shadowNode = getNodeFromPublicInstance(target.instance);
294+
if (shadowNode == null) {
295+
return;
296+
}
297+
NativeAnimatedHelper.API.connectAnimatedNodeToShadowNodeFamily(
298+
this.__getNativeTag(),
299+
shadowNode,
300+
);
301+
}
302+
286303
#disconnectAnimatedView(target: TargetView): void {
287304
invariant(this.__isNative, 'Expected node to be marked as "native"');
288305
const viewTag = target.connectedViewTag;

‎packages/react-native/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ - (void)setSurfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter
165165
}];
166166
}
167167

168+
RCT_EXPORT_METHOD(connectAnimatedNodeToShadowNodeFamily : (double)nodeTag shadowNode : (NSDictionary *)shadowNode) {}
169+
168170
RCT_EXPORT_METHOD(disconnectAnimatedNodeFromView : (double)nodeTag viewTag : (double)viewTag)
169171
{
170172
[self queueOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {

‎packages/react-native/ReactCommon/react/renderer/animated/AnimatedModule.cpp‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99

1010
#include <glog/logging.h>
1111
#include <jsi/JSIDynamic.h>
12+
#include <react/renderer/bridging/bridging.h>
1213

1314
namespace facebook::react {
14-
1515
AnimatedModule::AnimatedModule(
1616
std::shared_ptr<CallInvoker> jsInvoker,
1717
std::shared_ptr<NativeAnimatedNodesManagerProvider> nodesManagerProvider)
@@ -160,6 +160,19 @@ void AnimatedModule::connectAnimatedNodeToView(
160160
ConnectAnimatedNodeToViewOp{.nodeTag = nodeTag, .viewTag = viewTag});
161161
}
162162

163+
void AnimatedModule::connectAnimatedNodeToShadowNodeFamily(
164+
jsi::Runtime& rt,
165+
Tag nodeTag,
166+
jsi::Object shadowNodeObj) {
167+
const auto& shadowNode = Bridging<std::shared_ptr<const ShadowNode>>::fromJs(
168+
rt, jsi::Value(rt, shadowNodeObj));
169+
170+
operations_.emplace_back(
171+
ConnectAnimatedNodeToShadowNodeFamilyOp{
172+
.nodeTag = nodeTag,
173+
.shadowNodeFamily = shadowNode->getFamilyShared()});
174+
}
175+
163176
void AnimatedModule::disconnectAnimatedNodeFromView(
164177
jsi::Runtime& /*rt*/,
165178
Tag nodeTag,
@@ -282,6 +295,11 @@ void AnimatedModule::executeOperation(
282295
DisconnectAnimatedNodeFromViewOp>) {
283296
nodesManager->disconnectAnimatedNodeFromView(
284297
op.nodeTag, op.viewTag);
298+
} else if constexpr (std::is_same_v<
299+
T,
300+
ConnectAnimatedNodeToShadowNodeFamilyOp>) {
301+
nodesManager->connectAnimatedNodeToShadowNodeFamily(
302+
op.nodeTag, op.shadowNodeFamily);
285303
} else if constexpr (std::is_same_v<T, RestoreDefaultValuesOp>) {
286304
nodesManager->restoreDefaultValues(op.nodeTag);
287305
} else if constexpr (std::is_same_v<T, DropAnimatedNodeOp>) {

‎packages/react-native/ReactCommon/react/renderer/animated/AnimatedModule.h‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,11 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
8787
Tag viewTag{};
8888
};
8989

90+
struct ConnectAnimatedNodeToShadowNodeFamilyOp {
91+
Tag nodeTag{};
92+
std::shared_ptr<const ShadowNodeFamily> shadowNodeFamily{};
93+
};
94+
9095
struct DisconnectAnimatedNodeFromViewOp {
9196
Tag nodeTag{};
9297
Tag viewTag{};
@@ -124,6 +129,7 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
124129
SetAnimatedNodeOffsetOp,
125130
SetAnimatedNodeValueOp,
126131
ConnectAnimatedNodeToViewOp,
132+
ConnectAnimatedNodeToShadowNodeFamilyOp,
127133
DisconnectAnimatedNodeFromViewOp,
128134
RestoreDefaultValuesOp,
129135
FlattenAnimatedNodeOffsetOp,
@@ -176,6 +182,8 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
176182

177183
void connectAnimatedNodeToView(jsi::Runtime &rt, Tag nodeTag, Tag viewTag);
178184

185+
void connectAnimatedNodeToShadowNodeFamily(jsi::Runtime &rt, Tag nodeTag, jsi::Object shadowNode);
186+
179187
void disconnectAnimatedNodeFromView(jsi::Runtime &rt, Tag nodeTag, Tag viewTag);
180188

181189
void restoreDefaultValues(jsi::Runtime &rt, Tag nodeTag);

‎packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,20 @@ void NativeAnimatedNodesManager::connectAnimatedNodeToView(
238238
}
239239
}
240240

241+
void NativeAnimatedNodesManager::connectAnimatedNodeToShadowNodeFamily(
242+
Tag propsNodeTag,
243+
std::shared_ptr<const ShadowNodeFamily> family) noexcept {
244+
react_native_assert(propsNodeTag);
245+
auto node = getAnimatedNode<PropsAnimatedNode>(propsNodeTag);
246+
if (node != nullptr) {
247+
node->connectToFamily(family);
248+
updatedNodeTags_.insert(node->tag());
249+
} else {
250+
LOG(WARNING)
251+
<< "Cannot ConnectAnimatedNodeToShadowNodeFamily, animated node has to be props type";
252+
}
253+
}
254+
241255
void NativeAnimatedNodesManager::disconnectAnimatedNodeFromView(
242256
Tag propsNodeTag,
243257
Tag viewTag) noexcept {
@@ -889,10 +903,14 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
889903
Tag viewTag,
890904
const folly::dynamic& props,
891905
bool layoutStyleUpdated,
892-
bool forceFabricCommit) noexcept {
906+
bool forceFabricCommit,
907+
std::shared_ptr<const ShadowNodeFamily> family) noexcept {
893908
if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
894909
if (layoutStyleUpdated) {
895910
mergeObjects(updateViewProps_[viewTag], props);
911+
if (family) {
912+
tagToShadowNodeFamily_[viewTag] = std::move(family);
913+
}
896914
} else {
897915
mergeObjects(updateViewPropsDirect_[viewTag], props);
898916
}
@@ -1003,7 +1021,31 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
10031021
AnimationMutation{tag, nullptr, propsBuilder.get()});
10041022
containsChange = true;
10051023
}
1006-
updateViewPropsDirect_.clear();
1024+
for (auto& [tag, props] : updateViewProps_) {
1025+
auto familyIt = tagToShadowNodeFamily_.find(tag);
1026+
if (familyIt != tagToShadowNodeFamily_.end()) {
1027+
if (props.find("width") != props.items().end()) {
1028+
propsBuilder.setWidth(
1029+
yoga::Style::SizeLength::points(props["width"].asDouble()));
1030+
}
1031+
if (props.find("height") != props.items().end()) {
1032+
propsBuilder.setHeight(
1033+
yoga::Style::SizeLength::points(props["height"].asDouble()));
1034+
}
1035+
// propsBuilder.storeDynamic(props);
1036+
mutations.push_back(
1037+
AnimationMutation{
1038+
.tag = tag,
1039+
.family = familyIt->second.get(),
1040+
.props = propsBuilder.get()});
1041+
}
1042+
containsChange = true;
1043+
}
1044+
if (containsChange) {
1045+
updateViewPropsDirect_.clear();
1046+
updateViewProps_.clear();
1047+
tagToShadowNodeFamily_.clear();
1048+
}
10071049
}
10081050

10091051
if (!containsChange) {
@@ -1023,7 +1065,8 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
10231065
}
10241066
}
10251067

1026-
// Step 2: update all nodes that are connected to the finished animations.
1068+
// Step 2: update all nodes that are connected to the finished
1069+
// animations.
10271070
updateNodes(finishedAnimationValueNodes);
10281071

10291072
isEventAnimationInProgress_ = false;
@@ -1034,6 +1077,17 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
10341077
mutations.push_back(
10351078
AnimationMutation{tag, nullptr, propsBuilder.get()});
10361079
}
1080+
for (auto& [tag, props] : updateViewProps_) {
1081+
auto familyIt = tagToShadowNodeFamily_.find(tag);
1082+
if (familyIt != tagToShadowNodeFamily_.end()) {
1083+
propsBuilder.storeDynamic(props);
1084+
mutations.push_back(
1085+
AnimationMutation{
1086+
.tag = tag,
1087+
.family = familyIt->second.get(),
1088+
.props = propsBuilder.get()});
1089+
}
1090+
}
10371091
}
10381092
} else {
10391093
// There is no active animation. Stop the render callback.
@@ -1113,7 +1167,8 @@ void NativeAnimatedNodesManager::onRender() {
11131167
}
11141168
}
11151169

1116-
// Step 2: update all nodes that are connected to the finished animations.
1170+
// Step 2: update all nodes that are connected to the finished
1171+
// animations.
11171172
updateNodes(finishedAnimationValueNodes);
11181173

11191174
isEventAnimationInProgress_ = false;

‎packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
#include <react/renderer/animationbackend/AnimationBackend.h>
2222
#endif
2323
#include <react/renderer/core/ReactPrimitives.h>
24+
#include <react/renderer/core/ShadowNode.h>
2425
#include <react/renderer/uimanager/UIManagerAnimationBackend.h>
2526
#include <chrono>
2627
#include <memory>
@@ -101,6 +102,8 @@ class NativeAnimatedNodesManager {
101102

102103
void connectAnimatedNodeToView(Tag propsNodeTag, Tag viewTag) noexcept;
103104

105+
void connectAnimatedNodeToShadowNodeFamily(Tag propsNodeTag, std::shared_ptr<const ShadowNodeFamily> family) noexcept;
106+
104107
void disconnectAnimatedNodes(Tag parentTag, Tag childTag) noexcept;
105108

106109
void disconnectAnimatedNodeFromView(Tag propsNodeTag, Tag viewTag) noexcept;
@@ -150,7 +153,8 @@ class NativeAnimatedNodesManager {
150153
Tag viewTag,
151154
const folly::dynamic &props,
152155
bool layoutStyleUpdated,
153-
bool forceFabricCommit) noexcept;
156+
bool forceFabricCommit,
157+
std::shared_ptr<const ShadowNodeFamily> family = nullptr) noexcept;
154158

155159
/**
156160
* Commits all pending animated property updates to their respective views.
@@ -257,6 +261,7 @@ class NativeAnimatedNodesManager {
257261

258262
std::unordered_map<Tag, folly::dynamic> updateViewProps_{};
259263
std::unordered_map<Tag, folly::dynamic> updateViewPropsDirect_{};
264+
std::unordered_map<Tag, std::shared_ptr<const ShadowNodeFamily>> tagToShadowNodeFamily_{};
260265

261266
/*
262267
* Sometimes a view is not longer connected to a PropsAnimatedNode, but

‎packages/react-native/ReactCommon/react/renderer/animated/nodes/PropsAnimatedNode.cpp‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ void PropsAnimatedNode::connectToView(Tag viewTag) {
6262
connectedViewTag_ = viewTag;
6363
}
6464

65+
void PropsAnimatedNode::connectToFamily(
66+
std::shared_ptr<const ShadowNodeFamily>& family) {
67+
viewShadowNodeFamily_ = family;
68+
}
69+
6570
void PropsAnimatedNode::disconnectFromView(Tag viewTag) {
6671
react_native_assert(
6772
connectedViewTag_ == viewTag &&
@@ -148,7 +153,11 @@ void PropsAnimatedNode::update(bool forceFabricCommit) {
148153
layoutStyleUpdated_ = isLayoutStyleUpdated(getConfig()["props"], *manager_);
149154

150155
manager_->schedulePropsCommit(
151-
connectedViewTag_, props_, layoutStyleUpdated_, forceFabricCommit);
156+
connectedViewTag_,
157+
props_,
158+
layoutStyleUpdated_,
159+
forceFabricCommit,
160+
viewShadowNodeFamily_.lock());
152161
}
153162

154163
} // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/animated/nodes/PropsAnimatedNode.h‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@
1414
#include "AnimatedNode.h"
1515

1616
#include <react/renderer/animated/internal/primitives.h>
17+
#include <react/renderer/core/ShadowNode.h>
1718
#include <mutex>
1819

1920
namespace facebook::react {
2021
class PropsAnimatedNode final : public AnimatedNode {
2122
public:
2223
PropsAnimatedNode(Tag tag, const folly::dynamic &config, NativeAnimatedNodesManager &manager);
2324
void connectToView(Tag viewTag);
25+
void connectToFamily(std::shared_ptr<const ShadowNodeFamily> &family);
2426
void disconnectFromView(Tag viewTag);
2527
void restoreDefaultValues();
2628

@@ -53,5 +55,6 @@ class PropsAnimatedNode final : public AnimatedNode {
5355

5456
// Needed for PlatformColor resolver
5557
SurfaceId connectedRootTag_{animated::undefinedAnimatedNodeIdentifier};
58+
std::weak_ptr<const ShadowNodeFamily> viewShadowNodeFamily_{};
5659
};
5760
} // namespace facebook::react

0 commit comments

Comments
 (0)