react-native-highlight-text-view 0.1.2 → 0.1.4

package/README.md

@@ -12,14 +12,56 @@ npm install react-native-highlight-text
 
 ## Usage
 
-
 ```js
-import { HighlightTextView } from "react-native-highlight-text";
+import { useState } from 'react';
+import { HighlightTextView } from 'react-native-highlight-text-view';
+
+export default function App() {
+  const [text, setText] = useState('Hello World');
+
+  return (
+    <HighlightTextView
+      color="#00A4A3"
+      textColor="#000000"
+      textAlign="flex-start"
+      fontSize="32"
+      paddingLeft="8"
+      paddingRight="8"
+      paddingTop="4"
+      paddingBottom="4"
+      text={text}
+      isEditable={true}
+      onChange={(e) => {
+        setText(e.nativeEvent.text);
+      }}
+      style={{ width: '100%', height: 200 }}
+    />
+  );
+}
+```
 
-// ...
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `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 |
+| `fontFamily` | `string` | - | Font family name |
+| `fontSize` | `string` | `32` | Font size in points |
+| `padding` | `string` | `4` | Padding around each character highlight |
+| `paddingLeft` | `string` | - | Left padding for character highlight |
+| `paddingRight` | `string` | - | Right padding for character highlight |
+| `paddingTop` | `string` | - | Top padding for character highlight |
+| `paddingBottom` | `string` | - | Bottom padding for character highlight |
+| `text` | `string` | - | Controlled text value |
+| `isEditable` | `boolean` | `true` | Whether the text is editable |
+| `onChange` | `(event: { nativeEvent: { text: string } }) => void` | - | Callback fired when text changes |
+
+
+**Note:** Vertical alignment is currently supported on iOS only. On Android, text will use default vertical positioning.
 
-<HighlightTextView color="tomato" />
-```
 
 
 ## Contributing
