react / react/yoga

Child nodes shrink when parent node move across an axis

Open
#683 5 comments 1 reaction 1 assignee View on GitHub

@davidaurelio is already working on this.

Since Jan 28, 2019.

Algorithm
Dominant language
C++
Stars
18.9k
Forks
1.6k
Avg merge
1m
Merged PRs (30d)
1

Description

Report

Issues and Steps to Reproduce

Child nodes get smaller and smaller on every layout calculation when the parent node is moving across an axis or positioned along the axis.

shrink

The 2 test cases below reproduce the issue, notice that when the tests fail the leaf node is smaller by 10.

TEST(YogaTest, leaf_node_width_shrink_on_axis)
{
  const YGConfigRef config = YGConfigNew();

  const YGNodeRef root = YGNodeNewWithConfig(config);
  const YGNodeRef top = YGNodeNewWithConfig(config);
  // Happen with absolute position as well
  //YGNodeStyleSetPositionType(top, YGPositionTypeAbsolute);

  const YGNodeRef mid = YGNodeNewWithConfig(config);

  const YGNodeRef leaf = YGNodeNewWithConfig(config);
  YGNodeStyleSetWidth(leaf, 100);
  YGNodeStyleSetHeight(leaf, 100);

  YGNodeInsertChild(mid, leaf, 0);
  YGNodeInsertChild(top, mid, 0);
  YGNodeInsertChild(root, top, 0);

  YGNodeStyleSetPosition(top, YGEdgeLeft, 5);
  YGNodeStyleSetPosition(top, YGEdgeTop, 5);

  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

  for (int i = 0; i < 100; i++)
  {
    float pos = YGNodeLayoutGetLeft(top);
    // Moving top container by float values > 1.5 and < 2.0 will eventually shrink the child node!
    // Everything seems fine when moving by integer or values that are rounded downward.
    // The shrink start when the top node x position gets negative.
    float newPos = pos - 1.75f;
    YGNodeStyleSetPosition(top, YGEdgeLeft, newPos);
    YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

    // This will eventually get smaller and smaller.
    // The shrinking of the leaf stop when the top node has crossed the y axis completely
    ASSERT_GT(YGNodeLayoutGetWidth(leaf), 90);
  }

  YGNodeFreeRecursive(root);

  YGConfigFree(config);
}

// Same test as above but moving along the y axis
TEST(YogaTest, leaf_node_height_shrink_on_axis)
{
  const YGConfigRef config = YGConfigNew();

  const YGNodeRef root = YGNodeNewWithConfig(config);
  const YGNodeRef top = YGNodeNewWithConfig(config);
  const YGNodeRef mid = YGNodeNewWithConfig(config);

  const YGNodeRef leaf = YGNodeNewWithConfig(config);
  YGNodeStyleSetWidth(leaf, 100);
  YGNodeStyleSetHeight(leaf, 100);

  YGNodeInsertChild(mid, leaf, 0);
  YGNodeInsertChild(top, mid, 0);
  YGNodeInsertChild(root, top, 0);

  YGNodeStyleSetPosition(top, YGEdgeLeft, 5);
  YGNodeStyleSetPosition(top, YGEdgeTop, 5);

  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

  for (int i = 0; i < 100; i++)
  {
    float pos = YGNodeLayoutGetTop(top);
    float newPos = pos - 1.8f;
    YGNodeStyleSetPosition(top, YGEdgeTop, newPos);
    YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

    ASSERT_GT(YGNodeLayoutGetHeight(leaf), 90);
  }

  YGNodeFreeRecursive(root);

  YGConfigFree(config);
}

Expected Behavior

The width and height of the child node do not change when moving the top parent node.

Actual Behavior

Child nodes keep shrinking until they don't have any width and/or height.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.