Add support for backfaceVisibility and add flex to AnimatedPropsBuilder (#55154)

Summary:
Pull Request resolved: #55154

## Summary:

Add support for the `backfaceVisibility` and add missing `flex` style to the `AnimatedPropsBuilder`.

## Changelog:
[General][Added] - added support for `backfaceVisibility` prop and added missing `flex` style to the `AnimatedPropsBuilder`.

Reviewed By: zeyap

Differential Revision: D90671092

fbshipit-source-id: d1731d1811756a665b830d3cd2d88be405112632

Author: coado

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

@@ -462,9 +462,9 @@ void packBoxShadow(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
 void packMixBlendMode(
     folly::dynamic& dyn,
     const AnimatedPropBase& animatedProp) {
-  const auto& blendMode = get<BlendMode>(animatedProp);
+  const auto& mixBlendMode = get<BlendMode>(animatedProp);
   std::string blendModeStr;
-  switch (blendMode) {
+  switch (mixBlendMode) {
     case BlendMode::Normal:
       blendModeStr = "normal";
       break;
@@ -519,6 +519,25 @@ void packMixBlendMode(
   dyn.insert("mixBlendMode", blendModeStr);
 }
 
+void packBackfaceVisibility(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& backfaceVisibility = get<BackfaceVisibility>(animatedProp);
+  std::string visibilityStr;
+  switch (backfaceVisibility) {
+    case BackfaceVisibility::Auto:
+      visibilityStr = "auto";
+      break;
+    case BackfaceVisibility::Visible:
+      visibilityStr = "visible";
+      break;
+    case BackfaceVisibility::Hidden:
+      visibilityStr = "hidden";
+      break;
+  }
+  dyn.insert("backfaceVisibility", visibilityStr);
+}
+
 void packAnimatedProp(
     folly::dynamic& dyn,
     const std::unique_ptr<AnimatedPropBase>& animatedProp) {
@@ -607,6 +626,10 @@ void packAnimatedProp(
       packMixBlendMode(dyn, *animatedProp);
       break;
 
+    case BACKFACE_VISIBILITY:
+      packBackfaceVisibility(dyn, *animatedProp);
+      break;
+
     case WIDTH:
     case HEIGHT:
     case FLEX:

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

@@ -62,7 +62,8 @@ enum PropName {
   ISOLATION,
   CURSOR,
   BOX_SHADOW,
-  MIX_BLEND_MODE
+  MIX_BLEND_MODE,
+  BACKFACE_VISIBILITY
 };
 
 struct AnimatedPropBase {
@@ -410,6 +411,10 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
       viewProps.mixBlendMode = get<BlendMode>(animatedProp);
       break;
 
+    case BACKFACE_VISIBILITY:
+      viewProps.backfaceVisibility = get<BackfaceVisibility>(animatedProp);
+      break;
+
     default:
       break;
   }

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

@@ -52,6 +52,10 @@ struct AnimatedPropsBuilder {
   {
     props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(POSITION, value));
   }
+  void setFlex(yoga::FloatOptional value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::FloatOptional>>(FLEX, value));
+  }
   void setTransform(Transform &t)
   {
     props.push_back(std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));
@@ -212,6 +216,10 @@ struct AnimatedPropsBuilder {
   {
     props.push_back(std::make_unique<AnimatedProp<BlendMode>>(MIX_BLEND_MODE, value));
   }
+  void setBackfaceVisibility(BackfaceVisibility value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<BackfaceVisibility>>(BACKFACE_VISIBILITY, value));
+  }
   void storeDynamic(folly::dynamic &d)
   {
     rawProps = std::make_unique<RawProps>(std::move(d));

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

@@ -284,6 +284,10 @@ inline void updateProp(const PropName propName, BaseViewProps &viewProps, const
     case MIX_BLEND_MODE:
       viewProps.mixBlendMode = snapshot.props.mixBlendMode;
       break;
+
+    case BACKFACE_VISIBILITY:
+      viewProps.backfaceVisibility = snapshot.props.backfaceVisibility;
+      break;
   }
 }