react-native-advanced-text 0.2.8 → 0.2.10

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

@@ -5,6 +5,7 @@ import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Point
 import android.graphics.RectF
+import android.os.Build
 import android.text.SpannableString
 import android.text.Spannable
 import android.text.Spanned
@@ -25,7 +26,6 @@ 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 {
 
@@ -64,6 +64,15 @@ class AdvancedTextView : TextView {
         // React Native `style` instead, exactly like <Text>.
         setPadding(0, 0, 0, 0)
         setTextIsSelectable(true)
+        // Fabric measures this component's text via RN's own TextLayoutManager,
+        // which explicitly builds its StaticLayout with
+        // `setUseLineSpacingFromFallbacks(true)`. TextView's own equivalent
+        // (`setFallbackLineSpacing`) defaults differently depending on
+        // targetSdkVersion, so without this the two engines can compute
+        // slightly different natural line heights for the same font/text.
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            setFallbackLineSpacing(true)
+        }
 
         movementMethod = SmartMovementMethod
 
@@ -278,7 +287,7 @@ class AdvancedTextView : TextView {
         }
 
 
-        applyLineHeight(spannableString)
+        setLineSpacing(0f, lineHeightMultiplier)
 
         // 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.
@@ -289,45 +298,16 @@ class AdvancedTextView : TextView {
         }
 
 
-        post {
-            setText(spannableString, BufferType.SPANNABLE)
-            Log.d(TAG, "Text updated with ${wordPositions.size} spans")
-        }
-    }
-
-    /**
-     * 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
-        )
+        // Set synchronously, not via `post {}`: in a virtualized list (e.g.
+        // FlashList) this view gets recycled for a new row on every scroll
+        // tick. A posted `setText` races the *next* recycle -- if this view
+        // is reused again before the queued runnable fires, whichever row's
+        // runnable happens to run last wins, and a row can end up rendering
+        // blank (with its correctly-measured height still reserved by
+        // Fabric) while its own `setText` was dropped. `setText` doesn't
+        // need to wait for anything here, so there's nothing to defer for.
+        setText(spannableString, BufferType.SPANNABLE)
+        Log.d(TAG, "Text updated with ${wordPositions.size} spans")
     }
 
     override fun onDraw(canvas: Canvas) {

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

@@ -0,0 +1,69 @@
+package com.advancedtext
+
+import android.content.res.Resources
+import android.graphics.Typeface
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.util.TypedValue
+
+/**
+ * JNI bridge so the Fabric ShadowNode (C++ `measureContent()`) can ask
+ * Android's own `StaticLayout` -- the exact class `AdvancedTextView`'s real
+ * rendering is built on -- for this text's real height, instead of going
+ * through React Native's own text-measurement engine (`TextLayoutManager`).
+ *
+ * RN's own engine and Android's native `TextView` rendering are two
+ * independently-implemented paths that can drift apart by a few px per line
+ * (verified: RN's `TextLayoutManager` takes a different code path --
+ * `BoringLayout` vs `StaticLayout` -- for short/simple text than for real,
+ * multi-line paragraphs, and even StaticLayout-to-StaticLayout the two
+ * engines' resolved `Paint`/`Typeface` don't perfectly agree). Since this
+ * component doesn't reuse RN's own prepared text layout for drawing anyway
+ * (it re-renders through its own `TextView`), measuring with the same
+ * `StaticLayout` call the view itself is built on removes the drift
+ * entirely, rather than approximating it from the C++ side.
+ *
+ * Every parameter below is chosen to mirror exactly what `AdvancedTextView`
+ * itself configures on its own `TextView`/`Paint` in `updateTextWithHighlights()`
+ * -- font resolution, text size (SP, not raw px), `setLineSpacing`, and
+ * letter spacing. Spans (highlight/click color) are omitted: they don't
+ * affect font metrics or line breaking, only drawing.
+ */
+object NativeTextMeasurement {
+
+    @JvmStatic
+    fun measureHeight(
+        text: String,
+        fontFamily: String,
+        typefaceStyle: Int,
+        fontSizeSp: Float,
+        lineHeightMultiplier: Float,
+        letterSpacingDp: Float,
+        widthPx: Float
+    ): Float {
+        if (text.isEmpty() || widthPx <= 0f) {
+            return 0f
+        }
+
+        val displayMetrics = Resources.getSystem().displayMetrics
+        val fontSizePx =
+            TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, fontSizeSp, displayMetrics)
+
+        val paint = TextPaint(TextPaint.ANTI_ALIAS_FLAG)
+        paint.typeface = Typeface.create(fontFamily, typefaceStyle)
+        paint.textSize = fontSizePx
+        // Mirrors AdvancedTextView's own letterSpacing conversion: dp/points
+        // prop -> em, scale-invariant so no density conversion is needed.
+        if (letterSpacingDp != 0f && fontSizeSp > 0f) {
+            paint.letterSpacing = letterSpacingDp / fontSizeSp
+        }
+
+        val width = widthPx.toInt().coerceAtLeast(1)
+        val builder = StaticLayout.Builder.obtain(text, 0, text.length, paint, width)
+        // `setLineSpacing(0, multiplier)` is exactly what AdvancedTextView
+        // itself applies for rendering -- see updateTextWithHighlights().
+        builder.setLineSpacing(0f, if (lineHeightMultiplier > 0f) lineHeightMultiplier else 1f)
+        val layout = builder.build()
+        return layout.height.toFloat()
+    }
+}

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

