diff --git a/change/react-native-windows-45082565-4f32-499f-acd3-ecd7c71a43ae.json b/change/react-native-windows-45082565-4f32-499f-acd3-ecd7c71a43ae.json new file mode 100644 index 00000000000..e3afd086e8c --- /dev/null +++ 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 index fdfcb5bbf8e..4233e8f8748 100644 --- 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);