react / react/yoga

calculateBaseline(node) may return NaN if the baselineChild has not been measured

Open
#1,932 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Demo JSX Code:

<Layout config={{useWebDefaults: false}}>
  <Node style={{flexDirection: 'column'}}>
    <Node style={{flexDirection: 'row', width: 200, padding: 10, alignItems:'baseline'}}>
      <Node style={{ flexDirection: 'row', width: 100, height:100}}>
        <Node />
      </Node>
    </Node>
  </Node>
</Layout>

the yoga layout result : ⚠️⚠️⚠️the alignItems:'baseline' node got wrong lineHeight value of 0 ⚠️⚠️⚠️

Image

in constrast, Chrome/Safari perform well as expected

Image

this bug may resulting from wrong value returned by float calculateBaseline(const yoga::Node* node), if the baselineChild has not been measured, node->getLayout().measuredDimension(Dimension::Height) will return NaN value

Image

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.

Research direction

Start in yoga/algorithm/Baseline.cpp at calculateBaseline(const yoga::Node* node), then reproduce the JSX example from the issue in the Yoga playground. Inspect how an unmeasured baselineChild affects node->getLayout().measuredDimension(Dimension::Height). Done means the alignItems:'baseline' layout no longer produces a NaN-derived lineHeight of 0 and matches the expected browser behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
computer-graphics
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.