react-native-highlight-text-view 0.1.24 → 0.1.26

package/README.md

@@ -48,6 +48,7 @@ export default function App() {
 | `verticalAlign`         | `'top' \| 'center' \| 'middle' \| 'bottom'`          | -         | Vertical alignment (iOS only). Alternative to using combined `textAlign` values. **Note:** Android does not support vertical alignment and will use default vertical positioning.                                            |
 | `fontFamily`            | `string`                                             | -         | Font family name                                                                                                                                                                                                             |
 | `fontSize`              | `string`                                             | `32`      | Font size in points                                                                                                                                                                                                          |
+| `letterSpacing`         | `string`                                             | `0`       | Extra space between characters, in layout points (same semantics as React Native's `letterSpacing`).                                                                                                                         |
 | `lineHeight`            | `string`                                             | `0`       | Line height override (0 means use default line height)                                                                                                                                                                       |
 | `highlightBorderRadius` | `string`                                             | `0`       | Border radius for the highlight background                                                                                                                                                                                   |
 | `padding`               | `string`                                             | `4`       | Padding around each character highlight (expands background outward)                                                                                                                                                         |

package/android/src/main/java/com/highlighttext/HighlightTextView.kt

@@ -7,197 +7,68 @@ import android.graphics.Paint
 import android.graphics.RectF
 import android.graphics.Typeface
 import android.text.Editable
-import android.text.Spannable
-import android.text.SpannableString
 import android.text.TextWatcher
-import android.text.style.ReplacementSpan
 import android.util.AttributeSet
 import android.util.TypedValue
 import android.view.Gravity
 import androidx.appcompat.widget.AppCompatEditText
+import com.facebook.react.common.assets.ReactFontManager
 
 /**
- * iOS-style span: Draws rounded background for each character.
- * Padding is only applied at line boundaries (first/last character of each line).
+ * Custom EditText that mimics the iOS implementation by drawing per-character
+ * rounded highlights directly in onDraw(), instead of using spans.
+ *
+ * This avoids layout thrashing/flicker when lines auto-wrap and keeps padding
+ * logic independent from Android's line breaking.
  */
-class RoundedBackgroundSpan(
-  internal val backgroundColor: Int,
-  internal val textColor: Int,
-  internal val paddingLeft: Float,
-  internal val paddingRight: Float,
-  internal val paddingTop: Float,
-  internal val paddingBottom: Float,
-  internal val backgroundInsetTop: Float,
-  internal val backgroundInsetBottom: Float,
-  internal val backgroundInsetLeft: Float,
-  internal val backgroundInsetRight: Float,
-  internal val cornerRadius: Float,
-  internal val isLineStart: Boolean = false,
-  internal val isLineEnd: Boolean = false,
-  internal val isFirstLine: Boolean = false,
-  internal val isLastLine: Boolean = false
-) : ReplacementSpan() {
-
-  override fun getSize(
-    paint: Paint,
-    text: CharSequence?,
-    start: Int,
-    end: Int,
-    fm: Paint.FontMetricsInt?
-  ): Int {
-    // Only add padding at line boundaries (matches iOS behavior)
-    val width = paint.measureText(text, start, end)
-    val leftPad = if (isLineStart) paddingLeft else 0f
-    val rightPad = if (isLineEnd) paddingRight else 0f
-    return (width + leftPad + rightPad).toInt()
-  }
-
-  override fun draw(
-    canvas: Canvas,
-    text: CharSequence?,
-    start: Int,
-    end: Int,
-    x: Float,
-    top: Int,
-    y: Int,
-    bottom: Int,
-    paint: Paint
-  ) {
-    if (text == null) return
-    
-    val bgPaint = Paint().apply {
-      color = backgroundColor
-      style = Paint.Style.FILL
-      isAntiAlias = true
-    }
-    
-    val width = paint.measureText(text, start, end)
-    
-    // Use font metrics for consistent height (matches iOS)
-    val fontMetrics = paint.fontMetrics
-    val textHeight = fontMetrics.descent - fontMetrics.ascent
-    val textTop = y + fontMetrics.ascent
-    
-    // Apply background insets first (shrinks from line box - EXACTLY like iOS line 45-48)
-    val insetTop = textTop + backgroundInsetTop
-    val insetHeight = textHeight - (backgroundInsetTop + backgroundInsetBottom)
-    
-    // Only apply padding at line boundaries (matches iOS behavior)
-    val leftPad = if (isLineStart) paddingLeft else 0f
-    val rightPad = if (isLineEnd) paddingRight else 0f
-    
-    // SELECTIVE ROUNDING STRATEGY:
-    // 1. Line Start: Round Left corners.
-    // 2. Line End: Round Right corners.
-    // 3. Middle: Square (no rounding).
-    // 4. Overlap: Minimal (1px) to seal seams.
-    
-    val overlapExtension = 1f
-    
-    // No extension needed for start/end boundaries
-    val leftExtend = 0f
-    
-    // Extend right slightly for middle characters to seal the gap
-    val rightExtend = if (!isLineEnd) {
-      if (isLineStart) leftPad + overlapExtension else overlapExtension
-    } else {
-      0f
-    }
-    
-    // Vertical overlap to eliminate gaps (reduced to prevent descender clipping)
-    val topExtend = 0f
-    val bottomExtend = 0f
-    
-    // Calculate background rect
-    // NOTE: Since this is a ReplacementSpan, 'x' is the start of the span (including padding).
-    // So we draw from 'x', not 'x - leftPad'.
-    val rect = RectF(
-      x + backgroundInsetLeft - leftExtend,
-      insetTop - paddingTop - topExtend,
-      x + leftPad + width + rightPad - backgroundInsetRight + rightExtend,
-      insetTop + insetHeight + paddingBottom + bottomExtend
-    )
-    
-    // Draw based on position
-    when {
-      isLineStart && isLineEnd -> {
-        // Single character - round all corners
-        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, bgPaint)
-      }
-      isLineStart -> {
-        // Line START - round LEFT corners (top and bottom)
-        val path = android.graphics.Path()
-        path.addRoundRect(
-          rect,
-          floatArrayOf(
-            cornerRadius, cornerRadius,  // top-left
-            0f, 0f,                       // top-right
-            0f, 0f,                       // bottom-right
-            cornerRadius, cornerRadius    // bottom-left
-          ),
-          android.graphics.Path.Direction.CW
-        )
-        canvas.drawPath(path, bgPaint)
-      }
-      isLineEnd -> {
-        // Line END - round RIGHT corners (top and bottom)
-        val path = android.graphics.Path()
-        path.addRoundRect(
-          rect,
-          floatArrayOf(
-            0f, 0f,                       // top-left
-            cornerRadius, cornerRadius,   // top-right
-            cornerRadius, cornerRadius,   // bottom-right
-            0f, 0f                        // bottom-left
-          ),
-          android.graphics.Path.Direction.CW
-        )
-        canvas.drawPath(path, bgPaint)
-      }
-      else -> {
-        // Middle characters - NO rounded corners (square) for smooth edges
-        canvas.drawRect(rect, bgPaint)
-      }
-    }
-    
-    // Draw text offset by left padding only if at line start
-    val textPaint = Paint(paint).apply {
-      color = textColor
-      isAntiAlias = true
-    }
-    canvas.drawText(text, start, end, x + leftPad, y.toFloat(), textPaint)
-  }
-}
-
 class HighlightTextView : AppCompatEditText {
+  // Visual props
   private var characterBackgroundColor: Int = Color.parseColor("#FFFF00")
   private var textColorValue: Int = Color.BLACK
   private var cornerRadius: Float = 4f
   private var highlightBorderRadius: Float = 0f
+
+  // Per-character padding
   private var charPaddingLeft: Float = 4f
   private var charPaddingRight: Float = 4f
   private var charPaddingTop: Float = 4f
   private var charPaddingBottom: Float = 4f
+
+  // Background insets (shrink from line box)
   private var backgroundInsetTop: Float = 0f
   private var backgroundInsetBottom: Float = 0f
   private var backgroundInsetLeft: Float = 0f
   private var backgroundInsetRight: Float = 0f
+
+  // Line height control
   private var customLineHeight: Float = 0f
+
+  // Font + alignment state
   private var currentFontFamily: String? = null
   private var currentFontWeight: String = "normal"
   private var currentVerticalAlign: String? = null
+  // Letter spacing in layout points (same semantics as React Native's letterSpacing prop)
+  private var letterSpacingPoints: Float = 0f
+
+  // Internal flags
   private var isUpdatingText: Boolean = false
-  
+
+  // Drawing helpers
+  private val backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.FILL
+  }
+  private val backgroundRect = RectF()
+
   var onTextChangeListener: ((String) -> Unit)? = null
 
   constructor(context: Context?) : super(context!!) {
     init()
   }
-  
+
   constructor(context: Context?, attrs: AttributeSet?) : super(context!!, attrs) {
     init()
   }
-  
+
   constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
     context!!,
     attrs,
@@ -212,42 +83,120 @@ class HighlightTextView : AppCompatEditText {
     gravity = Gravity.CENTER
     setPadding(20, 20, 20, 20)
     textColorValue = currentTextColor
-    
+
     // Enable text wrapping
     maxLines = Int.MAX_VALUE
     isSingleLine = false
     setHorizontallyScrolling(false)
-    
+
+    applyLineHeightAndSpacing()
+
     addTextChangedListener(object : TextWatcher {
-      private var changeStart = 0
-      private var changeEnd = 0
-      
-      override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
-        changeStart = start
-        changeEnd = start + after
-      }
-      
+      override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
+
       override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
-      
+
       override fun afterTextChanged(s: Editable?) {
         if (!isUpdatingText) {
           onTextChangeListener?.invoke(s?.toString() ?: "")
-          
-          applyCharacterBackgroundsIncremental(s, changeStart, changeEnd)
+          // Text changed → redraw backgrounds
+          invalidate()
         }
       }
     })
   }
 
