react-native-advanced-text 0.2.7 → 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
@@ -63,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
 
@@ -288,10 +298,16 @@ class AdvancedTextView : TextView {
         }
 
 
-        post {
-            setText(spannableString, BufferType.SPANNABLE)
-            Log.d(TAG, "Text updated with ${wordPositions.size} spans")
-        }
+        // 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 {
@@ -68,14 +73,18 @@ 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.
-    textAttributes.lineHeight =
-        props.lineHeight * textAttributes.fontSize * 1.2;
-  }
+  // 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.
 
   auto attributedString = AttributedString{};
   attributedString.appendFragment(AttributedString::Fragment{
@@ -86,6 +95,61 @@ AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
   return attributedString;
 }
 
+#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();
+
+  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
+  }
+
+  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,
     const LayoutConstraints& layoutConstraints) const {
@@ -100,21 +164,49 @@ 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()},
       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

@@ -85,9 +85,24 @@ class AdvancedTextViewShadowNode final : public ConcreteViewShadowNode<
   /*
    * 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.
    */
   AttributedString getAttributedString() const;
 
+#if defined(ANDROID)
+  /*
+   * 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.
+   */
+  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.7",
+  "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",