react-native-highlight-text-view 0.1.7 → 0.1.9

package/README.md

@@ -47,11 +47,11 @@ export default function App() {
 | `color` | `string` | `#FFFF00` | Background highlight color (hex format) |
 | `textColor` | `string` | - | Text color (hex format) |
 | `textAlign` | `string` | `left` | Text alignment. Supports: `'left'`, `'center'`, `'right'`, `'justify'`, `'flex-start'`, `'flex-end'`, `'top'`, `'bottom'`, `'top-left'`, `'top-center'`, `'top-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'` |
-| `verticalAlign` | `'top' \| 'center' \| 'middle' \| 'bottom'` | - | Vertical alignment (iOS only). Alternative to using combined `textAlign` values |
+| `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 |
-| `lineHeight` | `string` | - | Line height override |
-| `highlightBorderRadius` | `string` | `4` | Border radius for the highlight background |
+| `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) |
 | `paddingLeft` | `string` | - | Left padding for character highlight |
 | `paddingRight` | `string` | - | Right padding for character highlight |
@@ -87,6 +87,25 @@ export default function App() {
 />
 ```
 
+**Example with touching backgrounds (tight line spacing):**
+To make backgrounds touch vertically across multiple lines, combine `lineHeight` with `backgroundInset`:
+```jsx
+<HighlightTextView
+  fontSize="32"
+  lineHeight="36"              // Slightly larger than fontSize for tight spacing
+  paddingLeft="8"
+  paddingRight="8"
+  paddingTop="4"
+  paddingBottom="4"
+  backgroundInsetTop="14"      // Large inset reduces background height
+  backgroundInsetBottom="14"   // Creates room for lines to touch
+  highlightBorderRadius="4"
+  text="Multiple lines with touching backgrounds create smooth vertical flow"
+/>
+```
+
+**Tip:** Set `lineHeight` to approximately `fontSize + 4` to `fontSize + 8`, then adjust `backgroundInsetTop` and `backgroundInsetBottom` until backgrounds touch smoothly.
+
 **Note:** Vertical alignment is currently supported on iOS only. On Android, text will use default vertical positioning.
 
 

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

@@ -154,6 +154,7 @@ class HighlightTextView : AppCompatEditText {
   private var backgroundInsetBottom: Float = 0f
   private var backgroundInsetLeft: Float = 0f
   private var backgroundInsetRight: Float = 0f
+  private var customLineHeight: Float = 0f
   private var isUpdatingText: Boolean = false
   
   var onTextChangeListener: ((String) -> Unit)? = null
@@ -261,6 +262,11 @@ class HighlightTextView : AppCompatEditText {
     backgroundInsetRight = inset
     applyCharacterBackgrounds()
   }
+  
+  fun setCustomLineHeight(lineHeight: Float) {
+    customLineHeight = lineHeight
+    applyCharacterBackgrounds()
+  }
 
   fun setTextProp(text: String) {
     if (this.text?.toString() != text) {
@@ -277,6 +283,12 @@ class HighlightTextView : AppCompatEditText {
     
     val spannable = SpannableString(text)
     
+    // Apply line height if specified
+    if (customLineHeight > 0) {
+      val lineSpacingMultiplier = customLineHeight / textSize
+      setLineSpacing(0f, lineSpacingMultiplier)
+    }
+    
     // Apply character-by-character for proper line wrapping
     for (i in text.indices) {
       val char = text[i]

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

@@ -147,8 +147,9 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
 
   @ReactProp(name = "lineHeight")
   override fun setLineHeight(view: HighlightTextView?, value: String?) {
-    // Line height is handled differently on Android - this is a placeholder
-    // Android EditText doesn't directly support line height like iOS
+    value?.toFloatOrNull()?.let { lineHeight ->
+      view?.setCustomLineHeight(lineHeight)
+    }
   }
 
   @ReactProp(name = "highlightBorderRadius")

package/ios/HighlightTextView.mm

@@ -476,20 +476,17 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
     paragraphStyle.alignment = _textView.textAlignment;
     
-    // Apply line height if specified
+    // Apply line height if specified (allows tight line spacing for touching backgrounds)
     if (_lineHeight > 0) {
-        CGFloat fontSize = _textView.font.pointSize;
+        // Always use absolute line height for precise control
+        paragraphStyle.minimumLineHeight = _lineHeight;
+        paragraphStyle.maximumLineHeight = _lineHeight;
+        paragraphStyle.lineHeightMultiple = 0;
         
-        // If lineHeight is smaller than fontSize, use lineHeightMultiple for better centering
-        if (_lineHeight < fontSize) {
-            paragraphStyle.lineHeightMultiple = _lineHeight / fontSize;
-            paragraphStyle.minimumLineHeight = 0;
-            paragraphStyle.maximumLineHeight = 0;
-        } else {
-            // For larger line heights, use absolute values
-            paragraphStyle.minimumLineHeight = _lineHeight;
-            paragraphStyle.maximumLineHeight = _lineHeight;
-            paragraphStyle.lineHeightMultiple = 0;
+        // For tight line spacing, reduce line spacing to bring lines closer
+        if (_lineHeight <= _textView.font.pointSize * 1.2) {
+            // Negative line spacing brings lines closer together
+            paragraphStyle.lineSpacing = -(_textView.font.pointSize * 0.1);
         }
     }
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-highlight-text-view",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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",