Skip to content

Commit cd4744c

Browse files
coadometa-codesync[bot]
coado
authored and
meta-codesync[bot]
committed
Add support for margin and padding props to AnimationBackend (#54738)
Summary: Pull Request resolved: #54738 Adds support for margin and padding layout props to AnimationBackend. ## Changelog: [General][Added] - Added support for margin and padding props to AnimationBackend. Reviewed By: zeyap Differential Revision: D88073733 fbshipit-source-id: 8b2ad8317c24f7a81cab7f53d31fb90c6347bab1
1 parent 66d1ec0 commit cd4744c

5 files changed

Lines changed: 100 additions & 1 deletion

File tree

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,8 @@ void packAnimatedProp(
149149
case WIDTH:
150150
case HEIGHT:
151151
case FLEX:
152+
case PADDING:
153+
case MARGIN:
152154
throw std::runtime_error("Tried to synchronously update layout props");
153155
}
154156
}

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedProps.h‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ enum PropName {
1717
WIDTH,
1818
HEIGHT,
1919
BORDER_RADII,
20+
MARGIN,
21+
PADDING,
2022
FLEX,
2123
TRANSFORM,
2224
BACKGROUND_COLOR,
@@ -75,6 +77,70 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
7577
viewProps.borderRadii = get<CascadedBorderRadii>(animatedProp);
7678
break;
7779

80+
case MARGIN: {
81+
const auto &margins = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
82+
if (margins.left.has_value()) {
83+
viewProps.yogaStyle.setMargin(yoga::Edge::Left, margins.left.value());
84+
}
85+
if (margins.top.has_value()) {
86+
viewProps.yogaStyle.setMargin(yoga::Edge::Top, margins.top.value());
87+
}
88+
if (margins.right.has_value()) {
89+
viewProps.yogaStyle.setMargin(yoga::Edge::Right, margins.right.value());
90+
}
91+
if (margins.bottom.has_value()) {
92+
viewProps.yogaStyle.setMargin(yoga::Edge::Bottom, margins.bottom.value());
93+
}
94+
if (margins.start.has_value()) {
95+
viewProps.yogaStyle.setMargin(yoga::Edge::Start, margins.start.value());
96+
}
97+
if (margins.end.has_value()) {
98+
viewProps.yogaStyle.setMargin(yoga::Edge::End, margins.end.value());
99+
}
100+
if (margins.horizontal.has_value()) {
101+
viewProps.yogaStyle.setMargin(yoga::Edge::Horizontal, margins.horizontal.value());
102+
}
103+
if (margins.vertical.has_value()) {
104+
viewProps.yogaStyle.setMargin(yoga::Edge::Vertical, margins.vertical.value());
105+
}
106+
if (margins.all.has_value()) {
107+
viewProps.yogaStyle.setMargin(yoga::Edge::All, margins.all.value());
108+
}
109+
break;
110+
}
111+
112+
case PADDING: {
113+
const auto &paddings = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
114+
if (paddings.left.has_value()) {
115+
viewProps.yogaStyle.setPadding(yoga::Edge::Left, paddings.left.value());
116+
}
117+
if (paddings.top.has_value()) {
118+
viewProps.yogaStyle.setPadding(yoga::Edge::Top, paddings.top.value());
119+
}
120+
if (paddings.right.has_value()) {
121+
viewProps.yogaStyle.setPadding(yoga::Edge::Right, paddings.right.value());
122+
}
123+
if (paddings.bottom.has_value()) {
124+
viewProps.yogaStyle.setPadding(yoga::Edge::Bottom, paddings.bottom.value());
125+
}
126+
if (paddings.start.has_value()) {
127+
viewProps.yogaStyle.setPadding(yoga::Edge::Start, paddings.start.value());
128+
}
129+
if (paddings.end.has_value()) {
130+
viewProps.yogaStyle.setPadding(yoga::Edge::End, paddings.end.value());
131+
}
132+
if (paddings.horizontal.has_value()) {
133+
viewProps.yogaStyle.setPadding(yoga::Edge::Horizontal, paddings.horizontal.value());
134+
}
135+
if (paddings.vertical.has_value()) {
136+
viewProps.yogaStyle.setPadding(yoga::Edge::Vertical, paddings.vertical.value());
137+
}
138+
if (paddings.all.has_value()) {
139+
viewProps.yogaStyle.setPadding(yoga::Edge::All, paddings.all.value());
140+
}
141+
break;
142+
}
143+
78144
case FLEX:
79145
viewProps.yogaStyle.setFlex(get<yoga::FloatOptional>(animatedProp));
80146
break;

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsBuilder.h‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,14 @@ struct AnimatedPropsBuilder {
3131
{
3232
props.push_back(std::make_unique<AnimatedProp<CascadedBorderRadii>>(BORDER_RADII, value));
3333
}
34+
void setMargin(CascadedRectangleEdges<yoga::StyleLength> &value)
35+
{
36+
props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(MARGIN, value));
37+
}
38+
void setPadding(CascadedRectangleEdges<yoga::StyleLength> &value)
39+
{
40+
props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(PADDING, value));
41+
}
3442
void setTransform(Transform &t)
3543
{
3644
props.push_back(std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.h‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,28 @@ inline void updateProp(const PropName propName, BaseViewProps &viewProps, const
9393
case SHADOW_RADIUS:
9494
viewProps.shadowRadius = snapshot.props.shadowRadius;
9595
break;
96+
97+
case MARGIN:
98+
viewProps.yogaStyle.setMargin(yoga::Edge::Left, snapshot.props.yogaStyle.margin(yoga::Edge::Left));
99+
viewProps.yogaStyle.setMargin(yoga::Edge::Right, snapshot.props.yogaStyle.margin(yoga::Edge::Right));
100+
viewProps.yogaStyle.setMargin(yoga::Edge::Top, snapshot.props.yogaStyle.margin(yoga::Edge::Top));
101+
viewProps.yogaStyle.setMargin(yoga::Edge::Bottom, snapshot.props.yogaStyle.margin(yoga::Edge::Bottom));
102+
viewProps.yogaStyle.setMargin(yoga::Edge::Start, snapshot.props.yogaStyle.margin(yoga::Edge::Start));
103+
viewProps.yogaStyle.setMargin(yoga::Edge::End, snapshot.props.yogaStyle.margin(yoga::Edge::End));
104+
viewProps.yogaStyle.setMargin(yoga::Edge::Horizontal, snapshot.props.yogaStyle.margin(yoga::Edge::Horizontal));
105+
viewProps.yogaStyle.setMargin(yoga::Edge::Vertical, snapshot.props.yogaStyle.margin(yoga::Edge::Vertical));
106+
break;
107+
108+
case PADDING:
109+
viewProps.yogaStyle.setPadding(yoga::Edge::Left, snapshot.props.yogaStyle.padding(yoga::Edge::Left));
110+
viewProps.yogaStyle.setPadding(yoga::Edge::Right, snapshot.props.yogaStyle.padding(yoga::Edge::Right));
111+
viewProps.yogaStyle.setPadding(yoga::Edge::Top, snapshot.props.yogaStyle.padding(yoga::Edge::Top));
112+
viewProps.yogaStyle.setPadding(yoga::Edge::Bottom, snapshot.props.yogaStyle.padding(yoga::Edge::Bottom));
113+
viewProps.yogaStyle.setPadding(yoga::Edge::Start, snapshot.props.yogaStyle.padding(yoga::Edge::Start));
114+
viewProps.yogaStyle.setPadding(yoga::Edge::End, snapshot.props.yogaStyle.padding(yoga::Edge::End));
115+
viewProps.yogaStyle.setPadding(yoga::Edge::Horizontal, snapshot.props.yogaStyle.padding(yoga::Edge::Horizontal));
116+
viewProps.yogaStyle.setPadding(yoga::Edge::Vertical, snapshot.props.yogaStyle.padding(yoga::Edge::Vertical));
117+
break;
96118
}
97119
}
98120

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ static inline bool mutationHasLayoutUpdates(
5454
for (auto& animatedProp : mutation.props.props) {
5555
// TODO: there should also be a check for the dynamic part
5656
if (animatedProp->propName == WIDTH || animatedProp->propName == HEIGHT ||
57-
animatedProp->propName == FLEX) {
57+
animatedProp->propName == FLEX || animatedProp->propName == MARGIN ||
58+
animatedProp->propName == PADDING) {
5859
return true;
5960
}
6061
}

0 commit comments

Comments
 (0)