@@ -28,10 +70,7 @@ import { HighlightTextView } from "react-native-highlight-text";
 - [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
 - [Code of conduct](CODE_OF_CONDUCT.md)
 
-## License
-
-MIT
 
----
+## License MIT
 
 Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

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

@@ -1,15 +1,299 @@
 package com.highlighttext
 
 import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+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.view.View
+import android.util.TypedValue
+import android.view.Gravity
+import androidx.appcompat.widget.AppCompatEditText
 
-class HighlightTextView : View {
-  constructor(context: Context?) : super(context)
-  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
+class RoundedBackgroundSpan(
+  private val backgroundColor: Int,
+  private val textColor: Int,
+  private val paddingLeft: Float,
+  private val paddingRight: Float,
+  private val paddingTop: Float,
+  private val paddingBottom: Float,
+  private val cornerRadius: Float,
+  private val isFirstInGroup: Boolean = false,
+  private val isLastInGroup: Boolean = false
+) : ReplacementSpan() {
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?
+  ): Int {
+    val width = paint.measureText(text, start, end)
+    // Only add padding for first and last characters in a group
+    val leftPad = if (isFirstInGroup) paddingLeft else 0f
+    val rightPad = if (isLastInGroup) 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
+  ) {
+    // Draw background with padding
+    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 instead of character bounds
+    val fontMetrics = paint.fontMetrics
+    val textHeight = fontMetrics.descent - fontMetrics.ascent
+    val textTop = y + fontMetrics.ascent
+    
+    // Only add padding for first and last characters in a group
+    val leftPad = if (isFirstInGroup) paddingLeft else 0f
+    val rightPad = if (isLastInGroup) paddingRight else 0f
+    
+    // Extend background slightly to overlap and eliminate gaps
+    val overlapExtension = 1f
+    val leftExtension = if (!isFirstInGroup) overlapExtension else 0f
+    val rightExtension = if (!isLastInGroup) overlapExtension else 0f
+    
+    // Calculate proper bounds with padding using consistent font metrics
+    val rect = RectF(
+      x - leftExtension,
+      textTop - paddingTop,
+      x + width + leftPad + rightPad + rightExtension,
+      textTop + textHeight + paddingBottom
+    )
+    
+    // Draw background with selective corner rounding
+    when {
+      isFirstInGroup && isLastInGroup -> {
+        // Single character or isolated group - round all corners
+        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, bgPaint)
+      }
+      isFirstInGroup -> {
+        // First character - round left corners only
+        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)
+      }
+      isLastInGroup -> {
+        // Last character - round right corners only
+        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 character - no rounded corners, just rectangle
+        canvas.drawRect(rect, bgPaint)
+      }
+    }
+    
+    // Draw text with left padding offset only if first in group
+    val textPaint = Paint(paint).apply {
+      color = textColor
+      isAntiAlias = true
+    }
+    canvas.drawText(text!!, start, end, x + leftPad, y.toFloat(), textPaint)
+  }
+}
+
+class HighlightTextView : AppCompatEditText {
+  private var characterBackgroundColor: Int = Color.parseColor("#FFFF00")
+  private var textColorValue: Int = Color.BLACK
+  private var cornerRadius: Float = 4f
+  private var charPaddingLeft: Float = 8f
+  private var charPaddingRight: Float = 8f
+  private var charPaddingTop: Float = 4f
+  private var charPaddingBottom: Float = 4f
+  private var isUpdatingText: Boolean = false
+  
+  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,
+    context!!,
     attrs,
     defStyleAttr
-  )
+  ) {
+    init()
+  }
+
+  private fun init() {
+    setBackgroundColor(Color.TRANSPARENT)
+    setTextSize(TypedValue.COMPLEX_UNIT_SP, 32f)
+    gravity = Gravity.CENTER
+    setPadding(20, 20, 20, 20)
+    textColorValue = currentTextColor
+    
+    // Enable text wrapping
+    maxLines = Int.MAX_VALUE
+    isSingleLine = false
+    setHorizontallyScrolling(false)
+    
+    addTextChangedListener(object : TextWatcher {
+      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() ?: "")
+          applyCharacterBackgrounds()
+        }
+      }
+    })
+  }
+
+  fun setCharacterBackgroundColor(color: Int) {
+    characterBackgroundColor = color
+    applyCharacterBackgrounds()
+  }
+  
+  override fun setTextColor(color: Int) {
+    super.setTextColor(color)
+    textColorValue = color
+    applyCharacterBackgrounds()
+  }
+
+  fun setCharPadding(left: Float, top: Float, right: Float, bottom: Float) {
+    charPaddingLeft = left
+    charPaddingTop = top
+    charPaddingRight = right
+    charPaddingBottom = bottom
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingLeft(padding: Float) {
+    charPaddingLeft = padding
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingRight(padding: Float) {
+    charPaddingRight = padding
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingTop(padding: Float) {
+    charPaddingTop = padding
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingBottom(padding: Float) {
+    charPaddingBottom = padding
+    applyCharacterBackgrounds()
+  }
+
+  fun setTextProp(text: String) {
+    if (this.text?.toString() != text) {
+      isUpdatingText = true
+      setText(text)
+      applyCharacterBackgrounds()
+      isUpdatingText = false
+    }
+  }
+  
+  private fun applyCharacterBackgrounds() {
+    val text = text?.toString() ?: return
+    if (text.isEmpty()) return
+    
+    val spannable = SpannableString(text)
+    
+    // Apply character-by-character for proper line wrapping
+    for (i in text.indices) {
+      val char = text[i]
+      
+      // Check if this is a space that should be highlighted
+      val shouldHighlight = when {
+        char == '\n' || char == '\t' -> false // Never highlight newlines or tabs
+        char == ' ' -> {
+          // Highlight space only if it's a single space (not multiple consecutive)
+          val hasSpaceBefore = i > 0 && text[i - 1] == ' '
+          val hasSpaceAfter = i < text.length - 1 && text[i + 1] == ' '
+          !hasSpaceBefore && !hasSpaceAfter
+        }
+        else -> true // Highlight all other characters
+      }
+      
+      if (shouldHighlight) {
+        // Determine if this is the first or last character in a word group
+        val isFirst = i == 0 || !shouldHighlightChar(text, i - 1)
+        val isLast = i == text.length - 1 || !shouldHighlightChar(text, i + 1)
+        
+        val span = RoundedBackgroundSpan(
+          characterBackgroundColor,
+          textColorValue,
+          charPaddingLeft,
+          charPaddingRight,
+          charPaddingTop,
+          charPaddingBottom,
+          cornerRadius,
+          isFirst,
+          isLast
+        )
+        spannable.setSpan(span, i, i + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+      }
+    }
+    
+    isUpdatingText = true
+    setText(spannable)
+    setSelection(text.length) // Keep cursor at end
+    isUpdatingText = false
+  }
+  
+  private fun shouldHighlightChar(text: String, index: Int): Boolean {
+    if (index < 0 || index >= text.length) return false
+    val char = text[index]
+    
+    return when {
+      char == '\n' || char == '\t' -> false
+      char == ' ' -> {
+        val hasSpaceBefore = index > 0 && text[index - 1] == ' '
+        val hasSpaceAfter = index < text.length - 1 && text[index + 1] == ' '
+        !hasSpaceBefore && !hasSpaceAfter
+      }
+      else -> true
+    }
+  }
 }

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

@@ -1,11 +1,17 @@
 package com.highlighttext
 
 import android.graphics.Color
+import android.text.InputType
+import android.view.Gravity
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.viewmanagers.HighlightTextViewManagerInterface
 import com.facebook.react.viewmanagers.HighlightTextViewManagerDelegate
 
@@ -27,12 +33,135 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
   }
 
   public override fun createViewInstance(context: ThemedReactContext): HighlightTextView {
-    return HighlightTextView(context)
+    val view = HighlightTextView(context)
+    view.onTextChangeListener = { text ->
+      val event: WritableMap = Arguments.createMap()
+      event.putString("text", text)
+      
+      val reactContext = context as ReactContext
+      reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(view.id, "onChange", event)
+    }
+    return view
   }
 
   @ReactProp(name = "color")
   override fun setColor(view: HighlightTextView?, color: String?) {
-    view?.setBackgroundColor(Color.parseColor(color))
+    color?.let {
+      try {
+        view?.setCharacterBackgroundColor(Color.parseColor(it))
+      } catch (e: IllegalArgumentException) {
+        // Invalid color format, use default
+        view?.setCharacterBackgroundColor(Color.parseColor("#FFFF00"))
+      }
+    }
+  }
+
+  @ReactProp(name = "textColor")
+  override fun setTextColor(view: HighlightTextView?, value: String?) {
+    value?.let {
+      try {
+        view?.setTextColor(Color.parseColor(it))
+      } catch (e: IllegalArgumentException) {
+        // Invalid color format, use default
+        view?.setTextColor(Color.BLACK)
+      }
+    }
+  }
+
+  @ReactProp(name = "textAlign")
+  override fun setTextAlign(view: HighlightTextView?, value: String?) {
+    // Parse combined alignment (e.g., "top-left", "bottom-center")
+    val parts = value?.split("-") ?: emptyList()
+    var horizontalAlign = value
+    
+    if (parts.size == 2) {
+      // Combined format: use the second part for horizontal alignment
+      horizontalAlign = parts[1]
+    }
+    
+    // Apply horizontal alignment
+    view?.gravity = when (horizontalAlign) {
+      "left", "flex-start" -> Gravity.START or Gravity.CENTER_VERTICAL
+      "right", "flex-end" -> Gravity.END or Gravity.CENTER_VERTICAL
+      "center" -> Gravity.CENTER
+      "justify" -> Gravity.START or Gravity.CENTER_VERTICAL // Android doesn't support justify natively
+      else -> Gravity.CENTER
+    }
+  }
+
+  @ReactProp(name = "verticalAlign")
+  override fun setVerticalAlign(view: HighlightTextView?, value: String?) {
+    // Android EditText doesn't support vertical alignment as easily as iOS
+    // This would require custom implementation with layout adjustments
+    // For now, we'll keep the default behavior
+  }
+
+  @ReactProp(name = "fontFamily")
+  override fun setFontFamily(view: HighlightTextView?, value: String?) {
+    // Font family handling can be added if needed
+  }
+
+  @ReactProp(name = "fontSize")
+  override fun setFontSize(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { size ->
+      view?.textSize = size
+    }
+  }
+
+  @ReactProp(name = "padding")
+  override fun setPadding(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPadding(padding, padding, padding, padding)
+    }
+  }
+
+  @ReactProp(name = "paddingLeft")
+  override fun setPaddingLeft(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingLeft(padding)
+    }
+  }
+
+  @ReactProp(name = "paddingRight")
+  override fun setPaddingRight(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingRight(padding)
+    }
+  }
+
+  @ReactProp(name = "paddingTop")
+  override fun setPaddingTop(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingTop(padding)
+    }
+  }
+
+  @ReactProp(name = "paddingBottom")
+  override fun setPaddingBottom(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingBottom(padding)
+    }
+  }
+
+  @ReactProp(name = "text")
+  override fun setText(view: HighlightTextView?, value: String?) {
+    view?.setTextProp(value ?: "")
+  }
+
+  @ReactProp(name = "isEditable")
+  override fun setIsEditable(view: HighlightTextView?, value: Boolean) {
+    view?.apply {
+      isFocusable = value
+      isFocusableInTouchMode = value
+      isEnabled = value
+      inputType = if (value) {
+        InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE
+      } else {
+        InputType.TYPE_NULL
+      }
+    }
   }
 
   companion object {

package/ios/HighlightTextView.mm

@@ -147,13 +147,54 @@ using namespace facebook::react;
     
     if (oldViewProps.textAlign != newViewProps.textAlign) {
         NSString *alignment = [[NSString alloc] initWithUTF8String: newViewProps.textAlign.c_str()];
-        if ([alignment isEqualToString:@"center"]) {
-            _textView.textAlignment = NSTextAlignmentCenter;
-        } else if ([alignment isEqualToString:@"right"]) {
-            _textView.textAlignment = NSTextAlignmentRight;
+        
+        // Parse combined alignment (e.g., "top-left", "bottom-center")
+        NSArray *parts = [alignment componentsSeparatedByString:@"-"];
+        NSString *verticalPart = nil;
+        NSString *horizontalPart = nil;
+        
+        if (parts.count == 2) {
+            // Combined format: "top-left", "bottom-center", etc.
+            verticalPart = parts[0];
+            horizontalPart = parts[1];
         } else {
-            _textView.textAlignment = NSTextAlignmentLeft;
+            // Single value - determine if it's horizontal or vertical
+            if ([alignment isEqualToString:@"top"] || [alignment isEqualToString:@"bottom"]) {
+                verticalPart = alignment;
+            } else {
+                horizontalPart = alignment;
+            }
+        }
+        
+        // Apply horizontal alignment
+        if (horizontalPart) {
+            if ([horizontalPart isEqualToString:@"center"]) {
+                _textView.textAlignment = NSTextAlignmentCenter;
+            } else if ([horizontalPart isEqualToString:@"right"] || [horizontalPart isEqualToString:@"flex-end"]) {
+                _textView.textAlignment = NSTextAlignmentRight;
+            } else if ([horizontalPart isEqualToString:@"left"] || [horizontalPart isEqualToString:@"flex-start"]) {
+                _textView.textAlignment = NSTextAlignmentLeft;
+            } else if ([horizontalPart isEqualToString:@"justify"]) {
+                _textView.textAlignment = NSTextAlignmentJustified;
+            } else {
+                _textView.textAlignment = NSTextAlignmentLeft;
+            }
+        }
+        
+        // Apply vertical alignment via textContainerInset
+        if ([verticalPart isEqualToString:@"top"]) {
+            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 0, 10);
+        } else if ([verticalPart isEqualToString:@"bottom"]) {
+            // Calculate bottom alignment by adjusting top inset
+            CGFloat contentHeight = [_textView.layoutManager usedRectForTextContainer:_textView.textContainer].size.height;
+            CGFloat viewHeight = _textView.bounds.size.height;
+            CGFloat topInset = MAX(10, viewHeight - contentHeight - 10);
+            _textView.textContainerInset = UIEdgeInsetsMake(topInset, 10, 10, 10);
+        } else if (!verticalPart) {
+            // Default vertical centering for horizontal-only alignments
+            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
         }
+        
         [self applyCharacterBackgrounds]; // Reapply to update alignment
     }
     
@@ -235,6 +276,23 @@ using namespace facebook::react;
     if (oldViewProps.isEditable != newViewProps.isEditable) {
         _textView.editable = newViewProps.isEditable;
     }
+    
+    if (oldViewProps.verticalAlign != newViewProps.verticalAlign) {
+        NSString *verticalAlign = [[NSString alloc] initWithUTF8String: newViewProps.verticalAlign.c_str()];
+        
+        if ([verticalAlign isEqualToString:@"top"]) {
+            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 0, 10);
+        } else if ([verticalAlign isEqualToString:@"bottom"]) {
+            CGFloat contentHeight = [_textView.layoutManager usedRectForTextContainer:_textView.textContainer].size.height;
+            CGFloat viewHeight = _textView.bounds.size.height;
+            CGFloat topInset = MAX(10, viewHeight - contentHeight - 10);
+            _textView.textContainerInset = UIEdgeInsetsMake(topInset, 10, 10, 10);
+        } else if ([verticalAlign isEqualToString:@"center"] || [verticalAlign isEqualToString:@"middle"]) {
+            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
+        }
+        
+        [self applyCharacterBackgrounds];
+    }
 
     [super updateProps:props oldProps:oldProps];
 }