+  // --- Drawing -----------------------------------------------------------------
+
+  override fun onDraw(canvas: Canvas) {
+    val layout = layout
+    val text = text
+
+    if (layout != null && text != null && text.isNotEmpty()) {
+      val save = canvas.save()
+
+      // Canvas is already translated by scrollX/scrollY in View.draw().
+      // Here we only need to account for view padding so our coordinates
+      // match the Layout's internal coordinate system.
+      val translateX = totalPaddingLeft
+      val translateY = totalPaddingTop
+      canvas.translate(translateX.toFloat(), translateY.toFloat())
+
+      drawCharacterBackgrounds(canvas, text, layout)
+
+      canvas.restoreToCount(save)
+    }
+
+    // Let EditText draw text, cursor, selection, etc. on top of backgrounds
+    super.onDraw(canvas)
+  }
+
+  private fun drawCharacterBackgrounds(canvas: Canvas, text: CharSequence, layout: android.text.Layout) {
+    backgroundPaint.color = characterBackgroundColor
+    val paint = paint
+    val radius = if (highlightBorderRadius > 0f) highlightBorderRadius else cornerRadius
+
+    val length = text.length
+    if (length == 0) return
+
+    for (i in 0 until length) {
+      val ch = text[i]
+      // Match iOS: skip spaces and control characters for background
+      if (ch == '\n' || ch == '\t' || ch == ' ') continue
+
+      val line = layout.getLineForOffset(i)
+      val lineStart = layout.getLineStart(line)
+      val lineEnd = layout.getLineEnd(line)
+
+      // Horizontal bounds based on layout positions
+      val xStart = layout.getPrimaryHorizontal(i)
+      val isLastCharInLine = i == lineEnd - 1
+      val xEnd = if (!isLastCharInLine && i + 1 < length) {
+        layout.getPrimaryHorizontal(i + 1)
+      } else {
+        // Fallback for last character in the line/text
+        xStart + paint.measureText(text, i, i + 1)
+      }
+
+      // Vertical bounds based on line box (includes line spacing)
+      val lineTop = layout.getLineTop(line).toFloat()
+      val lineBottom = layout.getLineBottom(line).toFloat()
+
+      var left = xStart
+      var right = xEnd
+      var top = lineTop
+      var bottom = lineBottom
+
+      // First shrink by background insets (from the line box)
+      top += backgroundInsetTop
+      bottom -= backgroundInsetBottom
+      left += backgroundInsetLeft
+      right -= backgroundInsetRight
+
+      // Then expand outward by per-character padding
+      left -= charPaddingLeft
+      right += charPaddingRight
+      top -= charPaddingTop
+      bottom += charPaddingBottom
+
+      if (right <= left || bottom <= top) continue
+
+      backgroundRect.set(left, top, right, bottom)
+      canvas.drawRoundRect(backgroundRect, radius, radius, backgroundPaint)
+    }
+  }
+
+  // --- Public API used from the ViewManager ------------------------------------
+
   fun setCharacterBackgroundColor(color: Int) {
     characterBackgroundColor = color
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   override fun setTextColor(color: Int) {
     super.setTextColor(color)
     textColorValue = color
-    applyCharacterBackgrounds()
+    invalidate()
   }
 
   fun setCharPadding(left: Float, top: Float, right: Float, bottom: Float) {
@@ -256,35 +205,40 @@ class HighlightTextView : AppCompatEditText {
     charPaddingRight = right
     charPaddingBottom = bottom
     updateViewPadding()
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
   }
-  
+
   fun setCharPaddingLeft(padding: Float) {
     charPaddingLeft = padding
     updateViewPadding()
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
   }
-  
+
   fun setCharPaddingRight(padding: Float) {
     charPaddingRight = padding
     updateViewPadding()
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
   }
-  
+
   fun setCharPaddingTop(padding: Float) {
     charPaddingTop = padding
     updateViewPadding()
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
   }
-  
+
   fun setCharPaddingBottom(padding: Float) {
     charPaddingBottom = padding
     updateViewPadding()
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
   }
-  
+
   private fun updateViewPadding() {
-    // Sync View padding with char padding to prevent clipping of background
+    // Keep view padding in sync so backgrounds are not clipped at the edges
     setPadding(
       charPaddingLeft.toInt(),
       charPaddingTop.toInt(),
@@ -292,27 +246,27 @@ class HighlightTextView : AppCompatEditText {
       charPaddingBottom.toInt()
     )
   }
-  
+
   fun setCornerRadius(radius: Float) {
     cornerRadius = radius
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   fun setHighlightBorderRadius(radius: Float) {
     highlightBorderRadius = radius
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   fun setFontWeight(weight: String) {
     currentFontWeight = weight
     updateFont()
   }
-  
+
   fun setFontFamilyProp(family: String?) {
     currentFontFamily = family
     updateFont()
   }
-  
+
   private fun updateFont() {
     // Parse font weight to integer (100-900)
     val weight = when (currentFontWeight) {
@@ -327,16 +281,21 @@ class HighlightTextView : AppCompatEditText {
       "900" -> 900
       else -> 400
     }
-    
-    // Get base typeface
-    val baseTypeface = if (currentFontFamily != null) {
-      when (currentFontFamily?.lowercase()) {
+
+    // Capture currentFontFamily as local variable to avoid smart cast issues
+    val fontFamily = currentFontFamily
+
+    // Get base typeface using ReactFontManager for custom fonts
+    val baseTypeface = if (fontFamily != null) {
+      when (fontFamily.lowercase()) {
         "system" -> Typeface.DEFAULT
         "sans-serif" -> Typeface.SANS_SERIF
         "serif" -> Typeface.SERIF
         "monospace" -> Typeface.MONOSPACE
         else -> try {
-          Typeface.create(currentFontFamily, Typeface.NORMAL)
+          // Use ReactFontManager to load custom fonts from assets
+          val style = if (weight >= 600) Typeface.BOLD else Typeface.NORMAL
+          ReactFontManager.getInstance().getTypeface(fontFamily, style, context.assets)
         } catch (e: Exception) {
           Typeface.DEFAULT
         }
@@ -344,7 +303,7 @@ class HighlightTextView : AppCompatEditText {
     } else {
       Typeface.DEFAULT
     }
-    
+
     // Apply font weight - use API 28+ method for better weight support
     val typeface = if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.P) {
       Typeface.create(baseTypeface, weight, false)
@@ -353,16 +312,18 @@ class HighlightTextView : AppCompatEditText {
       val style = if (weight >= 600) Typeface.BOLD else Typeface.NORMAL
       Typeface.create(baseTypeface, style)
     }
-    
+
     this.typeface = typeface
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
   }
-  
+
   fun setVerticalAlign(align: String?) {
     currentVerticalAlign = align
     updateVerticalAlignment()
+    invalidate()
   }
-  
+
   private fun updateVerticalAlignment() {
     // Preserve horizontal alignment when updating vertical
     val horizontalGravity = gravity and Gravity.HORIZONTAL_GRAVITY_MASK
@@ -371,50 +332,63 @@ class HighlightTextView : AppCompatEditText {
       "bottom" -> Gravity.BOTTOM
       else -> Gravity.CENTER_VERTICAL
     }
-    
+
     gravity = horizontalGravity or verticalGravity
   }
-  
+
   fun setBackgroundInsetTop(inset: Float) {
     backgroundInsetTop = inset
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   fun setBackgroundInsetBottom(inset: Float) {
     backgroundInsetBottom = inset
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   fun setBackgroundInsetLeft(inset: Float) {
     backgroundInsetLeft = inset
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   fun setBackgroundInsetRight(inset: Float) {
     backgroundInsetRight = inset
-    applyCharacterBackgrounds()
+    invalidate()
   }
-  
+
   fun setCustomLineHeight(lineHeight: Float) {
     customLineHeight = lineHeight
-    applyCharacterBackgrounds()
+    applyLineHeightAndSpacing()
+    invalidate()
+  }
+
+  fun setLetterSpacingProp(points: Float) {
+    letterSpacingPoints = points
+    applyLetterSpacing()
+    invalidate()
   }
 
-  fun setTextProp(text: String) {
-    if (this.text?.toString() != text) {
+  override fun setTextSize(unit: Int, size: Float) {
+    super.setTextSize(unit, size)
+    applyLineHeightAndSpacing()
+    applyLetterSpacing()
+  }
+
+  fun setTextProp(newText: String) {
+    if (this.text?.toString() != newText) {
       isUpdatingText = true
-      setText(text)
-      applyCharacterBackgrounds()
+      setText(newText)
       // Move cursor to end of text after setting
       post {
         if (hasFocus()) {
-          text.length.let { setSelection(it) }
+          text?.length?.let { setSelection(it) }
         }
       }
       isUpdatingText = false
+      invalidate()
     }
   }
-  
+
   fun setAutoFocus(autoFocus: Boolean) {
     if (autoFocus && isFocusable && isFocusableInTouchMode) {
       postDelayed({
@@ -426,319 +400,36 @@ class HighlightTextView : AppCompatEditText {
       }, 100)
     }
   }
-  
-  /**
-   * iOS-style incremental update: Only update spans for changed region.
-   * This is called during typing and only touches the modified characters.
-   */
-  private fun applyCharacterBackgroundsIncremental(editable: Editable?, start: Int, end: Int) {
-    if (editable == null) return
-    val textStr = editable.toString()
-    if (textStr.isEmpty()) return
-    
-    isUpdatingText = true
-    
-    // Check if a newline was inserted - if so, expand region to include char before it
-    val hasNewline = textStr.substring(start, minOf(end, textStr.length)).contains('\n')
-    
-    // Expand the region to include entire lines that were affected
-    val layout = layout
-    val expandedStart: Int
-    val expandedEnd: Int
-    
-    if (layout != null && textStr.isNotEmpty()) {
-      val startLine = layout.getLineForOffset(minOf(start, textStr.length - 1))
-      val endLine = layout.getLineForOffset(minOf(end, textStr.length - 1))
-      expandedStart = layout.getLineStart(startLine)
-      expandedEnd = layout.getLineEnd(endLine)
-    } else {
-      // If newline inserted, include character before it
-      expandedStart = if (hasNewline) maxOf(0, start - 2) else maxOf(0, start - 1)
-      expandedEnd = minOf(textStr.length, end + 1)
-    }
-    
-    // Remove existing spans in the affected lines
-    val existingSpans = editable.getSpans(expandedStart, expandedEnd, RoundedBackgroundSpan::class.java)
-    for (span in existingSpans) {
-      editable.removeSpan(span)
-    }
-    
-    // Apply spans with correct line boundary flags immediately
-    val radius = if (highlightBorderRadius > 0) highlightBorderRadius else cornerRadius
-    
-    for (i in expandedStart until expandedEnd) {
-      if (i >= textStr.length) break
-      
-      val char = textStr[i]
-      val shouldHighlight = when {
-        char == '\n' || char == '\t' -> false
-        char == ' ' -> {
-          val hasSpaceBefore = i > 0 && textStr[i - 1] == ' '
-          val hasSpaceAfter = i < textStr.length - 1 && textStr[i + 1] == ' '
-          !hasSpaceBefore && !hasSpaceAfter
-        }
-        else -> true
-      }
-      
-      if (shouldHighlight) {
-        // ALWAYS check newlines first (for manual line breaks)
-        val hasNewlineBefore = i > 0 && textStr[i - 1] == '\n'
-        val hasNewlineAfter = i + 1 < textStr.length && textStr[i + 1] == '\n'
-        
-        var isAtLineStart = i == 0 || hasNewlineBefore
-        var isAtLineEnd = i == textStr.length - 1 || hasNewlineAfter
-        
-        // Determine if this is the first or last line
-        var isOnFirstLine = i == 0 || hasNewlineBefore
-        var isOnLastLine = i == textStr.length - 1 || hasNewlineAfter
-        
-        // Only use layout for auto-wrapped lines (not manual newlines)
-        if (!hasNewlineBefore && !hasNewlineAfter && layout != null && i < textStr.length) {
-          try {
-            val line = layout.getLineForOffset(i)
-            val lineStart = layout.getLineStart(line)
-            val lineEnd = layout.getLineEnd(line)
-            // Check if this is the first or last line
-            isOnFirstLine = line == 0
-            isOnLastLine = line == layout.lineCount - 1
-            // Only override if this is an auto-wrapped boundary
-            if (i == lineStart && textStr.getOrNull(i - 1) != '\n') {
-              isAtLineStart = true
-            }
-            if ((i + 1) == lineEnd && textStr.getOrNull(i + 1) != '\n') {
-              isAtLineEnd = true
-            }
-          } catch (e: Exception) {
-            // Layout might not be ready, keep newline-based detection
-          }
-        }
-        
-        val span = RoundedBackgroundSpan(
-          characterBackgroundColor,
-          textColorValue,
-          charPaddingLeft,
-          charPaddingRight,
-          charPaddingTop,
-          charPaddingBottom,
-          backgroundInsetTop,
-          backgroundInsetBottom,
-          backgroundInsetLeft,
-          backgroundInsetRight,
-          radius,
-          isAtLineStart,
-          isAtLineEnd,
-          isOnFirstLine,
-          isOnLastLine
-        )
-        editable.setSpan(span, i, i + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+
+  // --- Layout helpers ----------------------------------------------------------
+
+  private fun applyLineHeightAndSpacing() {
+    if (customLineHeight > 0f) {
+      // customLineHeight comes from JS as "points"; convert to px using scaledDensity
+      val metrics = resources.displayMetrics
+      val desiredLineHeightPx = customLineHeight * metrics.scaledDensity
+      val textHeightPx = textSize
+      if (textHeightPx > 0f) {
+        val multiplier = desiredLineHeightPx / textHeightPx
+        setLineSpacing(0f, multiplier)
       }
-    }
-    
-    isUpdatingText = false
-    
-    // JERK FIX: Skip the post-update during fast typing to prevent layout thrashing
-    // Only update boundaries when user stops typing (reduces update frequency)
-    removeCallbacks(boundaryUpdateCheck)
-    postDelayed(boundaryUpdateCheck, 200)
-  }
-  
-  // Runnable for delayed boundary check
-  private val boundaryUpdateCheck = Runnable {
-    if (!isUpdatingText) {
-      updateAutoWrappedLineBoundaries()
-    }
-  }
-  
-  /**
-   * Full re-application of spans (used when props change, not during typing).
-   * iOS-style: Work directly with editable, no setText() call.
-   */
-  private fun applyCharacterBackgrounds() {
-    val editable = editableText ?: return
-    val textStr = editable.toString()
-    if (textStr.isEmpty()) return
-    
-    // Apply line height if specified, or add spacing for padding
-    if (customLineHeight > 0) {
-      val lineSpacingMultiplier = customLineHeight / textSize
-      setLineSpacing(0f, lineSpacingMultiplier)
     } else {
-      // Add line spacing to accommodate vertical padding and prevent overlap
+      // Default: add extra spacing equal to vertical padding so backgrounds don't collide
       val extraSpacing = charPaddingTop + charPaddingBottom
       setLineSpacing(extraSpacing, 1.0f)
     }
-    
-    isUpdatingText = true
-    
-    // Remove all existing spans
-    val existingSpans = editable.getSpans(0, editable.length, RoundedBackgroundSpan::class.java)
-    for (span in existingSpans) {
-      editable.removeSpan(span)
-    }
-    
-    // Apply spans to all characters with correct line boundary flags
-    val radius = if (highlightBorderRadius > 0) highlightBorderRadius else cornerRadius
-    val layoutObj = layout
-    
-    for (i in textStr.indices) {
-      val char = textStr[i]
-      
-      val shouldHighlight = when {
-        char == '\n' || char == '\t' -> false
-        char == ' ' -> {
-          val hasSpaceBefore = i > 0 && textStr[i - 1] == ' '
-          val hasSpaceAfter = i < textStr.length - 1 && textStr[i + 1] == ' '
-          !hasSpaceBefore && !hasSpaceAfter
-        }
-        else -> true
-      }
-      
-      if (shouldHighlight) {
-        // ALWAYS check newlines first (for manual line breaks)
-        val hasNewlineBefore = i > 0 && textStr[i - 1] == '\n'
-        val hasNewlineAfter = i + 1 < textStr.length && textStr[i + 1] == '\n'
-        
-        var isAtLineStart = i == 0 || hasNewlineBefore
-        var isAtLineEnd = i == textStr.length - 1 || hasNewlineAfter
-        
-        // Determine if this is the first or last line
-        var isOnFirstLine = i == 0 || hasNewlineBefore
-        var isOnLastLine = i == textStr.length - 1 || hasNewlineAfter
-        
-        // Only use layout for auto-wrapped lines (not manual newlines)
-        if (!hasNewlineBefore && !hasNewlineAfter && layoutObj != null && i < textStr.length) {
-          try {
-            val line = layoutObj.getLineForOffset(i)
-            val lineStart = layoutObj.getLineStart(line)
-            val lineEnd = layoutObj.getLineEnd(line)
-            // Check if this is the first or last line
-            isOnFirstLine = line == 0
-            isOnLastLine = line == layoutObj.lineCount - 1
-            // Only override if this is an auto-wrapped boundary
-            if (i == lineStart && textStr.getOrNull(i - 1) != '\n') {
-              isAtLineStart = true
-            }
-            if ((i + 1) == lineEnd && textStr.getOrNull(i + 1) != '\n') {
-              isAtLineEnd = true
-            }
-          } catch (e: Exception) {
-            // Layout might not be ready, keep newline-based detection
-          }
-        }
-        
-        val span = RoundedBackgroundSpan(
-          characterBackgroundColor,
-          textColorValue,
-          charPaddingLeft,
-          charPaddingRight,
-          charPaddingTop,
-          charPaddingBottom,
-          backgroundInsetTop,
-          backgroundInsetBottom,
-          backgroundInsetLeft,
-          backgroundInsetRight,
-          radius,
-          isAtLineStart,
-          isAtLineEnd,
-          isOnFirstLine,
-          isOnLastLine
-        )
-        editable.setSpan(span, i, i + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
-      }
-    }
-    
-    isUpdatingText = false
-    
-    // Schedule a post-layout update to ensure corner rounding is correct
-    // This is needed because layout might not be ready when this method is called
-    post {
-      if (!isUpdatingText) {
-        updateAutoWrappedLineBoundaries()
-      }
-    }
   }
-  
-  /**
-   * Update line boundary flags only for auto-wrapped lines.
-   * This is called after layout completes to handle text wrapping.
-   * Only updates spans that are at auto-wrapped line boundaries.
-   * Optimized to skip updates when layout hasn't changed.
-   */
-  private fun updateAutoWrappedLineBoundaries() {
-    if (isUpdatingText) return
-    
-    val layout = layout ?: return
-    val editable = editableText ?: return
-    val textStr = editable.toString()
-    if (textStr.isEmpty()) return
-    
-    // Validate that layout is ready and has valid dimensions
-    if (width <= 0 || layout.lineCount == 0) return
-    
-    val spans = editable.getSpans(0, editable.length, RoundedBackgroundSpan::class.java)
-    if (spans.isEmpty()) return
-    
-    isUpdatingText = true
-    var hasChanges = false
-    
-    for (span in spans) {
-      val spanStart = editable.getSpanStart(span)
-      val spanEnd = editable.getSpanEnd(span)
-      
-      if (spanStart < 0 || spanStart >= textStr.length) continue
-      
-      try {
-        val line = layout.getLineForOffset(spanStart)
-        val lineStart = layout.getLineStart(line)
-        val lineEnd = layout.getLineEnd(line)
-        
-        // Determine actual line boundaries (includes auto-wrap)
-        val isAtLineStart = spanStart == lineStart
-        val isAtLineEnd = spanEnd == lineEnd
-        
-        // Check if this is the first or last line
-        val isOnFirstLine = line == 0
-        val isOnLastLine = line == layout.lineCount - 1
-        
-        // Only update if this is an auto-wrapped line boundary (not a newline boundary)
-        val isNewlineBoundary = (spanStart > 0 && textStr[spanStart - 1] == '\n') || 
-                                (spanEnd < textStr.length && textStr[spanEnd] == '\n')
-        
-        // Only recreate span if it's at an auto-wrapped boundary and flags are wrong
-        if (!isNewlineBoundary && (isAtLineStart != span.isLineStart || isAtLineEnd != span.isLineEnd || 
-            isOnFirstLine != span.isFirstLine || isOnLastLine != span.isLastLine)) {
-          val newSpan = RoundedBackgroundSpan(
-            span.backgroundColor,
-            span.textColor,
-            span.paddingLeft,
-            span.paddingRight,
-            span.paddingTop,
-            span.paddingBottom,
-            span.backgroundInsetTop,
-            span.backgroundInsetBottom,
-            span.backgroundInsetLeft,
-            span.backgroundInsetRight,
-            span.cornerRadius,
-            isAtLineStart,
-            isAtLineEnd,
-            isOnFirstLine,
-            isOnLastLine
-          )
-          editable.removeSpan(span)
-          editable.setSpan(newSpan, spanStart, spanEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
-          hasChanges = true
-        }
-      } catch (e: Exception) {
-        // Layout state is invalid, skip this update
-        continue
-      }
-    }
-    
-    isUpdatingText = false
-    
-    // Only invalidate if we actually made changes
-    if (hasChanges) {
-      invalidate()
+
+  private fun applyLetterSpacing() {
+    // React Native's letterSpacing is specified in layout points. Convert that to
+    // Android's "em" units: pxSpacing / textSizePx.
+    val metrics = resources.displayMetrics
+    val pxSpacing = letterSpacingPoints * metrics.scaledDensity
+    val textPx = textSize
+    if (textPx > 0f) {
+      super.setLetterSpacing(pxSpacing / textPx)
+    } else {
+      super.setLetterSpacing(0f)
     }
   }
 }

package/android/src/main/java/com/highlighttext/HighlightTextViewManager.kt

@@ -134,6 +134,13 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
     }
   }
 
+  @ReactProp(name = "letterSpacing")
+  override fun setLetterSpacing(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { spacing ->
+      view?.setLetterSpacingProp(spacing)
+    }
+  }
+
   @ReactProp(name = "padding")
   override fun setPadding(view: HighlightTextView?, value: String?) {
     value?.toFloatOrNull()?.let { padding ->

package/ios/HighlightTextView.mm

@@ -90,6 +90,7 @@ using namespace facebook::react;
     CGFloat _backgroundInsetRight;
     CGFloat _lineHeight;
     CGFloat _fontSize;
+    CGFloat _letterSpacing; // in layout points, matches React Native's letterSpacing
     NSString * _fontFamily;
     NSString * _fontWeight;
     BOOL _isUpdatingText;
@@ -122,6 +123,7 @@ using namespace facebook::react;
     _backgroundInsetRight = 0.0;
     _lineHeight = 0.0; // 0 means use default line height
     _fontSize = 32.0; // Default font size
+    _letterSpacing = 0.0; // Default: no extra spacing
     _fontFamily = nil;
     _fontWeight = @"normal";
     _currentVerticalAlignment = nil;
@@ -296,6 +298,13 @@ using namespace facebook::react;
         }
     }
     
+    if (oldViewProps.letterSpacing != newViewProps.letterSpacing) {
+        NSString *spacingStr = [[NSString alloc] initWithUTF8String: newViewProps.letterSpacing.c_str()];
+        CGFloat spacing = [spacingStr floatValue];
+        _letterSpacing = spacing;
+        [self applyCharacterBackgrounds]; // Reapply to update glyph layout
+    }
+    
     if (oldViewProps.highlightBorderRadius != newViewProps.highlightBorderRadius) {
         NSString *radiusStr = [[NSString alloc] initWithUTF8String: newViewProps.highlightBorderRadius.c_str()];
         CGFloat radius = [radiusStr floatValue];
@@ -537,6 +546,13 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
                              value:_textView.font 
                              range:NSMakeRange(0, text.length)];
     
+    // Apply letter spacing (kern) if specified
+    if (_letterSpacing != 0) {
+        [attributedString addAttribute:NSKernAttributeName
+                                 value:@(_letterSpacing)
+                                 range:NSMakeRange(0, text.length)];
+    }
+    
     // Apply text color if available
     if (_textView.textColor) {
         [attributedString addAttribute:NSForegroundColorAttributeName 

package/lib/module/HighlightTextViewNativeComponent.ts

@@ -47,6 +47,8 @@ export interface HighlightTextViewProps extends ViewProps {
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: string;
+  /** Additional space between characters, in layout points (matches React Native's letterSpacing). */
+  letterSpacing?: string;
   lineHeight?: string;
   highlightBorderRadius?: string;
   padding?: string;

package/lib/typescript/src/HighlightTextViewNativeComponent.d.ts

@@ -29,6 +29,8 @@ export interface HighlightTextViewProps extends ViewProps {
     fontFamily?: string;
     fontSize?: string;
     fontWeight?: string;
+    /** Additional space between characters, in layout points (matches React Native's letterSpacing). */
+    letterSpacing?: string;
     lineHeight?: string;
     highlightBorderRadius?: string;
     padding?: string;

package/lib/typescript/src/HighlightTextViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/HighlightTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEtF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,GACZ,UAAU,GACV,KAAK,GACL,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CACpD;;AAED,wBAEE"}
+{"version":3,"file":"HighlightTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/HighlightTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEtF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,GACZ,UAAU,GACV,KAAK,GACL,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oGAAoG;IACpG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CACpD;;AAED,wBAEE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-highlight-text-view",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "A native text input for React Native that supports inline text highlighting",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/HighlightTextViewNativeComponent.ts

@@ -47,6 +47,8 @@ export interface HighlightTextViewProps extends ViewProps {
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: string;
+  /** Additional space between characters, in layout points (matches React Native's letterSpacing). */
+  letterSpacing?: string;
   lineHeight?: string;
   highlightBorderRadius?: string;
   padding?: string;