Skip to content

Add support for other view props to the Animation Backend #54947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coado wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add support for other view props to the Animation Backend #54947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f95f1f
Add support for max/min width/height props to Animation Backend (#54945)
coado Dec 19, 2025
82d1c33
Add support for other flex props to the Animation Backend (#54946)
coado Dec 19, 2025
4027b84
Add support for other view props to the Animation Backend (#54947)
coado Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
359 changes: 359 additions & 0 deletions packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,329 @@ void packOutlineWidth(
dyn.insert("outlineWidth", get<Float>(animatedProp));
}

void packBorderCurveEdge(
folly::dynamic& dyn,
const std::string& propName,
const std::optional<BorderCurve>& curveValue) {
if (curveValue.has_value()) {
std::string curveStr;
switch (curveValue.value()) {
case BorderCurve::Circular:
curveStr = "circular";
break;
case BorderCurve::Continuous:
curveStr = "continuous";
break;
default:
throw std::runtime_error("Unknown border curve");
}
dyn.insert(propName, curveStr);
}
}

void packBorderCurves(
folly::dynamic& dyn,
const AnimatedPropBase& animatedProp) {
const auto& borderCurves = get<CascadedBorderCurves>(animatedProp);

packBorderCurveEdge(dyn, "borderTopLeftCurve", borderCurves.topLeft);
packBorderCurveEdge(dyn, "borderTopRightCurve", borderCurves.topRight);
packBorderCurveEdge(dyn, "borderBottomLeftCurve", borderCurves.bottomLeft);
packBorderCurveEdge(dyn, "borderBottomRightCurve", borderCurves.bottomRight);

if (borderCurves.all.has_value()) {
std::string curveStr;
switch (borderCurves.all.value()) {
case BorderCurve::Circular:
curveStr = "circular";
break;
case BorderCurve::Continuous:
curveStr = "continuous";
break;
default:
throw std::runtime_error("Unknown border curve");
}
dyn.insert("borderCurve", curveStr);
}
}

std::string borderStyleToString(BorderStyle style) {
switch (style) {
case BorderStyle::Solid:
return "solid";
case BorderStyle::Dotted:
return "dotted";
case BorderStyle::Dashed:
return "dashed";
default:
throw std::runtime_error("Unknown border style");
}
}

void packBorderStyleEdge(
folly::dynamic& dyn,
const std::string& propName,
const std::optional<BorderStyle>& styleValue) {
if (styleValue.has_value()) {
dyn.insert(propName, borderStyleToString(styleValue.value()));
}
}

void packBorderStyles(
folly::dynamic& dyn,
const AnimatedPropBase& animatedProp) {
const auto& borderStyles = get<CascadedBorderStyles>(animatedProp);

packBorderStyleEdge(dyn, "borderLeftStyle", borderStyles.left);
packBorderStyleEdge(dyn, "borderTopStyle", borderStyles.top);
packBorderStyleEdge(dyn, "borderRightStyle", borderStyles.right);
packBorderStyleEdge(dyn, "borderBottomStyle", borderStyles.bottom);
packBorderStyleEdge(dyn, "borderStartStyle", borderStyles.start);
packBorderStyleEdge(dyn, "borderEndStyle", borderStyles.end);

if (borderStyles.all.has_value()) {
dyn.insert("borderStyle", borderStyleToString(borderStyles.all.value()));
}
}

void packPointerEvents(
folly::dynamic& dyn,
const AnimatedPropBase& animatedProp) {
const auto& pointerEvents = get<PointerEventsMode>(animatedProp);
std::string pointerEventsStr;
switch (pointerEvents) {
case PointerEventsMode::Auto:
pointerEventsStr = "auto";
break;
case PointerEventsMode::None:
pointerEventsStr = "none";
break;
case PointerEventsMode::BoxNone:
pointerEventsStr = "box-none";
break;
case PointerEventsMode::BoxOnly:
pointerEventsStr = "box-only";
break;
default:
throw std::runtime_error("Unknown pointer events mode");
break;
}
dyn.insert("pointerEvents", pointerEventsStr);
}

void packIsolation(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
const auto& isolation = get<Isolation>(animatedProp);
std::string isolationStr;
switch (isolation) {
case Isolation::Auto:
isolationStr = "auto";
break;
case Isolation::Isolate:
isolationStr = "isolate";
break;
default:
throw std::runtime_error("Unknown isolation mode");
break;
}
dyn.insert("isolation", isolationStr);
}

void packCursor(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
const auto& cursor = get<Cursor>(animatedProp);
std::string cursorStr;
switch (cursor) {
case Cursor::Auto:
cursorStr = "auto";
break;
case Cursor::Alias:
cursorStr = "alias";
break;
case Cursor::AllScroll:
cursorStr = "all-scroll";
break;
case Cursor::Cell:
cursorStr = "cell";
break;
case Cursor::ColResize:
cursorStr = "col-resize";
break;
case Cursor::ContextMenu:
cursorStr = "context-menu";
break;
case Cursor::Copy:
cursorStr = "copy";
break;
case Cursor::Crosshair:
cursorStr = "crosshair";
break;
case Cursor::Default:
cursorStr = "default";
break;
case Cursor::EResize:
cursorStr = "e-resize";
break;
case Cursor::EWResize:
cursorStr = "ew-resize";
break;
case Cursor::Grab:
cursorStr = "grab";
break;
case Cursor::Grabbing:
cursorStr = "grabbing";
break;
case Cursor::Help:
cursorStr = "help";
break;
case Cursor::Move:
cursorStr = "move";
break;
case Cursor::NResize:
cursorStr = "n-resize";
break;
case Cursor::NEResize:
cursorStr = "ne-resize";
break;
case Cursor::NESWResize:
cursorStr = "nesw-resize";
break;
case Cursor::NSResize:
cursorStr = "ns-resize";
break;
case Cursor::NWResize:
cursorStr = "nw-resize";
break;
case Cursor::NWSEResize:
cursorStr = "nwse-resize";
break;
case Cursor::NoDrop:
cursorStr = "no-drop";
break;
case Cursor::None:
cursorStr = "none";
break;
case Cursor::NotAllowed:
cursorStr = "not-allowed";
break;
case Cursor::Pointer:
cursorStr = "pointer";
break;
case Cursor::Progress:
cursorStr = "progress";
break;
case Cursor::RowResize:
cursorStr = "row-resize";
break;
case Cursor::SResize:
cursorStr = "s-resize";
break;
case Cursor::SEResize:
cursorStr = "se-resize";
break;
case Cursor::SWResize:
cursorStr = "sw-resize";
break;
case Cursor::Text:
cursorStr = "text";
break;
case Cursor::Url:
cursorStr = "url";
break;
case Cursor::WResize:
cursorStr = "w-resize";
break;
case Cursor::Wait:
cursorStr = "wait";
break;
case Cursor::ZoomIn:
cursorStr = "zoom-in";
break;
case Cursor::ZoomOut:
cursorStr = "zoom-out";
break;
default:
throw std::runtime_error("Unknown cursor type");
}
dyn.insert("cursor", cursorStr);
}

void packBoxShadow(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
const auto& boxShadows = get<std::vector<BoxShadow>>(animatedProp);
auto shadowArray = folly::dynamic::array();
for (const auto& shadow : boxShadows) {
folly::dynamic shadowObj = folly::dynamic::object();
shadowObj["offsetX"] = shadow.offsetX;
shadowObj["offsetY"] = shadow.offsetY;
shadowObj["blurRadius"] = shadow.blurRadius;
shadowObj["spreadDistance"] = shadow.spreadDistance;
shadowObj["inset"] = shadow.inset;
if (shadow.color) {
shadowObj["color"] = static_cast<int32_t>(*shadow.color);
}
shadowArray.push_back(shadowObj);
}
dyn.insert("boxShadow", shadowArray);
}

void packMixBlendMode(
folly::dynamic& dyn,
const AnimatedPropBase& animatedProp) {
const auto& blendMode = get<BlendMode>(animatedProp);
std::string blendModeStr;
switch (blendMode) {
case BlendMode::Normal:
blendModeStr = "normal";
break;
case BlendMode::Multiply:
blendModeStr = "multiply";
break;
case BlendMode::Screen:
blendModeStr = "screen";
break;
case BlendMode::Overlay:
blendModeStr = "overlay";
break;
case BlendMode::Darken:
blendModeStr = "darken";
break;
case BlendMode::Lighten:
blendModeStr = "lighten";
break;
case BlendMode::ColorDodge:
blendModeStr = "color-dodge";
break;
case BlendMode::ColorBurn:
blendModeStr = "color-burn";
break;
case BlendMode::HardLight:
blendModeStr = "hard-light";
break;
case BlendMode::SoftLight:
blendModeStr = "soft-light";
break;
case BlendMode::Difference:
blendModeStr = "difference";
break;
case BlendMode::Exclusion:
blendModeStr = "exclusion";
break;
case BlendMode::Hue:
blendModeStr = "hue";
break;
case BlendMode::Saturation:
blendModeStr = "saturation";
break;
case BlendMode::Color:
blendModeStr = "color";
break;
case BlendMode::Luminosity:
blendModeStr = "luminosity";
break;
default:
throw std::runtime_error("Unknown blend mode");
}
dyn.insert("mixBlendMode", blendModeStr);
}

void packAnimatedProp(
folly::dynamic& dyn,
const std::unique_ptr<AnimatedPropBase>& animatedProp) {
Expand Down Expand Up @@ -258,6 +581,34 @@ void packAnimatedProp(
packOutlineWidth(dyn, *animatedProp);
break;

case BORDER_CURVES:
packBorderCurves(dyn, *animatedProp);
break;

case BORDER_STYLES:
packBorderStyles(dyn, *animatedProp);
break;

case POINTER_EVENTS:
packPointerEvents(dyn, *animatedProp);
break;

case ISOLATION:
packIsolation(dyn, *animatedProp);
break;

case CURSOR:
packCursor(dyn, *animatedProp);
break;

case BOX_SHADOW:
packBoxShadow(dyn, *animatedProp);
break;

case MIX_BLEND_MODE:
packMixBlendMode(dyn, *animatedProp);
break;

case WIDTH:
case HEIGHT:
case FLEX:
Expand All @@ -279,6 +630,14 @@ void packAnimatedProp(
case FLEX_SHRINK:
case FLEX_WRAP:
case JUSTIFY_CONTENT:
case MAX_HEIGHT:
case MAX_WIDTH:
case MIN_HEIGHT:
case MIN_WIDTH:
case STYLE_OVERFLOW:
case POSITION_TYPE:
case Z_INDEX:
case DIRECTION:
throw std::runtime_error("Tried to synchronously update layout props");
}
}
Expand Down
Loading
Loading