package/lib/module/HighlightTextViewNativeComponent.ts

@@ -6,10 +6,44 @@ export interface OnChangeEventData {
   readonly text: string;
 }
 
+/**
+ * Text alignment options
+ *
+ * Horizontal alignment:
+ * - 'left' or 'flex-start': Align text to the left
+ * - 'center': Center align text
+ * - 'right' or 'flex-end': Align text to the right
+ * - 'justify': Justify text (distribute evenly)
+ *
+ * Vertical alignment (iOS only):
+ * - 'top': Align to top
+ * - 'bottom': Align to bottom
+ *
+ * Combined alignment (iOS only):
+ * - 'top-left', 'top-center', 'top-right'
+ * - 'bottom-left', 'bottom-center', 'bottom-right'
+ */
+export type TextAlignment =
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'justify'
+  | 'flex-start'
+  | 'flex-end'
+  | 'top'
+  | 'bottom'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
 export interface HighlightTextViewProps extends ViewProps {
   color?: string;
   textColor?: string;
   textAlign?: string;
+  verticalAlign?: string;
   fontFamily?: string;
   fontSize?: string;
   padding?: string;

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

@@ -3,10 +3,29 @@ import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenT
 export interface OnChangeEventData {
     readonly text: string;
 }
+/**
+ * Text alignment options
+ *
+ * Horizontal alignment:
+ * - 'left' or 'flex-start': Align text to the left
+ * - 'center': Center align text
+ * - 'right' or 'flex-end': Align text to the right
+ * - 'justify': Justify text (distribute evenly)
+ *
+ * Vertical alignment (iOS only):
+ * - 'top': Align to top
+ * - 'bottom': Align to bottom
+ *
+ * Combined alignment (iOS only):
+ * - 'top-left', 'top-center', 'top-right'
+ * - 'bottom-left', 'bottom-center', 'bottom-right'
+ */
+export type TextAlignment = 'left' | 'center' | 'right' | 'justify' | 'flex-start' | 'flex-end' | 'top' | 'bottom' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface HighlightTextViewProps extends ViewProps {
     color?: string;
     textColor?: string;
     textAlign?: string;
+    verticalAlign?: string;
     fontFamily?: string;
     fontSize?: 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,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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.2",
+  "version": "0.1.4",
   "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

@@ -6,10 +6,44 @@ export interface OnChangeEventData {
   readonly text: string;
 }
 
+/**
+ * Text alignment options
+ *
+ * Horizontal alignment:
+ * - 'left' or 'flex-start': Align text to the left
+ * - 'center': Center align text
+ * - 'right' or 'flex-end': Align text to the right
+ * - 'justify': Justify text (distribute evenly)
+ *
+ * Vertical alignment (iOS only):
+ * - 'top': Align to top
+ * - 'bottom': Align to bottom
+ *
+ * Combined alignment (iOS only):
+ * - 'top-left', 'top-center', 'top-right'
+ * - 'bottom-left', 'bottom-center', 'bottom-right'
+ */
+export type TextAlignment =
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'justify'
+  | 'flex-start'
+  | 'flex-end'
+  | 'top'
+  | 'bottom'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
 export interface HighlightTextViewProps extends ViewProps {
   color?: string;
   textColor?: string;
   textAlign?: string;
+  verticalAlign?: string;
   fontFamily?: string;
   fontSize?: string;
   padding?: string;