Implement rowGap, columnGap and gap flex properties (microsoft#10969)

* Implement rowGap, columnGap and gap flex properties * Change files
jonthysell · Feb 8, 2023 · d7a8d6e · d7a8d6e
1 parent cd24ccc
commit d7a8d6e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/change/react-native-windows-45082565-4f32-499f-acd3-ecd7c71a43ae.json b/change/react-native-windows-45082565-4f32-499f-acd3-ecd7c71a43ae.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement rowGap, columnGap and gap flex properties",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Modules/NativeUIManager.cpp b/vnext/Microsoft.ReactNative/Modules/NativeUIManager.cpp
@@ -626,6 +626,15 @@ static void StyleYogaNode(
       YGValue result = YGValueOrDefault(value, YGValue{YGUndefined, YGUnitPoint} /*default*/, shadowNode, key);
 
       SetYogaUnitValueHelper(yogaNode, result, YGNodeStyleSetMaxHeight, YGNodeStyleSetMaxHeightPercent);
+    } else if (key == "rowGap") {
+      float result = NumberOrDefault(value, 0.0f /*default*/);
+      YGNodeStyleSetGap(yogaNode, YGGutterRow, result);
+    } else if (key == "columnGap") {
+      float result = NumberOrDefault(value, 0.0f /*default*/);
+      YGNodeStyleSetGap(yogaNode, YGGutterColumn, result);
+    } else if (key == "gap") {
+      float result = NumberOrDefault(value, 0.0f /*default*/);
+      YGNodeStyleSetGap(yogaNode, YGGutterAll, result);
     } else if (key == "margin") {
       YGValue result = YGValueOrDefault(value, YGValue{YGUndefined, YGUnitPoint} /*default*/, shadowNode, key);