@@ -11,6 +11,7 @@
 
 #include <algorithm>
 #include <cctype>
+#include <cmath>
 #include <string>
 
 #include <react/renderer/attributedstring/AttributedStringBox.h>
@@ -21,6 +22,10 @@
 #include <react/renderer/textlayoutmanager/TextLayoutContext.h>
 #include <react/renderer/textlayoutmanager/TextLayoutManager.h>
 
+#if defined(ANDROID)
+#include <fbjni/fbjni.h>
+#endif
+
 namespace facebook::react {
 
 namespace {
@@ -42,7 +47,7 @@ AdvancedTextViewShadowNode::AdvancedTextViewShadowNode(
           static_cast<const AdvancedTextViewShadowNode&>(sourceShadowNode)
               .textLayoutManager_) {}
 
-TextAttributes AdvancedTextViewShadowNode::baseTextAttributes() const {
+AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
   const auto& props = getConcreteProps();
 
   auto textAttributes = TextAttributes::defaultTextAttributes();
@@ -68,87 +73,82 @@ TextAttributes AdvancedTextViewShadowNode::baseTextAttributes() const {
     textAttributes.letterSpacing = props.letterSpacing;
   }
 
-  return textAttributes;
-}
+  // Deliberately never sets `textAttributes.lineHeight`: the component's
+  // `lineHeight` prop is a *multiple* of the font's natural line height (see
+  // `setLineSpacing(0, multiplier)` in AdvancedTextView.kt / the
+  // NSParagraphStyle-based spacing in AdvancedTextView.mm on iOS), not the
+  // absolute per-line value `TextAttributes::lineHeight` expects. Forcing an
+  // absolute value here would make Fabric apply RN's own CSS-style
+  // forced-line-height algorithm, which is a *different* algorithm from
+  // `setLineSpacing`'s multiplicative one and drifts from it by an amount
+  // that compounds with every wrapped line. Measuring naturally instead and
+  // scaling the *result* in `measureContent()` uses the same "multiply the
+  // natural total" math `setLineSpacing` itself uses, so they agree exactly
+  // regardless of paragraph length.
 
-#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,
+  auto attributedString = AttributedString{};
+  attributedString.appendFragment(AttributedString::Fragment{
+      .string = props.text,
+      .textAttributes = textAttributes,
       .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;
+  return attributedString;
 }
-#endif
 
-AttributedString AdvancedTextViewShadowNode::getAttributedString(
-    const TextAttributes& baseTextAttributes,
-    const TextLayoutContext& textLayoutContext) const {
+#if defined(ANDROID)
+Float AdvancedTextViewShadowNode::measureHeightViaAndroidNative(
+    Float widthDp,
+    Float pointScaleFactor) const {
+  if (!std::isfinite(widthDp) || widthDp <= 0 || pointScaleFactor <= 0) {
+    return -1;
+  }
+
   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
+  const auto weight = toLowerAscii(props.fontWeight);
+  // Matches Typeface.NORMAL/BOLD/ITALIC -- the same three-way mapping
+  // AdvancedTextView.kt uses for `typeface = when (fontWeight) { ... }`.
+  int typefaceStyle = 0; // Typeface.NORMAL
+  if (weight == "bold") {
+    typefaceStyle = 1; // Typeface.BOLD
+  } else if (weight == "italic") {
+    typefaceStyle = 2; // Typeface.ITALIC
   }
 
-  auto attributedString = AttributedString{};
-  attributedString.appendFragment(AttributedString::Fragment{
-      .string = props.text,
-      .textAttributes = textAttributes,
-      .parentShadowView = ShadowView(*this),
-  });
-  return attributedString;
+  std::string fontFamily =
+      props.fontFamily.empty() ? "sans-serif" : props.fontFamily;
+  Float fontSize = props.fontSize > 0 ? props.fontSize : 16.0;
+  Float lineHeightMultiplier = props.lineHeight > 0 ? props.lineHeight : 1.0;
+  Float widthPx = widthDp * pointScaleFactor;
+
+  static const auto cls =
+      facebook::jni::findClassStatic("com/advancedtext/NativeTextMeasurement");
+  static const auto method = cls->getStaticMethod<jfloat(
+      std::string,
+      std::string,
+      jint,
+      jfloat,
+      jfloat,
+      jfloat,
+      jfloat)>("measureHeight");
+
+  Float heightPx = method(
+      cls,
+      props.text,
+      fontFamily,
+      typefaceStyle,
+      static_cast<jfloat>(fontSize),
+      static_cast<jfloat>(lineHeightMultiplier),
+      static_cast<jfloat>(props.letterSpacing),
+      static_cast<jfloat>(widthPx));
+
+  if (heightPx <= 0) {
+    return -1;
+  }
+
+  return heightPx / pointScaleFactor;
 }
+#endif
 
 Size AdvancedTextViewShadowNode::measureContent(
     const LayoutContext& layoutContext,
@@ -173,13 +173,40 @@ Size AdvancedTextViewShadowNode::measureContent(
   paragraphAttributes.adjustsFontSizeToFit = false;
 
   auto measurement = textLayoutManager_->measure(
-      AttributedStringBox{
-          getAttributedString(baseTextAttributes(), textLayoutContext)},
+      AttributedStringBox{getAttributedString()},
       paragraphAttributes,
       textLayoutContext,
       layoutConstraints);
 
-  return layoutConstraints.clamp(measurement.size);
+  auto size = measurement.size;
+
+#if defined(ANDROID)
+  // Prefer asking Android's own `StaticLayout` for the height directly (see
+  // `measureHeightViaAndroidNative()`) -- it's the same class
+  // `AdvancedTextView`'s real rendering is built on, so there's no
+  // measurement-vs-render drift to compound over long paragraphs. `size`
+  // (from RN's own TextLayoutManager, above) still supplies the width --
+  // this only replaces the height. Falls back to the `lineHeight`-scaling
+  // math below when the width isn't a finite, positive number (e.g. an
+  // unconstrained/intrinsic-width measure pass).
+  auto nativeHeight =
+      measureHeightViaAndroidNative(size.width, textLayoutContext.pointScaleFactor);
+  if (nativeHeight > 0) {
+    size.height = nativeHeight;
+    return layoutConstraints.clamp(size);
+  }
+#endif
+
+  // `lineHeight` scales the font's own natural line height (see
+  // `getAttributedString()`); since `size.height` above is the *natural*
+  // (multiplier == 1) total, `setLineSpacing(0, multiplier)` scaling the
+  // same natural total on the view side means multiplying it here
+  // reproduces exactly the same number, for any paragraph length.
+  if (props.lineHeight > 0) {
+    size.height *= props.lineHeight;
+  }
+
+  return layoutConstraints.clamp(size);
 }
 
 } // namespace facebook::react

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

@@ -34,7 +34,6 @@
 
 #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>
@@ -43,7 +42,6 @@
 #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 {
 
@@ -85,41 +83,25 @@ class AdvancedTextViewShadowNode final : public ConcreteViewShadowNode<
 
  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.
+   * Builds a single-fragment `AttributedString` from the component props
+   * (text + font attributes), mirroring how the native views render it.
+   * Deliberately never sets `lineHeight` -- see the .cpp for why.
    */
-  TextAttributes baseTextAttributes() const;
+  AttributedString getAttributedString() 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.
+   * Asks Android's own `StaticLayout` (via a JNI call into
+   * `NativeTextMeasurement.measureHeight()`) for this text's real rendered
+   * height at the given width, instead of approximating it through RN's own
+   * `TextLayoutManager`. Returns height in dp, or a negative value if it
+   * couldn't be computed (e.g. unconstrained width), signaling the caller to
+   * fall back to the `TextLayoutManager`-based path.
    */
-  AttributedString getAttributedString(
-      const TextAttributes& baseTextAttributes,
-      const TextLayoutContext& textLayoutContext) const;
+  Float measureHeightViaAndroidNative(
+      Float widthDp,
+      Float pointScaleFactor) const;
+#endif
 
   // 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.8",
+  "version": "0.2.10",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

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

@@ -1,54 +0,0 @@
-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
-        }
-    }
-}