From d867ec0abb6cf6da6e2be44d28bbf9fc38319298 Mon Sep 17 00:00:00 2001 From: Nishan Date: Thu, 15 Dec 2022 16:30:37 -0800 Subject: [PATCH] fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Fixes - https://github.com/facebook/react-native/issues/35553 ## Approach We're using `betweenMainDim` to add [gap between](https://github.com/intergalacticspacehighway/yoga/blob/bbeede82d36cd89657faf385aaa704f45443c326/yoga/Yoga.cpp#L2495) items in main axis. This is resulting in increased [main axis](https://github.com/intergalacticspacehighway/yoga/blob/bbeede82d36cd89657faf385aaa704f45443c326/yoga/Yoga.cpp#L2598) dimension of the container as it gets added even for the last element. One solution is to keep using it and subtract the gap when last element is reached. ## Aside Mutating this value feels weird, but I think `betweenMainDim` gets initialized for every line so should be fine? I did some manual tests to verify. I tried running tests but I'll have to downgrade the java version. Let me know if anything fails. Thanks! 🙏 X-link: https://github.com/facebook/yoga/pull/1188 Reviewed By: necolas Differential Revision: D42078162 Pulled By: NickGerleman fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9 --- ReactCommon/yoga/yoga/Yoga.cpp | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ReactCommon/yoga/yoga/Yoga.cpp b/ReactCommon/yoga/yoga/Yoga.cpp index 88c77ab8501406..a66adec1234d8b 100644 --- a/ReactCommon/yoga/yoga/Yoga.cpp +++ b/ReactCommon/yoga/yoga/Yoga.cpp @@ -2540,6 +2540,11 @@ static void YGJustifyMainAxis( const YGNodeRef child = node->getChild(i); const YGStyle& childStyle = child->getStyle(); const YGLayout childLayout = child->getLayout(); + const bool isLastChild = i == collectedFlexItemsValues.endOfLineIndex - 1; + // remove the gap if it is the last element of the line + if (isLastChild) { + betweenMainDim -= gap; + } if (childStyle.display() == YGDisplayNone) { continue; }