Add support for other flex props to the Animation Backend (facebook#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.

Reviewed By: zeyap

Differential Revision: D89543930

Author: coado

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

@@ -283,6 +283,10 @@ void packAnimatedProp(
     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");
   }
 }

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

@@ -51,7 +51,11 @@ enum PropName {
   MAX_HEIGHT,
   MAX_WIDTH,
   MIN_HEIGHT,
-  MIN_WIDTH
+  MIN_WIDTH,
+  STYLE_OVERFLOW,
+  POSITION_TYPE,
+  Z_INDEX,
+  DIRECTION,
 };
 
 struct AnimatedPropBase {
@@ -355,7 +359,20 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
       viewProps.yogaStyle.setMinDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
       break;
 
-    default:
+    case STYLE_OVERFLOW:
+      viewProps.yogaStyle.setOverflow(get<yoga::Overflow>(animatedProp));
+      break;
+
+    case POSITION_TYPE:
+      viewProps.yogaStyle.setPositionType(get<yoga::PositionType>(animatedProp));
+      break;
+
+    case Z_INDEX:
+      viewProps.zIndex = get<std::optional<int>>(animatedProp);
+      break;
+
+    case DIRECTION:
+      viewProps.yogaStyle.setDirection(get<yoga::Direction>(animatedProp));
       break;
   }
 }

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

@@ -168,6 +168,22 @@ struct AnimatedPropsBuilder {
   {
     props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(MIN_WIDTH, value));
   }
+  void setOverflow(yoga::Overflow value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Overflow>>(STYLE_OVERFLOW, value));
+  }
+  void setPositionType(yoga::PositionType value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::PositionType>>(POSITION_TYPE, value));
+  }
+  void setZIndex(std::optional<int> value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<std::optional<int>>>(Z_INDEX, value));
+  }
+  void setDirection(yoga::Direction value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Direction>>(DIRECTION, value));
+  }
   void storeDynamic(folly::dynamic &d)
   {
     rawProps = std::make_unique<RawProps>(std::move(d));

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

@@ -239,6 +239,22 @@ inline void updateProp(const PropName propName, BaseViewProps &viewProps, const
       viewProps.yogaStyle.setMinDimension(
           yoga::Dimension::Width, snapshot.props.yogaStyle.minDimension(yoga::Dimension::Width));
       break;
+
+    case STYLE_OVERFLOW:
+      viewProps.yogaStyle.setOverflow(snapshot.props.yogaStyle.overflow());
+      break;
+
+    case POSITION_TYPE:
+      viewProps.yogaStyle.setPositionType(snapshot.props.yogaStyle.positionType());
+      break;
+
+    case Z_INDEX:
+      viewProps.zIndex = snapshot.props.zIndex;
+      break;
+
+    case DIRECTION:
+      viewProps.yogaStyle.setDirection(snapshot.props.yogaStyle.direction());
+      break;
   }
 }
 

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

@@ -16,15 +16,12 @@
 namespace facebook::react {
 
 static const auto layoutProps = std::set<PropName>{
-    PropName::WIDTH,        PropName::HEIGHT,        PropName::FLEX,
-    PropName::MARGIN,       PropName::PADDING,       PropName::POSITION,
-    PropName::BORDER_WIDTH, PropName::ALIGN_CONTENT, PropName::ALIGN_ITEMS,
-    PropName::ALIGN_SELF,   PropName::ASPECT_RATIO,  PropName::BOX_SIZING,
-    PropName::DISPLAY,      PropName::FLEX_BASIS,    PropName::FLEX_DIRECTION,
-    PropName::ROW_GAP,      PropName::COLUMN_GAP,    PropName::FLEX_GROW,
-    PropName::FLEX_SHRINK,  PropName::FLEX_WRAP,     PropName::JUSTIFY_CONTENT,
-    PropName::MAX_HEIGHT,   PropName::MAX_WIDTH,     PropName::MIN_HEIGHT,
-    PropName::MIN_WIDTH,
+    WIDTH,           HEIGHT,        FLEX,          MARGIN,      PADDING,
+    POSITION,        BORDER_WIDTH,  ALIGN_CONTENT, ALIGN_ITEMS, ALIGN_SELF,
+    ASPECT_RATIO,    BOX_SIZING,    DISPLAY,       FLEX_BASIS,  FLEX_DIRECTION,
+    ROW_GAP,         COLUMN_GAP,    FLEX_GROW,     FLEX_SHRINK, FLEX_WRAP,
+    JUSTIFY_CONTENT, MAX_HEIGHT,    MAX_WIDTH,     MIN_HEIGHT,  MIN_WIDTH,
+    STYLE_OVERFLOW,  POSITION_TYPE, DIRECTION,     Z_INDEX,
 };
 
 UIManagerNativeAnimatedDelegateBackendImpl::