CSS Grid 1/9: Grid style types and public API

Summary:
- Add foundational data types, enums, style properties, and C API for expressing CSS Grid layouts
- Includes `GridLine.h`, `GridTrack.h`, `GridTrackType.h`, `Display::Grid`, new alignment enums (`Align::Start/End`, `Justify::Auto/Stretch/Start/End`)
- C API: `YGGridTrackList.h/cpp`, `YGNodeStyle` grid setters/getters
- Layout helper updates, `Node.h` `relativePosition` made public

Split from facebook/yoga#1865. Part of the CSS Grid implementation series.

X-link: facebook/yoga#1893

Differential Revision: D94867121

Pulled By: NickGerleman

Author: intergalacticspacehighway

packages/react-native/React/Views/RCTLayout.m

@@ -128,11 +128,12 @@ RCTDisplayType RCTReactDisplayTypeFromYogaDisplayType(YGDisplay displayType)
 {
   switch (displayType) {
     case YGDisplayFlex:
+    case YGDisplayContents:
+    case YGDisplayGrid:
       return RCTDisplayTypeFlex;
     case YGDisplayNone:
       return RCTDisplayTypeNone;
-    case YGDisplayContents:
-      RCTAssert(NO, @"YGDisplayContents cannot be converted to RCTDisplayType value.");
-      return RCTDisplayTypeNone;
+    default:
+      return RCTDisplayTypeFlex;
   }
 }

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -133,6 +133,8 @@ inline DisplayType displayTypeFromYGDisplay(YGDisplay display)
       return DisplayType::Contents;
     case YGDisplayFlex:
       return DisplayType::Flex;
+    case YGDisplayGrid:
+      return DisplayType::Grid;
   }
 }
 

packages/react-native/ReactCommon/react/renderer/core/LayoutMetrics.cpp

@@ -44,9 +44,11 @@ std::vector<DebugStringConvertibleObject> getDebugProps(
            ",bottom:" + getDebugDescription(object.overflowInset.bottom, {}) +
            ",left:" + getDebugDescription(object.overflowInset.left, {}) + "}"},
       {.name = "displayType",
-       .value = object.displayType == DisplayType::None
-           ? "None"
-           : (object.displayType == DisplayType::Flex ? "Flex" : "Inline")},
+       .value = object.displayType == DisplayType::None  ? "None"
+           : object.displayType == DisplayType::Flex     ? "Flex"
+           : object.displayType == DisplayType::Grid     ? "Grid"
+           : object.displayType == DisplayType::Contents ? "Contents"
+                                                         : "Unknown"},
       {.name = "layoutDirection",
        .value = object.layoutDirection == LayoutDirection::Undefined
            ? "Undefined"

packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h

@@ -20,6 +20,7 @@ enum class DisplayType {
   None = 0,
   Flex = 1,
   Contents = 2,
+  Grid = 3,
 };
 
 enum class PositionType {

packages/react-native/ReactCommon/react/renderer/core/conversions.h

@@ -44,6 +44,8 @@ inline int toInt(const DisplayType &displayType)
       return 1;
     case DisplayType::Contents:
       return 2;
+    case DisplayType::Grid:
+      return 3;
   }
 }
 
@@ -56,6 +58,8 @@ inline std::string toString(const DisplayType &displayType)
       return "flex";
     case DisplayType::Contents:
       return "contents";
+    case DisplayType::Grid:
+      return "grid";
   }
 }