react-native-advanced-text 0.2.7 → 0.2.8

package/android/src/main/java/com/advancedtext/AdvancedTextView.kt

@@ -25,6 +25,7 @@ import com.facebook.react.uimanager.events.RCTEventEmitter
 import android.text.Selection
 import android.graphics.Typeface
 import androidx.core.text.getSpans
+import kotlin.math.ceil
 
 class AdvancedTextView : TextView {
 
@@ -277,7 +278,7 @@ class AdvancedTextView : TextView {
         }
 
 
-        setLineSpacing(0f, lineHeightMultiplier)
+        applyLineHeight(spannableString)
 
         // Android's letterSpacing is in em; the prop is in dp/points. The ratio
         // dp / fontSize is scale-invariant, so no density conversion is needed.
@@ -294,6 +295,41 @@ class AdvancedTextView : TextView {
         }
     }
 
+    /**
+     * Applies `lineHeightMultiplier` as a CSS-style, exact-per-line-height span
+     * instead of `setLineSpacing(0, multiplier)`.
+     *
+     * The Fabric ShadowNode measures `lineHeight` by asking React Native's own
+     * TextLayoutManager to lay out a fragment with that lineHeight -- which RN
+     * implements with its own CSS-style line-height span (every line's box is
+     * forced to exactly `lineHeight`, ascent/descent redistributed evenly).
+     * That is a *different* algorithm from `setLineSpacing`, which scales the
+     * font's natural per-line advance instead; the two do not produce the same
+     * total height, and the gap between them is added on every wrapped line,
+     * so it grows with text length. Using the same CSS-style algorithm here
+     * (see CssLineHeightSpan) keeps this view's rendered height identical to
+     * what was measured, regardless of how many lines the text wraps onto.
+     */
+    private fun applyLineHeight(spannableString: SpannableString) {
+        if (lineHeightMultiplier == 1.0f || spannableString.isEmpty()) {
+            return
+        }
+
+        val metrics = paint.fontMetricsInt
+        val naturalLineHeight = -metrics.ascent + metrics.descent
+        if (naturalLineHeight <= 0) {
+            return
+        }
+
+        val targetLineHeight = ceil(lineHeightMultiplier * naturalLineHeight).toInt()
+        spannableString.setSpan(
+            CssLineHeightSpan(targetLineHeight),
+            0,
+            spannableString.length,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+    }
+
     override fun onDraw(canvas: Canvas) {
         drawHighlightedWordBackgrounds(canvas)
         super.onDraw(canvas)

package/android/src/main/java/com/advancedtext/CssLineHeightSpan.kt

@@ -0,0 +1,54 @@
+package com.advancedtext
+
+import android.graphics.Paint
+import android.text.style.LineHeightSpan
+import kotlin.math.ceil
+import kotlin.math.floor
+
+/**
+ * A [LineHeightSpan] that forces every line's box to exactly [lineHeightPx],
+ * following CSS `line-height` semantics: the difference between the target
+ * height and the font's natural ascent+descent ("leading") is split evenly
+ * above and below, and the very first line's top / very last line's bottom
+ * are pinned back to the font's own ascent/descent so the half-leading at
+ * the block's own edges doesn't inflate its total height.
+ *
+ * This exists because `AdvancedTextView`'s Fabric ShadowNode measures the
+ * `lineHeight` prop through React Native's `TextLayoutManager`, which applies
+ * `lineHeight` using this exact CSS-style algorithm internally -- a different
+ * one from Android's own `TextView.setLineSpacing(0, multiplier)`. Rendering
+ * with `setLineSpacing` instead of this span made the real height diverge
+ * from the measured one by a per-line amount, which is why the discrepancy
+ * grew with the number of wrapped lines.
+ *
+ * `start`/`end` here are the offsets of the *current line*, not the span's
+ * own range, so the first/last checks below correctly fire only once each
+ * per paragraph. Mirrors React Native's own
+ * `com.facebook.react.views.text.internal.span.CustomLineHeightSpan`
+ * (used internally for `<Text lineHeight={}>`) verbatim, so it inherits that
+ * implementation's on-device track record instead of a new one.
+ *
+ * See: https://www.w3.org/TR/css-inline-3/#inline-height
+ */
+internal class CssLineHeightSpan(private val lineHeightPx: Int) : LineHeightSpan {
+
+    override fun chooseHeight(
+        text: CharSequence,
+        start: Int,
+        end: Int,
+        spanstartv: Int,
+        v: Int,
+        fm: Paint.FontMetricsInt
+    ) {
+        val leading = lineHeightPx - ((-fm.ascent) + fm.descent)
+        fm.ascent -= ceil(leading / 2.0f).toInt()
+        fm.descent += floor(leading / 2.0f).toInt()
+
+        if (start == 0) {
+            fm.top = fm.ascent
+        }
+        if (end == text.length) {
+            fm.bottom = fm.descent
+        }
+    }
+}

package/common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.cpp

@@ -42,7 +42,7 @@ AdvancedTextViewShadowNode::AdvancedTextViewShadowNode(
           static_cast<const AdvancedTextViewShadowNode&>(sourceShadowNode)
               .textLayoutManager_) {}
 
-AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
+TextAttributes AdvancedTextViewShadowNode::baseTextAttributes() const {
   const auto& props = getConcreteProps();
 
   auto textAttributes = TextAttributes::defaultTextAttributes();
@@ -68,13 +68,77 @@ AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
     textAttributes.letterSpacing = props.letterSpacing;
   }
 
-  if (props.lineHeight > 0) {
-    // The component treats `lineHeight` as a multiple of the font size
-    // (see AdvancedTextView.mm / AdvancedTextView.kt). `TextAttributes`
-    // expects an absolute value; approximate the platform default single
-    // line height as 1.2 * fontSize.
+  return textAttributes;
+}
+
+#if defined(ANDROID)
+Float AdvancedTextViewShadowNode::measureNaturalLineHeight(
+    const TextAttributes& baseTextAttributes,
+    const TextLayoutContext& textLayoutContext) const {
+  // `baseTextAttributes` deliberately has no `lineHeight` set, so this
+  // resolves to the font's own natural single-line height -- exactly what
+  // CssLineHeightSpan.kt multiplies on the view side.
+  auto probeString = AttributedString{};
+  probeString.appendFragment(AttributedString::Fragment{
+      .string = "M",
+      .textAttributes = baseTextAttributes,
+      .parentShadowView = ShadowView(*this),
+  });
+
+  auto probeParagraphAttributes = ParagraphAttributes{};
+  probeParagraphAttributes.maximumNumberOfLines = 1;
+  // Measure the tight ascent+descent box (no extra top/bottom accent
+  // padding). This is the same "natural line height" basis
+  // CssLineHeightSpan.kt derives from `Paint.getFontMetricsInt()` on the
+  // view side (which is unaffected by `includeFontPadding`, a Layout-level
+  // setting) -- measuring with padding included here would double count it
+  // once per rendered line once the resulting value is multiplied and
+  // applied to the whole paragraph.
+  probeParagraphAttributes.includeFontPadding = false;
+
+  auto measurement = textLayoutManager_->measure(
+      AttributedStringBox{probeString},
+      probeParagraphAttributes,
+      textLayoutContext,
+      LayoutConstraints{});
+
+  return measurement.size.height;
+}
+#endif
+
+AttributedString AdvancedTextViewShadowNode::getAttributedString(
+    const TextAttributes& baseTextAttributes,
+    const TextLayoutContext& textLayoutContext) const {
+  const auto& props = getConcreteProps();
+
+  auto textAttributes = baseTextAttributes;
+
+  // The component treats `lineHeight` as a multiple of the font's own
+  // natural line height (see CssLineHeightSpan.kt on Android / the
+  // NSParagraphStyle-based spacing in AdvancedTextView.mm on iOS) -- NOT the
+  // absolute per-line value `TextAttributes::lineHeight` expects. A
+  // multiplier of 1 *is* the natural line height, so there is nothing to
+  // override in that case (overriding it with an approximation, as this
+  // used to do unconditionally, made even the "no lineHeight override" case
+  // measure taller or shorter than the real render).
+  if (props.lineHeight > 0 && props.lineHeight != 1.0) {
+#if defined(ANDROID)
+    // Android's natural single-line height depends on the resolved
+    // font/size/weight and isn't a fixed ratio of fontSize, so a constant
+    // approximation drifts from the real value CssLineHeightSpan.kt derives
+    // from Paint.getFontMetricsInt() -- by an amount that compounds with
+    // every wrapped line, which is why the error scaled with paragraph
+    // length. Measure the real natural height for these exact attributes
+    // instead, the same way the view derives it.
+    auto naturalLineHeight =
+        measureNaturalLineHeight(textAttributes, textLayoutContext);
+    textAttributes.lineHeight = naturalLineHeight > 0
+        ? props.lineHeight * naturalLineHeight
+        : props.lineHeight * textAttributes.fontSize * 1.2;
+#else
     textAttributes.lineHeight =
         props.lineHeight * textAttributes.fontSize * 1.2;
+#endif
   }
 
   auto attributedString = AttributedString{};
@@ -100,16 +164,17 @@ Size AdvancedTextViewShadowNode::measureContent(
         std::make_shared<const TextLayoutManager>(getContextContainer());
   }
 
-  auto paragraphAttributes = ParagraphAttributes{};
-  paragraphAttributes.maximumNumberOfLines = 0; // unlimited -> natural wrapping
-  paragraphAttributes.adjustsFontSizeToFit = false;
-
   auto textLayoutContext = TextLayoutContext{};
   textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
   textLayoutContext.surfaceId = getSurfaceId();
 
+  auto paragraphAttributes = ParagraphAttributes{};
+  paragraphAttributes.maximumNumberOfLines = 0; // unlimited -> natural wrapping
+  paragraphAttributes.adjustsFontSizeToFit = false;
+
   auto measurement = textLayoutManager_->measure(
-      AttributedStringBox{getAttributedString()},
+      AttributedStringBox{
+          getAttributedString(baseTextAttributes(), textLayoutContext)},
       paragraphAttributes,
       textLayoutContext,
       layoutConstraints);

package/common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h

@@ -34,6 +34,7 @@
 
 #include <jsi/jsi.h>
 #include <react/renderer/attributedstring/AttributedString.h>
+#include <react/renderer/attributedstring/TextAttributes.h>
 #include <react/renderer/components/AdvancedTextViewSpec/EventEmitters.h>
 #include <react/renderer/components/AdvancedTextViewSpec/Props.h>
 #include <react/renderer/components/AdvancedTextViewSpec/States.h>
@@ -42,6 +43,7 @@
 #include <react/renderer/core/LayoutContext.h>
 #include <react/renderer/core/ShadowNode.h>
 #include <react/renderer/core/ShadowNodeFragment.h>
+#include <react/renderer/textlayoutmanager/TextLayoutContext.h>
 
 namespace facebook::react {
 
@@ -82,11 +84,42 @@ class AdvancedTextViewShadowNode final : public ConcreteViewShadowNode<
       const LayoutConstraints& layoutConstraints) const override;
 
  private:
+  /*
+   * Builds the font-related `TextAttributes` from the component props
+   * (family/weight/style/size/letterSpacing), *excluding* `lineHeight`.
+   * Shared between the natural-line-height probe and the real measurement so
+   * both resolve to the exact same font.
+   */
+  TextAttributes baseTextAttributes() const;
+
+  /*
+   * `lineHeight` is exposed to JS as a multiple of the font's own natural
+   * line height (see CssLineHeightSpan.kt on Android), NOT the absolute
+   * per-line value `TextAttributes::lineHeight` expects. A hardcoded ratio
+   * (e.g. `fontSize * 1.2`) is only an approximation of a font's real
+   * natural single-line height, and native font tables (especially OEM
+   * ones) can deviate from it enough to make Yoga's measured block height
+   * visibly disagree with what the native view actually draws. To keep them
+   * in sync, measure a single line of the same resolved font (no
+   * `lineHeight` override) and use its height as the real multiplier base --
+   * with `includeFontPadding = false`, matching the tight ascent+descent
+   * basis `Paint.getFontMetricsInt()` gives `CssLineHeightSpan.kt` on the
+   * view side (Android only; iOS's own NSParagraphStyle-based spacing in
+   * AdvancedTextView.mm doesn't need this).
+   */
+#if defined(ANDROID)
+  Float measureNaturalLineHeight(
+      const TextAttributes& baseTextAttributes,
+      const TextLayoutContext& textLayoutContext) const;
+#endif
+
   /*
    * Builds a single-fragment `AttributedString` from the component props
    * (text + font attributes), mirroring how the native views render it.
    */
-  AttributedString getAttributedString() const;
+  AttributedString getAttributedString(
+      const TextAttributes& baseTextAttributes,
+      const TextLayoutContext& textLayoutContext) const;
 
   // Lazily created on first measure, then reused / copied across clones.
   mutable std::shared_ptr<const TextLayoutManager> textLayoutManager_;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",