DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)

Browse Source 
Summary:
Fixes - https://github.com/facebook/react-native/issues/35553

## Approach
We're using `betweenMainDim` to add [gap between](bbeede82d3/yoga/Yoga.cpp (L2495)) items in main axis. This is resulting in increased [main axis](bbeede82d3/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! 🙏

Pull Request resolved: https://github.com/facebook/yoga/pull/1188

Test Plan: Added fixtures which previously failed but now pass.

Reviewed By: necolas

Differential Revision: D42078162

Pulled By: NickGerleman

fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
This commit is contained in:
Nishan
2022-12-15 16:30:37 -08:00
committed by Facebook GitHub Bot
parent 35f3335efc
commit ba27f9d1ec
6 changed files with 561 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
gentest/fixtures/YGGapTest.html
View File

@@ -123,6 +123,12 @@
<div style="min-width: 60px; flex-grow: 1;"></div>
</div>
<div id="column_gap_determines_parent_width" style="flex-direction: row; height: 100px; align-items: 'stretch'; column-gap: 10px;">
<div style="width: 10px;"></div>
<div style="width: 20px;"></div>
<div style="width: 30px;"></div>
</div>
<div id="row_gap_align_items_stretch" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:stretch; align-content: stretch">
<div style="width: 20px; "></div>
<div style="width: 20px;"></div>
@@ -152,3 +158,9 @@
<div style="width: 60px; margin-block: 10px;"></div>
<div style="width: 60px; margin-block: 15px;"></div>
</div>
<div id="row_gap_determines_parent_height" style="flex-direction: column; width: 100px; align-items: 'stretch'; row-gap: 10px;">
<div style="height: 10px;"></div>
<div style="height: 20px"></div>
<div style="height: 30px"></div>
</div>