react-native-advanced-text 0.1.33 → 0.1.40

package/README.md

@@ -14,12 +14,11 @@ npm install react-native-advanced-text
 
 
 ```js
-import { AdvancedTextView } from "react-native-advanced-text";
+import { AdvancedText } from "react-native-advanced-text";
 
 <AdvancedText
   text={'This is an example of AdvancedText component. Tap on any word to see the event in action.'}
   style={[styles.AdvancedText, { minHeight }]}
-  indicatorWordIndex={2}
   onWordPress={(event) => {
     console.log({event})
   }}
@@ -28,9 +27,15 @@ import { AdvancedTextView } from "react-native-advanced-text";
     console.log({event})
   }}
   highlightedWords={[
+    {
+      index: 2,
+      highlightColor: '#FFD60A',
+      borderRadius: 10,
+    },
     {
       index: 4,
       highlightColor: '#6baeffb5',
+      borderRadius: 6,
     },
   ]}
   fontSize={24}

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

@@ -1,16 +1,16 @@
 package com.advancedtext
 
 import android.content.Context
+import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Point
+import android.graphics.RectF
 import android.text.SpannableString
 import android.text.Spannable
 import android.text.Spanned
 import android.text.TextPaint
 import android.text.method.ArrowKeyMovementMethod
 import android.text.style.ClickableSpan
-import android.text.style.BackgroundColorSpan
-import android.text.style.ForegroundColorSpan
 import android.util.AttributeSet
 import android.util.Log
 import android.view.ActionMode
@@ -32,7 +32,6 @@ class AdvancedTextView : TextView {
 
     private var highlightedWords: List<HighlightedWord> = emptyList()
     private var menuOptions: List<String> = emptyList()
-    private var indicatorWordIndex: Int = -1
     private var lastSelectedText: String = ""
     private var customActionMode: ActionMode? = null
     private var currentText: String = ""
@@ -43,6 +42,9 @@ class AdvancedTextView : TextView {
     private var fontFamily: String = "sans-serif"
     private var lineHeightMultiplier: Float = 1.0f
 
+    private var indicatorWordIndex: Int = -1
+    private var indicatorColor: String = ""
+
     private var wordPositions: List<WordPosition> = emptyList()
 
     constructor(context: Context?) : super(context) { init() }
@@ -157,18 +159,24 @@ class AdvancedTextView : TextView {
         this.menuOptions = menuOptions
     }
 
+    fun setIndicatorWordIndex(index: Int) {
+        if (indicatorWordIndex == index) return
+        indicatorWordIndex = index
+        invalidate()
+    }
+
+    fun setIndicatorColor(color: String) {
+        if (indicatorColor == color) return
+        indicatorColor = color
+        invalidate()
+    }
+
     fun setHighlightedWords(highlightedWords: List<HighlightedWord>) {
         if (this.highlightedWords == highlightedWords) return
         this.highlightedWords = highlightedWords
         updateTextWithHighlights()
     }
 
-    fun setIndicatorWordIndex(index: Int) {
-        if (this.indicatorWordIndex == index) return
-        this.indicatorWordIndex = index
-        updateTextWithHighlights()
-    }
-
     private fun calculateWordPositions(text: String) {
         if (text.isEmpty()) {
             wordPositions = emptyList()
@@ -206,27 +214,12 @@ class AdvancedTextView : TextView {
         val spannableString = SpannableString(currentText)
 
         wordPositions.forEach { wordPos ->
-            highlightedWords.find { it.index == wordPos.index }?.let { highlightedWord ->
-                val color = parseColor(highlightedWord.highlightColor)
-                spannableString.setSpan(
-                    BackgroundColorSpan(color),
-                    wordPos.start,
-                    wordPos.extendedEnd,
-                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-                )
-            }
-
-            if (wordPos.index == indicatorWordIndex) {
-                spannableString.setSpan(
-                    ForegroundColorSpan(Color.parseColor(textColor)),
-                    wordPos.start,
-                    wordPos.end,
-                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-                )
-            }
-
             spannableString.setSpan(
-                WordClickableSpan(wordPos.index, wordPos.word),
+                WordClickableSpan(
+                    wordIndex = wordPos.index,
+                    word = wordPos.word,
+                    wordColor = parseColor(textColor)
+                ),
                 wordPos.start,
                 wordPos.end,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
@@ -258,6 +251,90 @@ class AdvancedTextView : TextView {
         }
     }
 
+    override fun onDraw(canvas: Canvas) {
+        drawHighlightedWordBackgrounds(canvas)
+        super.onDraw(canvas)
+    }
+
+    private fun drawHighlightedWordBackgrounds(canvas: Canvas) {
+        val currentLayout = layout ?: return
+        val density = resources.displayMetrics.density
+        val horizontalPadding = 6f * density
+        val verticalPadding = 2f * density
+        val originalColor = paint.color
+
+        highlightedWords.forEach { highlightedWord ->
+            val wordPos = wordPositions.find { it.index == highlightedWord.index } ?: return@forEach
+            val start = wordPos.start
+            val end = wordPos.extendedEnd.coerceAtMost(currentText.length)
+
+            if (start >= end) return@forEach
+
+            val startLine = currentLayout.getLineForOffset(start)
+            val safeEndOffset = (end - 1).coerceAtLeast(start)
+            val endLine = currentLayout.getLineForOffset(safeEndOffset)
+
+            paint.color = parseColor(highlightedWord.highlightColor)
+
+            for (line in startLine..endLine) {
+                val lineStartOffset = maxOf(start, currentLayout.getLineStart(line))
+                val lineEndOffset = minOf(end, currentLayout.getLineEnd(line))
+                if (lineStartOffset >= lineEndOffset) continue
+
+                val left = currentLayout.getPrimaryHorizontal(lineStartOffset)
+                val right = currentLayout.getPrimaryHorizontal(lineEndOffset)
+                val top = currentLayout.getLineTop(line).toFloat()
+                val bottom = currentLayout.getLineBottom(line).toFloat()
+                val rect = RectF(
+                    totalPaddingLeft + left - horizontalPadding,
+                    totalPaddingTop + top + verticalPadding,
+                    totalPaddingLeft + right + horizontalPadding,
+                    totalPaddingTop + bottom - verticalPadding
+                )
+                val radius = highlightedWord.borderRadius * density
+                canvas.drawRoundRect(rect, radius, radius, paint)
+            }
+        }
+
+        // Draw indicator for indicatorWordIndex
+        if (indicatorWordIndex >= 0 && indicatorColor.isNotEmpty()) {
+            val wordPos = wordPositions.find { it.index == indicatorWordIndex }
+            if (wordPos != null) {
+                val start = wordPos.start
+                val end = wordPos.extendedEnd.coerceAtMost(currentText.length)
+
+                if (start < end) {
+                    val startLine = currentLayout.getLineForOffset(start)
+                    val safeEndOffset = (end - 1).coerceAtLeast(start)
+                    val endLine = currentLayout.getLineForOffset(safeEndOffset)
+
+                    paint.color = parseColor(indicatorColor)
+
+                    for (line in startLine..endLine) {
+                        val lineStartOffset = maxOf(start, currentLayout.getLineStart(line))
+                        val lineEndOffset = minOf(end, currentLayout.getLineEnd(line))
+                        if (lineStartOffset >= lineEndOffset) continue
+
+                        val left = currentLayout.getPrimaryHorizontal(lineStartOffset)
+                        val right = currentLayout.getPrimaryHorizontal(lineEndOffset)
+                        val top = currentLayout.getLineTop(line).toFloat()
+                        val bottom = currentLayout.getLineBottom(line).toFloat()
+                        val rect = RectF(
+                            totalPaddingLeft + left - horizontalPadding,
+                            totalPaddingTop + top + verticalPadding,
+                            totalPaddingLeft + right + horizontalPadding,
+                            totalPaddingTop + bottom - verticalPadding
+                        )
+                        val radius = 4f * density
+                        canvas.drawRoundRect(rect, radius, radius, paint)
+                    }
+                }
+            }
+        }
+
+        paint.color = originalColor
+    }
+
     private fun parseColor(colorString: String): Int {
         return try {
             Color.parseColor(colorString)
@@ -284,7 +361,8 @@ class AdvancedTextView : TextView {
 
     private inner class WordClickableSpan(
         private val wordIndex: Int,
-        private val word: String
+        private val word: String,
+        private val wordColor: Int
     ) : ClickableSpan() {
 
         override fun onClick(widget: View) {
@@ -295,7 +373,7 @@ class AdvancedTextView : TextView {
         override fun updateDrawState(ds: TextPaint) {
             super.updateDrawState(ds)
             ds.isUnderlineText = false
-            ds.color = Color.parseColor(textColor)
+            ds.color = wordColor
         }
     }
 
@@ -381,5 +459,6 @@ class AdvancedTextView : TextView {
 
 data class HighlightedWord(
     val index: Int,
-    val highlightColor: String
+    val highlightColor: String,
+    val borderRadius: Float = 0f
 )

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

@@ -2,7 +2,6 @@
 package com.advancedtext
 
 import android.graphics.Color
-import android.util.TypedValue
 import android.view.ViewGroup
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.module.annotations.ReactModule
@@ -50,7 +49,12 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
                     words.add(
                         HighlightedWord(
                             index = wordMap.getInt("index"),
-                            highlightColor = wordMap.getString("highlightColor") ?: "#FFFF00"
+                            highlightColor = wordMap.getString("highlightColor") ?: "#FFFF00",
+                            borderRadius = if (wordMap.hasKey("borderRadius")) {
+                                wordMap.getDouble("borderRadius").toFloat()
+                            } else {
+                                0f
+                            }
                         )
                     )
                 }
@@ -77,12 +81,6 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
         view?.setMenuOptions(options)
     }
 
-    @ReactProp(name = "indicatorWordIndex")
-    fun setIndicatorWordIndex(view: AdvancedTextView?, index: Int) {
-        android.util.Log.d(NAME, "setIndicatorWordIndex: $index")
-        view?.setIndicatorWordIndex(if (index >= 0) index else -1)
-    }
-
     @ReactProp(name = "color")
     fun setColor(view: AdvancedTextView?, color: String?) {
         android.util.Log.d(NAME, "setColor called with: $color")
@@ -124,6 +122,20 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
     }
 
 
+    @ReactProp(name = "indicatorWordIndex")
+    fun setIndicatorWordIndex(view: AdvancedTextView?, indicatorWordIndex: Int) {
+        android.util.Log.d(NAME, "setIndicatorWordIndex called with: $indicatorWordIndex")
+        view?.setIndicatorWordIndex(indicatorWordIndex)
+    }
+
+    @ReactProp(name = "indicatorColor")
+    fun setIndicatorColor(view: AdvancedTextView?, indicatorColor: String?) {
+        android.util.Log.d(NAME, "setIndicatorColor called with: $indicatorColor")
+        if (indicatorColor != null) {
+            view?.setIndicatorColor(indicatorColor)
+        }
+    }
+
     @ReactProp(name = "lineHeight")
     fun setLineHeight(view: AdvancedTextView?, lineHeight: Float) {
         android.util.Log.d(NAME, "setLineHeight called with: $lineHeight")

package/ios/AdvancedTextView.mm

@@ -15,17 +15,19 @@ using namespace facebook::react;
 @interface AdvancedTextView () <RCTAdvancedTextViewViewProtocol, UIGestureRecognizerDelegate, UITextViewDelegate>
 
 @property (nonatomic, strong) NSMutableArray<NSDictionary *> *wordRanges;
-@property (nonatomic, strong) NSMutableDictionary<NSNumber *, UIColor *> *highlightColors;
+@property (nonatomic, strong) NSMutableDictionary<NSNumber *, NSDictionary *> *highlightStyles;
 @property (nonatomic, strong) NSArray<NSString *> *menuOptions;
-@property (nonatomic, assign) NSInteger indicatorWordIndex;
 @property (nonatomic, assign) CGFloat fontSize;
 @property (nonatomic, strong) NSString *fontWeight;
 @property (nonatomic, strong) UIColor *textColor;
 @property (nonatomic, strong) NSString *textAlign;
 @property (nonatomic, strong) NSString *fontFamily;
 @property (nonatomic, assign) CGFloat lineHeight;
+@property (nonatomic, assign) NSInteger indicatorWordIndex;
+@property (nonatomic, strong) UIColor *indicatorColor;
 
 - (void)handleCustomMenuAction:(UIMenuItem *)sender;
+- (void)drawHighlightedBackgroundsInTextView:(UITextView *)textView;
 
 @end
 
@@ -56,6 +58,12 @@ using namespace facebook::react;
     }
 }
 
+- (void)drawRect:(CGRect)rect
+{
+    [self.parentView drawHighlightedBackgroundsInTextView:self];
+    [super drawRect:rect];
+}
+
 @end
 
 
@@ -83,14 +91,15 @@ using namespace facebook::react;
             _props = defaultProps;
 
             _wordRanges = [NSMutableArray array];
-            _highlightColors = [NSMutableDictionary dictionary];
-            _indicatorWordIndex = -1;
+            _highlightStyles = [NSMutableDictionary dictionary];
             _fontSize = 16.0;
             _fontWeight = @"normal";
             _textColor = [UIColor labelColor];
             _textAlign = @"left";
             _fontFamily = @"System";
             _lineHeight = 0.0;
+            _indicatorWordIndex = -1;
+            _indicatorColor = nil;
 
             [self setupTextView];
             [self setupGestureRecognizers];
@@ -155,7 +164,6 @@ using namespace facebook::react;
         BOOL textChanged = NO;
         BOOL highlightsChanged = NO;
         BOOL menuChanged = NO;
-        BOOL indicatorChanged = NO;
         BOOL styleChanged = NO;
 
         if (oldViewProps.fontSize != newViewProps.fontSize && newViewProps.fontSize) {
@@ -200,7 +208,9 @@ using namespace facebook::react;
             for (size_t i = 0; i < oldViewProps.highlightedWords.size(); i++) {
                 const auto &oldHW = oldViewProps.highlightedWords[i];
                 const auto &newHW = newViewProps.highlightedWords[i];
-                if (oldHW.index != newHW.index || oldHW.highlightColor != newHW.highlightColor) {
+                if (oldHW.index != newHW.index ||
+                    oldHW.highlightColor != newHW.highlightColor ||
+                    oldHW.borderRadius != newHW.borderRadius) {
                     highlightsChanged = YES;
                     break;
                 }
@@ -218,16 +228,29 @@ using namespace facebook::react;
             }
         }
 
-        if (oldViewProps.indicatorWordIndex != newViewProps.indicatorWordIndex) {
-            indicatorChanged = YES;
-        }
-
         if (oldViewProps.lineHeight != newViewProps.lineHeight) {
             NSLog(@"[AdvancedTextView] Updating lineHeight to: %f", newViewProps.lineHeight);
             _lineHeight = static_cast<CGFloat>(newViewProps.lineHeight);
             styleChanged = YES;
         }
 
+        if (oldViewProps.indicatorWordIndex != newViewProps.indicatorWordIndex) {
+            NSLog(@"[AdvancedTextView] Updating indicatorWordIndex to: %d", newViewProps.indicatorWordIndex);
+            _indicatorWordIndex = static_cast<NSInteger>(newViewProps.indicatorWordIndex);
+            [_textView setNeedsDisplay];
+        }
+
+        if (oldViewProps.indicatorColor != newViewProps.indicatorColor) {
+            NSLog(@"[AdvancedTextView] Updating indicatorColor");
+            if (!newViewProps.indicatorColor.empty()) {
+                NSString *colorStr = [NSString stringWithUTF8String:newViewProps.indicatorColor.c_str()];
+                _indicatorColor = [self hexStringToColor:colorStr];
+            } else {
+                _indicatorColor = nil;
+            }
+            [_textView setNeedsDisplay];
+        }
+
         if (textChanged) {
             NSString *text = [NSString stringWithUTF8String:newViewProps.text.c_str()];
             [self updateTextContent:text];
@@ -241,11 +264,6 @@ using namespace facebook::react;
             [self updateMenuOptions:newViewProps.menuOptions];
         }
 
-        if (indicatorChanged) {
-            _indicatorWordIndex = newViewProps.indicatorWordIndex;
-            [self updateTextAppearance];
-        }
-
         if (styleChanged) {
             NSLog(@"[AdvancedTextView] Style properties changed, updating appearance");
             [self updateTextAppearance];
@@ -277,9 +295,11 @@ using namespace facebook::react;
         NSCharacterSet *whitespaceSet = [NSCharacterSet whitespaceAndNewlineCharacterSet];
 
         NSInteger wordIndex = 0;
+        NSMutableArray *allMatches = [NSMutableArray array];
+
         while (searchRange.location < text.length) {
             while (searchRange.location < text.length &&
-                   [whitespaceSet characterIsMember:[text characterAtIndex:searchRange.location]]) {
+                [whitespaceSet characterIsMember:[text characterAtIndex:searchRange.location]]) {
                 searchRange.location++;
                 searchRange.length = text.length - searchRange.location;
             }
@@ -288,14 +308,14 @@ using namespace facebook::react;
 
             NSUInteger wordStart = searchRange.location;
             while (searchRange.location < text.length &&
-                   ![whitespaceSet characterIsMember:[text characterAtIndex:searchRange.location]]) {
+                ![whitespaceSet characterIsMember:[text characterAtIndex:searchRange.location]]) {
                 searchRange.location++;
             }
 
             NSRange wordRange = NSMakeRange(wordStart, searchRange.location - wordStart);
             NSString *word = [text substringWithRange:wordRange];
 
-            [_wordRanges addObject:@{
+            [allMatches addObject:@{
                 @"word": word,
                 @"range": [NSValue valueWithRange:wordRange],
                 @"index": @(wordIndex)
@@ -305,6 +325,25 @@ using namespace facebook::react;
             searchRange.length = text.length - searchRange.location;
         }
 
+        for (NSInteger i = 0; i < allMatches.count; i++) {
+            NSMutableDictionary *wordInfo = [allMatches[i] mutableCopy];
+            NSRange wordRange = [wordInfo[@"range"] rangeValue];
+
+            NSUInteger extendedEnd;
+            if (i + 1 < allMatches.count) {
+                NSRange nextRange = [allMatches[i + 1][@"range"] rangeValue];
+                extendedEnd = nextRange.location;
+            } else {
+                extendedEnd = text.length;
+            }
+
+            NSRange extendedRange = NSMakeRange(wordRange.location, extendedEnd - wordRange.location);
+            wordInfo[@"extendedRange"] = [NSValue valueWithRange:extendedRange];
+
+            [_wordRanges addObject:[wordInfo copy]];
+        }
+
+
         NSLog(@"[AdvancedTextView] Parsed %ld words", (long)_wordRanges.count);
         [self updateTextAppearance];
     } @catch (NSException *exception) {
@@ -318,15 +357,19 @@ using namespace facebook::react;
     NSLog(@"[AdvancedTextView] updateHighlightedWords called with %zu highlights",
           highlightedWords.size());
     @try {
-        [_highlightColors removeAllObjects];
+        [_highlightStyles removeAllObjects];
 
         for (const auto &hw : highlightedWords) {
             NSInteger index = hw.index;
             NSString *colorString = [NSString stringWithUTF8String:hw.highlightColor.c_str()];
             UIColor *color = [self hexStringToColor:colorString];
+            CGFloat borderRadius = static_cast<CGFloat>(hw.borderRadius);
 
             if (color) {
-                _highlightColors[@(index)] = color;
+                _highlightStyles[@(index)] = @{
+                    @"color": color,
+                    @"borderRadius": @(MAX(borderRadius, 0.0))
+                };
             }
         }
 
@@ -382,7 +425,7 @@ using namespace facebook::react;
                                      value:paragraphStyle
                                      range:NSMakeRange(0, attributedString.length)];
         }
-        
+
         UIFont *font = nil;
 
         if (_fontFamily && _fontFamily.length > 0) {
@@ -409,32 +452,8 @@ using namespace facebook::react;
                                  value:color
                                  range:NSMakeRange(0, attributedString.length)];
 
-
-        for (NSDictionary *wordInfo in _wordRanges) {
-            NSNumber *index = wordInfo[@"index"];
-            NSValue *rangeValue = wordInfo[@"range"];
-            NSRange range = [rangeValue rangeValue];
-
-            if (range.location + range.length > attributedString.length) {
-                continue;
-            }
-
-            UIColor *highlightColor = _highlightColors[index];
-            if (highlightColor) {
-                [attributedString addAttribute:NSBackgroundColorAttributeName
-                                         value:highlightColor
-                                         range:range];
-            }
-
-            if (_indicatorWordIndex >= 0 && [index integerValue] == _indicatorWordIndex) {
-                UIColor *indicatorColor = [[UIColor systemBlueColor] colorWithAlphaComponent:0.3];
-                [attributedString addAttribute:NSBackgroundColorAttributeName
-                                         value:indicatorColor
-                                         range:range];
-            }
-        }
-
         _textView.attributedText = attributedString;
+        [_textView setNeedsDisplay];
 
         if (_textAlign) {
             if ([_textAlign.lowercaseString isEqualToString:@"center"]) {
@@ -453,6 +472,81 @@ using namespace facebook::react;
     }
 }
 
+- (void)drawHighlightedBackgroundsInTextView:(UITextView *)textView
+{
+    if (!textView.layoutManager || !textView.textContainer) {
+        return;
+    }
+
+    NSLayoutManager *layoutManager = textView.layoutManager;
+    NSTextContainer *textContainer = textView.textContainer;
+
+    for (NSDictionary *wordInfo in _wordRanges) {
+        NSNumber *index = wordInfo[@"index"];
+        NSDictionary *highlightStyle = _highlightStyles[index];
+        if (!highlightStyle) {
+            continue;
+        }
+
+        NSValue *extendedRangeValue = wordInfo[@"extendedRange"];
+        NSRange characterRange = extendedRangeValue ? [extendedRangeValue rangeValue] : [wordInfo[@"range"] rangeValue];
+        if (characterRange.location == NSNotFound || characterRange.length == 0) {
+            continue;
+        }
+
+        UIColor *highlightColor = highlightStyle[@"color"];
+        CGFloat radius = [highlightStyle[@"borderRadius"] doubleValue];
+        NSRange glyphRange = [layoutManager glyphRangeForCharacterRange:characterRange actualCharacterRange:nil];
+
+        [highlightColor setFill];
+        [layoutManager enumerateEnclosingRectsForGlyphRange:glyphRange
+                                   withinSelectedGlyphRange:NSMakeRange(NSNotFound, 0)
+                                            inTextContainer:textContainer
+                                                 usingBlock:^(CGRect enclosingRect, BOOL *stop) {
+            CGRect adjustedRect = CGRectInset(enclosingRect, -6.0, -2.0);
+            adjustedRect.origin.x += textView.textContainerInset.left;
+            adjustedRect.origin.y += textView.textContainerInset.top;
+
+            UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:adjustedRect
+                                                            cornerRadius:MAX(radius, 0.0)];
+            [path fill];
+        }];
+    }
+
+    // Draw indicator for indicatorWordIndex
+    if (_indicatorWordIndex >= 0 && _indicatorColor) {
+        for (NSDictionary *wordInfo in _wordRanges) {
+            NSNumber *index = wordInfo[@"index"];
+            if ([index integerValue] != _indicatorWordIndex) {
+                continue;
+            }
+
+            NSValue *extendedRangeValue = wordInfo[@"extendedRange"];
+            NSRange characterRange = extendedRangeValue ? [extendedRangeValue rangeValue] : [wordInfo[@"range"] rangeValue];
+            if (characterRange.location == NSNotFound || characterRange.length == 0) {
+                break;
+            }
+
+            NSRange glyphRange = [layoutManager glyphRangeForCharacterRange:characterRange actualCharacterRange:nil];
+
+            [_indicatorColor setFill];
+            [layoutManager enumerateEnclosingRectsForGlyphRange:glyphRange
+                                       withinSelectedGlyphRange:NSMakeRange(NSNotFound, 0)
+                                                inTextContainer:textContainer
+                                                     usingBlock:^(CGRect enclosingRect, BOOL *stop) {
+                CGRect adjustedRect = CGRectInset(enclosingRect, -6.0, -2.0);
+                adjustedRect.origin.x += textView.textContainerInset.left;
+                adjustedRect.origin.y += textView.textContainerInset.top;
+
+                UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:adjustedRect
+                                                                cornerRadius:4.0];
+                [path fill];
+            }];
+            break;
+        }
+    }
+}
+
 
 - (void)handleTap:(UITapGestureRecognizer *)gesture
 {

package/lib/module/AdvancedText.js

@@ -10,7 +10,6 @@ export const AdvancedText = ({
   menuOptions,
   onWordPress,
   onSelection,
-  indicatorWordIndex,
   ...restProps
 }) => {
   return /*#__PURE__*/_jsx(AdvancedTextViewNativeComponent, {
@@ -20,8 +19,7 @@ export const AdvancedText = ({
     highlightedWords: highlightedWords,
     menuOptions: menuOptions,
     onWordPress: onWordPress,
-    onSelection: onSelection,
-    indicatorWordIndex: indicatorWordIndex
+    onSelection: onSelection
   });
 };
 //# sourceMappingURL=AdvancedText.js.map

package/lib/module/AdvancedText.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AdvancedTextViewNativeComponent","jsx","_jsx","AdvancedText","text","style","highlightedWords","menuOptions","onWordPress","onSelection","indicatorWordIndex","restProps"],"sourceRoot":"../../src","sources":["AdvancedText.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,+BAA+B,MAE/B,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMC,YAAmC,GAAGA,CAAC;EAClDC,IAAI;EACJC,KAAK;EACLC,gBAAgB;EAChBC,WAAW;EACXC,WAAW;EACXC,WAAW;EACXC,kBAAkB;EAClB,GAAGC;AACL,CAAC,KAAK;EACJ,oBACET,IAAA,CAACF,+BAA+B;IAAA,GAC1BW,SAAS;IACbN,KAAK,EAAEA,KAAM;IACbD,IAAI,EAAEA,IAAK;IACXE,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,WAAW,EAAEA,WAAY;IACzBC,WAAW,EAAEA,WAAY;IACzBC,kBAAkB,EAAEA;EAAmB,CACxC,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","AdvancedTextViewNativeComponent","jsx","_jsx","AdvancedText","text","style","highlightedWords","menuOptions","onWordPress","onSelection","restProps"],"sourceRoot":"../../src","sources":["AdvancedText.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,+BAA+B,MAE/B,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMC,YAAmC,GAAGA,CAAC;EAClDC,IAAI;EACJC,KAAK;EACLC,gBAAgB;EAChBC,WAAW;EACXC,WAAW;EACXC,WAAW;EACX,GAAGC;AACL,CAAC,KAAK;EACJ,oBACER,IAAA,CAACF,+BAA+B;IAAA,GAC1BU,SAAS;IACbL,KAAK,EAAEA,KAAM;IACbD,IAAI,EAAEA,IAAK;IACXE,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,WAAW,EAAEA,WAAY;IACzBC,WAAW,EAAEA;EAAY,CAC1B,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/AdvancedTextViewNativeComponent.ts

@@ -7,6 +7,7 @@ import type { DirectEventHandler, Int32 , Float  } from 'react-native/Libraries/
 interface HighlightedWord {
   index: Int32;
   highlightColor: string;
+  borderRadius?: Float;
 }
 
 export interface NativeProps extends ViewProps {
@@ -15,13 +16,14 @@ export interface NativeProps extends ViewProps {
   menuOptions?: ReadonlyArray<string>;
   onWordPress?: DirectEventHandler<{ word: string; index: Int32 }>;
   onSelection?: DirectEventHandler<{ selectedText: string; event: string }>;
-  indicatorWordIndex?: Int32;
   fontSize?: Int32;
   fontWeight?: string;
   color?: string;
   textAlign?: string;
   fontFamily?: string;
   lineHeight?: Float;
+  indicatorWordIndex?: Int32;
+  indicatorColor?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('AdvancedTextView');

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

@@ -1 +1 @@
-{"version":3,"file":"AdvancedText.d.ts","sourceRoot":"","sources":["../../../src/AdvancedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAwC,EACtC,KAAK,WAAW,EACjB,MAAM,mCAAmC,CAAC;AAE3C,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsB9C,CAAC"}
+{"version":3,"file":"AdvancedText.d.ts","sourceRoot":"","sources":["../../../src/AdvancedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAwC,EACtC,KAAK,WAAW,EACjB,MAAM,mCAAmC,CAAC;AAE3C,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoB9C,CAAC"}

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

@@ -3,6 +3,7 @@ import type { DirectEventHandler, Int32, Float } from 'react-native/Libraries/Ty
 interface HighlightedWord {
     index: Int32;
     highlightColor: string;
+    borderRadius?: Float;
 }
 export interface NativeProps extends ViewProps {
     text: string;
@@ -16,13 +17,14 @@ export interface NativeProps extends ViewProps {
         selectedText: string;
         event: string;
     }>;
-    indicatorWordIndex?: Int32;
     fontSize?: Int32;
     fontWeight?: string;
     color?: string;
     textAlign?: string;
     fontFamily?: string;
     lineHeight?: Float;
+    indicatorWordIndex?: Int32;
+    indicatorColor?: string;
 }
 declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"AdvancedTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/AdvancedTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAG,KAAK,EAAG,MAAM,2CAA2C,CAAC;AAEpG,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;;AAED,wBAAuE"}
+{"version":3,"file":"AdvancedTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/AdvancedTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAG,KAAK,EAAG,MAAM,2CAA2C,CAAC;AAEpG,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;;AAED,wBAAuE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.1.33",
+  "version": "0.1.40",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/AdvancedText.tsx

@@ -10,7 +10,6 @@ export const AdvancedText: React.FC<NativeProps> = ({
   menuOptions,
   onWordPress,
   onSelection,
-  indicatorWordIndex,
   ...restProps
 }) => {
   return (
@@ -22,7 +21,6 @@ export const AdvancedText: React.FC<NativeProps> = ({
       menuOptions={menuOptions}
       onWordPress={onWordPress}
       onSelection={onSelection}
-      indicatorWordIndex={indicatorWordIndex}
     />
   );
 };

package/src/AdvancedTextViewNativeComponent.ts

@@ -7,6 +7,7 @@ import type { DirectEventHandler, Int32 , Float  } from 'react-native/Libraries/
 interface HighlightedWord {
   index: Int32;
   highlightColor: string;
+  borderRadius?: Float;
 }
 
 export interface NativeProps extends ViewProps {
@@ -15,13 +16,14 @@ export interface NativeProps extends ViewProps {
   menuOptions?: ReadonlyArray<string>;
   onWordPress?: DirectEventHandler<{ word: string; index: Int32 }>;
   onSelection?: DirectEventHandler<{ selectedText: string; event: string }>;
-  indicatorWordIndex?: Int32;
   fontSize?: Int32;
   fontWeight?: string;
   color?: string;
   textAlign?: string;
   fontFamily?: string;
   lineHeight?: Float;
+  indicatorWordIndex?: Int32;
+  indicatorColor?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('AdvancedTextView');