Skip to content

Commit 0572ee7

Browse files
coadofacebook-github-bot
coado
authored and
facebook-github-bot
committed
Add support for other flex props to the Animation Backend (#54946)
Summary: ## Summary: Adds support for `overflow`, `position`, `zIndex`, and `direction` layout props to be passed as `AnimatedProp` to the animation backend. The `PropName` enum is changed to the class enum because the `OVERFLOW` keyword is already defined in `math.h` when building with `XCode`. ## Changelog: [General][Added] - Added support for `overflow`, `position`, `zIndex`, and `direction` props to the AnimationBackend. Differential Revision: D89543930
1 parent 764814f commit 0572ee7

File tree

5 files changed

+216
-159
lines changed

5 files changed

+216
-159
lines changed

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

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -202,87 +202,91 @@ void packAnimatedProp(
202202
folly::dynamic& dyn,
203203
const std::unique_ptr<AnimatedPropBase>& animatedProp) {
204204
switch (animatedProp->propName) {
205-
case OPACITY:
205+
case PropName::OPACITY:
206206
packOpacity(dyn, *animatedProp);
207207
break;
208208

209-
case TRANSFORM:
209+
case PropName::TRANSFORM:
210210
packTransform(dyn, *animatedProp);
211211
break;
212212

213-
case BACKGROUND_COLOR:
213+
case PropName::BACKGROUND_COLOR:
214214
packBackgroundColor(dyn, *animatedProp);
215215
break;
216216

217-
case BORDER_RADII:
217+
case PropName::BORDER_RADII:
218218
packBorderRadii(dyn, *animatedProp);
219219
break;
220220

221-
case SHADOW_COLOR:
221+
case PropName::SHADOW_COLOR:
222222
packShadowColor(dyn, *animatedProp);
223223
break;
224224

225-
case SHADOW_OFFSET:
225+
case PropName::SHADOW_OFFSET:
226226
packShadowOffset(dyn, *animatedProp);
227227
break;
228228

229-
case SHADOW_OPACITY:
229+
case PropName::SHADOW_OPACITY:
230230
packShadowOpacity(dyn, *animatedProp);
231231
break;
232232

233-
case SHADOW_RADIUS:
233+
case PropName::SHADOW_RADIUS:
234234
packShadowRadius(dyn, *animatedProp);
235235
break;
236236

237-
case BORDER_COLOR:
237+
case PropName::BORDER_COLOR:
238238
packBorderColor(dyn, *animatedProp);
239239
break;
240240

241-
case FILTER:
241+
case PropName::FILTER:
242242
packFilter(dyn, *animatedProp);
243243
break;
244244

245-
case OUTLINE_COLOR:
245+
case PropName::OUTLINE_COLOR:
246246
packOutlineColor(dyn, *animatedProp);
247247
break;
248248

249-
case OUTLINE_OFFSET:
249+
case PropName::OUTLINE_OFFSET:
250250
packOutlineOffset(dyn, *animatedProp);
251251
break;
252252

253-
case OUTLINE_STYLE:
253+
case PropName::OUTLINE_STYLE:
254254
packOutlineStyle(dyn, *animatedProp);
255255
break;
256256

257-
case OUTLINE_WIDTH:
257+
case PropName::OUTLINE_WIDTH:
258258
packOutlineWidth(dyn, *animatedProp);
259259
break;
260260

261-
case WIDTH:
262-
case HEIGHT:
263-
case FLEX:
264-
case PADDING:
265-
case MARGIN:
266-
case POSITION:
267-
case BORDER_WIDTH:
268-
case ALIGN_CONTENT:
269-
case ALIGN_ITEMS:
270-
case ALIGN_SELF:
271-
case ASPECT_RATIO:
272-
case BOX_SIZING:
273-
case DISPLAY:
274-
case FLEX_BASIS:
275-
case FLEX_DIRECTION:
276-
case ROW_GAP:
277-
case COLUMN_GAP:
278-
case FLEX_GROW:
279-
case FLEX_SHRINK:
280-
case FLEX_WRAP:
281-
case JUSTIFY_CONTENT:
282-
case MAX_HEIGHT:
283-
case MAX_WIDTH:
284-
case MIN_HEIGHT:
285-
case MIN_WIDTH:
261+
case PropName::WIDTH:
262+
case PropName::HEIGHT:
263+
case PropName::FLEX:
264+
case PropName::PADDING:
265+
case PropName::MARGIN:
266+
case PropName::POSITION:
267+
case PropName::BORDER_WIDTH:
268+
case PropName::ALIGN_CONTENT:
269+
case PropName::ALIGN_ITEMS:
270+
case PropName::ALIGN_SELF:
271+
case PropName::ASPECT_RATIO:
272+
case PropName::BOX_SIZING:
273+
case PropName::DISPLAY:
274+
case PropName::FLEX_BASIS:
275+
case PropName::FLEX_DIRECTION:
276+
case PropName::ROW_GAP:
277+
case PropName::COLUMN_GAP:
278+
case PropName::FLEX_GROW:
279+
case PropName::FLEX_SHRINK:
280+
case PropName::FLEX_WRAP:
281+
case PropName::JUSTIFY_CONTENT:
282+
case PropName::MAX_HEIGHT:
283+
case PropName::MAX_WIDTH:
284+
case PropName::MIN_HEIGHT:
285+
case PropName::MIN_WIDTH:
286+
case PropName::OVERFLOW:
287+
case PropName::POSITION_TYPE:
288+
case PropName::Z_INDEX:
289+
case PropName::DIRECTION:
286290
throw std::runtime_error("Tried to synchronously update layout props");
287291
}
288292
}

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

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
namespace facebook::react {
1414

15-
enum PropName {
15+
enum class PropName {
1616
OPACITY,
1717
WIDTH,
1818
HEIGHT,
@@ -51,7 +51,11 @@ enum PropName {
5151
MAX_HEIGHT,
5252
MAX_WIDTH,
5353
MIN_HEIGHT,
54-
MIN_WIDTH
54+
MIN_WIDTH,
55+
OVERFLOW,
56+
POSITION_TYPE,
57+
Z_INDEX,
58+
DIRECTION,
5559
};
5660

5761
struct AnimatedPropBase {
@@ -87,23 +91,23 @@ struct AnimatedProps {
8791
inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animatedProp)
8892
{
8993
switch (animatedProp.propName) {
90-
case OPACITY:
94+
case PropName::OPACITY:
9195
viewProps.opacity = get<Float>(animatedProp);
9296
break;
9397

94-
case WIDTH:
98+
case PropName::WIDTH:
9599
viewProps.yogaStyle.setDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
96100
break;
97101

98-
case HEIGHT:
102+
case PropName::HEIGHT:
99103
viewProps.yogaStyle.setDimension(yoga::Dimension::Height, get<yoga::Style::SizeLength>(animatedProp));
100104
break;
101105

102-
case BORDER_RADII:
106+
case PropName::BORDER_RADII:
103107
viewProps.borderRadii = get<CascadedBorderRadii>(animatedProp);
104108
break;
105109

106-
case BORDER_WIDTH: {
110+
case PropName::BORDER_WIDTH: {
107111
const auto &borderWidths = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
108112
if (borderWidths.left.has_value()) {
109113
viewProps.yogaStyle.setBorder(yoga::Edge::Left, borderWidths.left.value());
@@ -135,11 +139,11 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
135139
break;
136140
}
137141

138-
case BORDER_COLOR:
142+
case PropName::BORDER_COLOR:
139143
viewProps.borderColors = get<CascadedBorderColors>(animatedProp);
140144
break;
141145

142-
case MARGIN: {
146+
case PropName::MARGIN: {
143147
const auto &margins = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
144148
if (margins.left.has_value()) {
145149
viewProps.yogaStyle.setMargin(yoga::Edge::Left, margins.left.value());
@@ -171,7 +175,7 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
171175
break;
172176
}
173177

174-
case PADDING: {
178+
case PropName::PADDING: {
175179
const auto &paddings = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
176180
if (paddings.left.has_value()) {
177181
viewProps.yogaStyle.setPadding(yoga::Edge::Left, paddings.left.value());
@@ -203,7 +207,7 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
203207
break;
204208
}
205209

206-
case POSITION: {
210+
case PropName::POSITION: {
207211
const auto &positions = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
208212
if (positions.left.has_value()) {
209213
viewProps.yogaStyle.setPosition(yoga::Edge::Left, positions.left.value());
@@ -235,127 +239,140 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
235239
break;
236240
}
237241

238-
case FLEX:
242+
case PropName::FLEX:
239243
viewProps.yogaStyle.setFlex(get<yoga::FloatOptional>(animatedProp));
240244
break;
241245

242-
case TRANSFORM:
246+
case PropName::TRANSFORM:
243247
viewProps.transform = get<Transform>(animatedProp);
244248
break;
245249

246-
case BACKGROUND_COLOR:
250+
case PropName::BACKGROUND_COLOR:
247251
viewProps.backgroundColor = get<SharedColor>(animatedProp);
248252
break;
249253

250-
case SHADOW_COLOR:
254+
case PropName::SHADOW_COLOR:
251255
viewProps.shadowColor = get<SharedColor>(animatedProp);
252256
break;
253257

254-
case SHADOW_OFFSET:
258+
case PropName::SHADOW_OFFSET:
255259
viewProps.shadowOffset = get<Size>(animatedProp);
256260
break;
257261

258-
case SHADOW_OPACITY:
262+
case PropName::SHADOW_OPACITY:
259263
viewProps.shadowOpacity = get<Float>(animatedProp);
260264
break;
261265

262-
case SHADOW_RADIUS:
266+
case PropName::SHADOW_RADIUS:
263267
viewProps.shadowRadius = get<Float>(animatedProp);
264268
break;
265269

266-
case FILTER:
270+
case PropName::FILTER:
267271
viewProps.filter = get<std::vector<FilterFunction>>(animatedProp);
268272
break;
269273

270-
case OUTLINE_COLOR:
274+
case PropName::OUTLINE_COLOR:
271275
viewProps.outlineColor = get<SharedColor>(animatedProp);
272276
break;
273277

274-
case OUTLINE_OFFSET:
278+
case PropName::OUTLINE_OFFSET:
275279
viewProps.outlineOffset = get<Float>(animatedProp);
276280
break;
277281

278-
case OUTLINE_STYLE:
282+
case PropName::OUTLINE_STYLE:
279283
viewProps.outlineStyle = get<OutlineStyle>(animatedProp);
280284
break;
281285

282-
case OUTLINE_WIDTH:
286+
case PropName::OUTLINE_WIDTH:
283287
viewProps.outlineWidth = get<Float>(animatedProp);
284288
break;
285289

286-
case ALIGN_CONTENT:
290+
case PropName::ALIGN_CONTENT:
287291
viewProps.yogaStyle.setAlignContent(get<yoga::Align>(animatedProp));
288292
break;
289293

290-
case ALIGN_ITEMS:
294+
case PropName::ALIGN_ITEMS:
291295
viewProps.yogaStyle.setAlignItems(get<yoga::Align>(animatedProp));
292296
break;
293297

294-
case ALIGN_SELF:
298+
case PropName::ALIGN_SELF:
295299
viewProps.yogaStyle.setAlignSelf(get<yoga::Align>(animatedProp));
296300
break;
297301

298-
case ASPECT_RATIO:
302+
case PropName::ASPECT_RATIO:
299303
viewProps.yogaStyle.setAspectRatio(get<yoga::FloatOptional>(animatedProp));
300304
break;
301305

302-
case BOX_SIZING:
306+
case PropName::BOX_SIZING:
303307
viewProps.yogaStyle.setBoxSizing(get<yoga::BoxSizing>(animatedProp));
304308
break;
305309

306-
case DISPLAY:
310+
case PropName::DISPLAY:
307311
viewProps.yogaStyle.setDisplay(get<yoga::Display>(animatedProp));
308312
break;
309313

310-
case FLEX_BASIS:
314+
case PropName::FLEX_BASIS:
311315
viewProps.yogaStyle.setFlexBasis(get<yoga::Style::SizeLength>(animatedProp));
312316
break;
313317

314-
case FLEX_DIRECTION:
318+
case PropName::FLEX_DIRECTION:
315319
viewProps.yogaStyle.setFlexDirection(get<yoga::FlexDirection>(animatedProp));
316320
break;
317321

318-
case ROW_GAP:
322+
case PropName::ROW_GAP:
319323
viewProps.yogaStyle.setGap(yoga::Gutter::Row, get<yoga::Style::Length>(animatedProp));
320324
break;
321325

322-
case COLUMN_GAP:
326+
case PropName::COLUMN_GAP:
323327
viewProps.yogaStyle.setGap(yoga::Gutter::Column, get<yoga::Style::Length>(animatedProp));
324328
break;
325329

326-
case FLEX_GROW:
330+
case PropName::FLEX_GROW:
327331
viewProps.yogaStyle.setFlexGrow(get<yoga::FloatOptional>(animatedProp));
328332
break;
329333

330-
case FLEX_SHRINK:
334+
case PropName::FLEX_SHRINK:
331335
viewProps.yogaStyle.setFlexShrink(get<yoga::FloatOptional>(animatedProp));
332336
break;
333337

334-
case FLEX_WRAP:
338+
case PropName::FLEX_WRAP:
335339
viewProps.yogaStyle.setFlexWrap(get<yoga::Wrap>(animatedProp));
336340
break;
337341

338-
case JUSTIFY_CONTENT:
342+
case PropName::JUSTIFY_CONTENT:
339343
viewProps.yogaStyle.setJustifyContent(get<yoga::Justify>(animatedProp));
340344
break;
341345

342-
case MAX_HEIGHT:
346+
case PropName::MAX_HEIGHT:
343347
viewProps.yogaStyle.setMaxDimension(yoga::Dimension::Height, get<yoga::Style::SizeLength>(animatedProp));
344348
break;
345349

346-
case MAX_WIDTH:
350+
case PropName::MAX_WIDTH:
347351
viewProps.yogaStyle.setMaxDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
348352
break;
349353

350-
case MIN_HEIGHT:
354+
case PropName::MIN_HEIGHT:
351355
viewProps.yogaStyle.setMinDimension(yoga::Dimension::Height, get<yoga::Style::SizeLength>(animatedProp));
352356
break;
353357

354-
case MIN_WIDTH:
358+
case PropName::MIN_WIDTH:
355359
viewProps.yogaStyle.setMinDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
356360
break;
357361

358-
default:
362+
case PropName::OVERFLOW:
363+
viewProps.yogaStyle.setOverflow(get<yoga::Overflow>(animatedProp));
364+
break;
365+
366+
case PropName::POSITION_TYPE:
367+
viewProps.yogaStyle.setPositionType(get<yoga::PositionType>(animatedProp));
368+
break;
369+
370+
case PropName::Z_INDEX:
371+
viewProps.zIndex = get<std::optional<int>>(animatedProp);
372+
break;
373+
374+
case PropName::DIRECTION:
375+
viewProps.yogaStyle.setDirection(get<yoga::Direction>(animatedProp));
359376
break;
360377
}
361378
}

0 commit comments

Comments
 (0)