Skip to content

Commit

Permalink
Fix issue with alternating flex direction and percent postions
Browse files Browse the repository at this point in the history
Summary:
Fixing facebook/yoga#1658. We had a problem where if a child had a different flex direction than its parent, and it also set a position as a percent, it would look at the wrong axis to evaluate the percent. What was happening was we were passing in the container's mainAxis size and crossAxis size to use to evaluate the position size if it was a percent. However, we matched these sizes with the main/cross axis of the child - which is wrong if the flex direction is different. 

I changed it so that the function just takes in ownerWidth and ownerHeight then calls isRow to determine which one to use for the main/cross axis position. This reduces the ambiguity quite a bit imo.

Differential Revision: D58172416
  • Loading branch information
joevilches authored and facebook-github-bot committed Jun 5, 2024
1 parent b08cc8d commit 7d3b6b7
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -545,12 +545,8 @@ static float computeFlexBasisForChildren(
if (performLayout) {
// Set the initial position (relative to the owner).
const Direction childDirection = child->resolveDirection(direction);
const float mainDim =
isRow(mainAxis) ? availableInnerWidth : availableInnerHeight;
const float crossDim =
isRow(mainAxis) ? availableInnerHeight : availableInnerWidth;
child->setPosition(
childDirection, mainDim, crossDim, availableInnerWidth);
childDirection, availableInnerWidth, availableInnerHeight);
}

if (child->style().positionType() == PositionType::Absolute) {
Expand Down Expand Up @@ -2388,8 +2384,7 @@ void calculateLayout(
markerData,
0, // tree root
gCurrentGenerationCount.load(std::memory_order_relaxed))) {
node->setPosition(
node->getLayout().direction(), ownerWidth, ownerHeight, ownerWidth);
node->setPosition(node->getLayout().direction(), ownerWidth, ownerHeight);
roundLayoutResultsToPixelGrid(node, 0.0f, 0.0f);
}

Expand Down
17 changes: 10 additions & 7 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,8 @@ float Node::relativePosition(

void Node::setPosition(
const Direction direction,
const float mainSize,
const float crossSize,
const float ownerWidth) {
const float ownerWidth,
const float ownerHeight) {
/* Root nodes should be always layouted as LTR, so we don't return negative
* values. */
const Direction directionRespectingRoot =
Expand All @@ -244,10 +243,14 @@ void Node::setPosition(

// In the case of position static these are just 0. See:
// https://www.w3.org/TR/css-position-3/#valdef-position-static
const float relativePositionMain =
relativePosition(mainAxis, directionRespectingRoot, mainSize);
const float relativePositionCross =
relativePosition(crossAxis, directionRespectingRoot, crossSize);
const float relativePositionMain = relativePosition(
mainAxis,
directionRespectingRoot,
isRow(mainAxis) ? ownerWidth : ownerHeight);
const float relativePositionCross = relativePosition(
crossAxis,
directionRespectingRoot,
isRow(mainAxis) ? ownerHeight : ownerWidth);

const auto mainAxisLeadingEdge = inlineStartEdge(mainAxis, direction);
const auto mainAxisTrailingEdge = inlineEndEdge(mainAxis, direction);
Expand Down
6 changes: 1 addition & 5 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.h
Original file line number Diff line number Diff line change
Expand Up @@ -229,11 +229,7 @@ class YG_EXPORT Node : public ::YGNode {
void setLayoutBorder(float border, PhysicalEdge edge);
void setLayoutPadding(float padding, PhysicalEdge edge);
void setLayoutPosition(float position, PhysicalEdge edge);
void setPosition(
Direction direction,
float mainSize,
float crossSize,
float ownerWidth);
void setPosition(Direction direction, float ownerWidth, float ownerHeight);

// Other methods
Style::Length resolveFlexBasisPtr() const;
Expand Down

0 comments on commit 7d3b6b7

Please sign in to comment.