Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android React Text Component includeFontPadding:false incorrect height

See original GitHub issue

On Android, when includeFontPadding is set to false, the React Text component does not adjust its height. This makes it difficult to lay out other components at a precise spacing relative to a Text component.

For the native TextView component, the height is different depending on the value of includeFontPadding-

When includeFontPadding is set to true, the height of the TextView is based on abs(FontMetrics.top) + abs(FontMetrics.bottom).

When includeFontPadding to set to false, the height of the TextView is based on abs(FontMetrics.ascent) + abs(FontMetrics.descent).

This is happening because in ReactTextShadowNode.java, includeFontPadding is hardcoded to true when passing parameters to StaticLayout and BoringLayout. This seems like an easy fix.

An example from the measure function in ReactTextShadowNode.java -

private final YogaMeasureFunction mTextMeasureFunction = new YogaMeasureFunction() {

BoringLayout.make(
                text,
                textPaint,
                boring.width,
                Layout.Alignment.ALIGN_NORMAL,
                1.f,
                0.f,
                boring,
                true); // this parameter is includeFontPadding and should be based on the includeFontPadding value style of the component
...
};