Add support for position props (#54752)

Summary:
Pull Request resolved: #54752

Adds support for positional `left`, `top`, `right`, `bottom` props to the animation backend.

## Changelog:
[GENERAL][ADDED] - Added support for positional `left`, `top`, `right`, `bottom` props to the animation backend.

Reviewed By: zeyap

Differential Revision: D88152233

fbshipit-source-id: 343295120575c3cf7b9424a329675292643b6f8e

Author: coado

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

@@ -151,6 +151,7 @@ void packAnimatedProp(
     case FLEX:
     case PADDING:
     case MARGIN:
+    case POSITION:
       throw std::runtime_error("Tried to synchronously update layout props");
   }
 }

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

@@ -19,6 +19,7 @@ enum PropName {
   BORDER_RADII,
   MARGIN,
   PADDING,
+  POSITION,
   FLEX,
   TRANSFORM,
   BACKGROUND_COLOR,
@@ -141,6 +142,38 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
       break;
     }
 
+    case POSITION: {
+      const auto &positions = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
+      if (positions.left.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Left, positions.left.value());
+      }
+      if (positions.top.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Top, positions.top.value());
+      }
+      if (positions.right.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Right, positions.right.value());
+      }
+      if (positions.bottom.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Bottom, positions.bottom.value());
+      }
+      if (positions.start.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Start, positions.start.value());
+      }
+      if (positions.end.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::End, positions.end.value());
+      }
+      if (positions.horizontal.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Horizontal, positions.horizontal.value());
+      }
+      if (positions.vertical.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Vertical, positions.vertical.value());
+      }
+      if (positions.all.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::All, positions.all.value());
+      }
+      break;
+    }
+
     case FLEX:
       viewProps.yogaStyle.setFlex(get<yoga::FloatOptional>(animatedProp));
       break;

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

@@ -39,6 +39,10 @@ struct AnimatedPropsBuilder {
   {
     props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(PADDING, value));
   }
+  void setPosition(CascadedRectangleEdges<yoga::StyleLength> &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(POSITION, value));
+  }
   void setTransform(Transform &t)
   {
     props.push_back(std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));

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

@@ -115,6 +115,18 @@ inline void updateProp(const PropName propName, BaseViewProps &viewProps, const
       viewProps.yogaStyle.setPadding(yoga::Edge::Horizontal, snapshot.props.yogaStyle.padding(yoga::Edge::Horizontal));
       viewProps.yogaStyle.setPadding(yoga::Edge::Vertical, snapshot.props.yogaStyle.padding(yoga::Edge::Vertical));
       break;
+
+    case POSITION:
+      viewProps.yogaStyle.setPosition(yoga::Edge::Left, snapshot.props.yogaStyle.position(yoga::Edge::Left));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Right, snapshot.props.yogaStyle.position(yoga::Edge::Right));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Top, snapshot.props.yogaStyle.position(yoga::Edge::Top));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Bottom, snapshot.props.yogaStyle.position(yoga::Edge::Bottom));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Start, snapshot.props.yogaStyle.position(yoga::Edge::Start));
+      viewProps.yogaStyle.setPosition(yoga::Edge::End, snapshot.props.yogaStyle.position(yoga::Edge::End));
+      viewProps.yogaStyle.setPosition(
+          yoga::Edge::Horizontal, snapshot.props.yogaStyle.position(yoga::Edge::Horizontal));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Vertical, snapshot.props.yogaStyle.position(yoga::Edge::Vertical));
+      break;
   }
 }
 

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

@@ -55,7 +55,8 @@ static inline bool mutationHasLayoutUpdates(
     // TODO: there should also be a check for the dynamic part
     if (animatedProp->propName == WIDTH || animatedProp->propName == HEIGHT ||
         animatedProp->propName == FLEX || animatedProp->propName == MARGIN ||
-        animatedProp->propName == PADDING) {
+        animatedProp->propName == PADDING ||
+        animatedProp->propName == POSITION) {
       return true;
     }
   }