react-native-advanced-text 0.1.43 → 0.2.0

package/AdvancedText.podspec

@@ -13,8 +13,25 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/AminAllahham/react-native-advanced-text.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  # `common/cpp` holds the self-measuring Fabric ShadowNode. Its
+  # ShadowNodes.h intentionally shadows the codegen output, so `common/cpp`
+  # must come first on the header search path (see below).
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}", "common/cpp/**/*.{h,cpp}"
   s.private_header_files = "ios/**/*.h"
 
   install_modules_dependencies(s)
+
+  # `install_modules_dependencies` sets `s.pod_target_xcconfig`; extend it
+  # (rather than replace it) so our headers win over the generated ones and
+  # so `React-FabricComponents` headers (TextLayoutManager) resolve.
+  xcconfig = s.attributes_hash["pod_target_xcconfig"] || {}
+  existing_header_paths = xcconfig["HEADER_SEARCH_PATHS"] || "$(inherited)"
+  xcconfig["HEADER_SEARCH_PATHS"] =
+    "\"$(PODS_TARGET_SRCROOT)/common/cpp\" #{existing_header_paths}"
+  xcconfig["CLANG_CXX_LANGUAGE_STANDARD"] ||= "c++20"
+  s.pod_target_xcconfig = xcconfig
+
+  # Needed for <react/renderer/textlayoutmanager/TextLayoutManager.h>, which is
+  # not pulled in by `install_modules_dependencies`.
+  s.dependency "React-FabricComponents"
 end

package/README.md

@@ -9,6 +9,7 @@
 npm install react-native-advanced-text
 ```
 
+> Requires the New Architecture (Fabric). React Native 0.80+ recommended.
 
 ## Usage
 
@@ -18,7 +19,7 @@ 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 }]}
+  style={styles.AdvancedText}
   onWordPress={(event) => {
     console.log({event})
   }}
@@ -42,9 +43,39 @@ import { AdvancedText } from "react-native-advanced-text";
   color={'#FFFFFF'}
   fontWeight="normal"
   fontFamily={'monospace'}
+  letterSpacing={1}
 />
 ```
 
+## Sizing
+
+`AdvancedText` measures its own height, like React Native's built‑in `<Text>`.
+Give it a width (via `style`, `flex`, or a constraining parent) and it derives
+its height from the text content and that width — **no explicit `height` is
+required**.
+
+Under the hood the Fabric ShadowNode implements `measureContent()` using React
+Native's own `TextLayoutManager` (the same engine `<Text>` uses), so wrapping,
+font metrics, `letterSpacing` and `lineHeight` are accounted for on both iOS and
+Android without any JS‑side text measurement.
+
+```jsx
+// Before: an explicit height had to be estimated and passed in.
+<AdvancedText text={text} style={{ height: estimatedHeight }} />
+
+// Now:
+<AdvancedText text={text} style={{ width: '100%' }} />
+```
+
+### Props that affect measurement
+
+| Prop            | Notes                                                                 |
+| --------------- | ------------------------------------------------------------------- |
+| `fontSize`      | points (defaults to 16)                                            |
+| `fontFamily`    |                                                                   |
+| `fontWeight`    | `"bold"` or `"italic"`                                             |
+| `letterSpacing` | points; applied to both rendering and measurement                  |
+| `lineHeight`    | multiple of the font size (unchanged behavior)                     |
 
 ## Contributing
 

package/android/CMakeLists.txt

@@ -0,0 +1,51 @@
+# Custom CMake build for react-native-advanced-text.
+#
+# This replaces the auto-generated
+#   build/generated/source/codegen/jni/CMakeLists.txt
+# (referenced from react-native.config.js via `cmakeListsPath`) so that the
+# Fabric component is backed by our self-measuring ShadowNode
+# (common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.{h,cpp})
+# instead of the plain, non-measuring one that codegen emits.
+#
+# It still produces the target name the app autolinking expects:
+#   react_codegen_AdvancedTextViewSpec
+#
+# The key detail is include order: `common/cpp` is listed BEFORE the codegen
+# output dir, so `#include <react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h>`
+# resolves to our version, while Props.h / EventEmitters.h / States.h still
+# resolve to the generated ones.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+
+set(CODEGEN_DIR "${CMAKE_CURRENT_SOURCE_DIR}/build/generated/source/codegen/jni")
+set(COMMON_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../common/cpp")
+
+file(GLOB codegen_SRCS CONFIGURE_DEPENDS
+  "${CODEGEN_DIR}/*.cpp"
+  "${CODEGEN_DIR}/react/renderer/components/AdvancedTextViewSpec/*.cpp")
+
+file(GLOB custom_SRCS CONFIGURE_DEPENDS
+  "${COMMON_DIR}/react/renderer/components/AdvancedTextViewSpec/*.cpp")
+
+add_library(
+  react_codegen_AdvancedTextViewSpec
+  OBJECT
+  ${codegen_SRCS}
+  ${custom_SRCS}
+)
+
+# `common/cpp` MUST come first so our ShadowNodes.h shadows the generated one.
+target_include_directories(react_codegen_AdvancedTextViewSpec PUBLIC
+  "${COMMON_DIR}"
+  "${CODEGEN_DIR}"
+  "${CODEGEN_DIR}/react/renderer/components/AdvancedTextViewSpec")
+
+target_link_libraries(
+  react_codegen_AdvancedTextViewSpec
+  fbjni
+  jsi
+  reactnative
+)
+
+target_compile_reactnative_options(react_codegen_AdvancedTextViewSpec PRIVATE)

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

@@ -41,9 +41,12 @@ class AdvancedTextView : TextView {
     private var textAlign: String = "left"
     private var fontFamily: String = "sans-serif"
     private var lineHeightMultiplier: Float = 1.0f
+    // Value from JS, in dp/points (0 = unset). Converted to em for TextView.
+    private var letterSpacingDp: Float = 0f
 
     private var indicatorWordIndex: Int = -1
     private var indicatorColor: String = ""
+    private var indicatorMode: String = "Highlight"
 
     private var wordPositions: List<WordPosition> = emptyList()
 
@@ -55,7 +58,10 @@ class AdvancedTextView : TextView {
         Log.d(TAG, "AdvancedTextView initialized")
 
         textSize = 16f
-        setPadding(16, 16, 16, 16)
+        // Zero intrinsic padding so the rendered text matches the size reported
+        // by the Fabric ShadowNode's measureContent(). Consumers add padding via
+        // React Native `style` instead, exactly like <Text>.
+        setPadding(0, 0, 0, 0)
         setTextIsSelectable(true)
 
         movementMethod = SmartMovementMethod
@@ -147,6 +153,12 @@ class AdvancedTextView : TextView {
         updateTextWithHighlights()
     }
 
+    fun setAdvancedLetterSpacing(spacingDp: Float) {
+        if (letterSpacingDp == spacingDp) return
+        letterSpacingDp = spacingDp
+        updateTextWithHighlights()
+    }
+
 
     fun setAdvancedFontFamily(family: String) {
         if (fontFamily == family) return
@@ -162,12 +174,27 @@ class AdvancedTextView : TextView {
     fun setIndicatorWordIndex(index: Int) {
         if (indicatorWordIndex == index) return
         indicatorWordIndex = index
-        invalidate()
+        if (indicatorMode == "fill") {
+            updateTextWithHighlights()
+        } else {
+            invalidate()
+        }
     }
 
     fun setIndicatorColor(color: String) {
         if (indicatorColor == color) return
         indicatorColor = color
+        if (indicatorMode == "fill") {
+            updateTextWithHighlights()
+        } else {
+            invalidate()
+        }
+    }
+
+    fun setIndicatorMode(mode: String) {
+        if (indicatorMode == mode) return
+        indicatorMode = mode
+        updateTextWithHighlights()
         invalidate()
     }
 
@@ -214,11 +241,19 @@ class AdvancedTextView : TextView {
         val spannableString = SpannableString(currentText)
 
         wordPositions.forEach { wordPos ->
+            val wordColor = if (indicatorMode == "fill" &&
+                               indicatorWordIndex >= 0 &&
+                               wordPos.index <= indicatorWordIndex &&
+                               indicatorColor.isNotEmpty()) {
+                parseColor(indicatorColor)
+            } else {
+                parseColor(textColor)
+            }
             spannableString.setSpan(
                 WordClickableSpan(
                     wordIndex = wordPos.index,
                     word = wordPos.word,
-                    wordColor = parseColor(textColor)
+                    wordColor = wordColor
                 ),
                 wordPos.start,
                 wordPos.end,
@@ -244,6 +279,14 @@ class AdvancedTextView : TextView {
 
         setLineSpacing(0f, lineHeightMultiplier)
 
+        // Android's letterSpacing is in em; the prop is in dp/points. The ratio
+        // dp / fontSize is scale-invariant, so no density conversion is needed.
+        letterSpacing = if (letterSpacingDp != 0f && fontSize > 0f) {
+            letterSpacingDp / fontSize
+        } else {
+            0f
+        }
+
 
         post {
             setText(spannableString, BufferType.SPANNABLE)
@@ -299,8 +342,8 @@ class AdvancedTextView : TextView {
             }
         }
 
-        // Draw indicator for indicatorWordIndex
-        if (indicatorWordIndex >= 0 && indicatorColor.isNotEmpty()) {
+        // Draw indicator background only in Highlight mode
+        if (indicatorMode != "fill" && indicatorWordIndex >= 0 && indicatorColor.isNotEmpty()) {
             val wordPos = wordPositions.find { it.index == indicatorWordIndex }
             if (wordPos != null) {
                 val start = wordPos.start

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

@@ -136,6 +136,14 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
         }
     }
 
+    @ReactProp(name = "indicatorMode")
+    fun setIndicatorMode(view: AdvancedTextView?, indicatorMode: String?) {
+        android.util.Log.d(NAME, "setIndicatorMode called with: $indicatorMode")
+        if (indicatorMode != null) {
+            view?.setIndicatorMode(indicatorMode)
+        }
+    }
+
     @ReactProp(name = "lineHeight")
     fun setLineHeight(view: AdvancedTextView?, lineHeight: Float) {
         android.util.Log.d(NAME, "setLineHeight called with: $lineHeight")
@@ -144,6 +152,12 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
         }
     }
 
+    @ReactProp(name = "letterSpacing")
+    fun setLetterSpacing(view: AdvancedTextView?, letterSpacing: Float) {
+        android.util.Log.d(NAME, "setLetterSpacing called with: $letterSpacing")
+        view?.setAdvancedLetterSpacing(letterSpacing)
+    }
+
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
         return mapOf(
             "onWordPress" to mapOf("registrationName" to "onWordPress"),

package/common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.cpp

@@ -0,0 +1,120 @@
+/*
+ * Implementation of the self-measuring <AdvancedTextView> ShadowNode.
+ * See ShadowNodes.h for why this file shadows the codegen output.
+ *
+ * NOTE: this file deliberately does NOT define `AdvancedTextViewComponentName`.
+ * That symbol stays owned by the codegen-generated `ShadowNodes.cpp`, which is
+ * still compiled (via the podspec on iOS and via CMakeLists.txt on Android).
+ */
+
+#include <react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h>
+
+#include <algorithm>
+#include <cctype>
+#include <string>
+
+#include <react/renderer/attributedstring/AttributedStringBox.h>
+#include <react/renderer/attributedstring/ParagraphAttributes.h>
+#include <react/renderer/attributedstring/TextAttributes.h>
+#include <react/renderer/attributedstring/primitives.h>
+#include <react/renderer/mounting/ShadowView.h>
+#include <react/renderer/textlayoutmanager/TextLayoutContext.h>
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+
+namespace facebook::react {
+
+namespace {
+
+std::string toLowerAscii(std::string value) {
+  std::transform(value.begin(), value.end(), value.begin(), [](unsigned char c) {
+    return static_cast<char>(std::tolower(c));
+  });
+  return value;
+}
+
+} // namespace
+
+AdvancedTextViewShadowNode::AdvancedTextViewShadowNode(
+    const ShadowNode& sourceShadowNode,
+    const ShadowNodeFragment& fragment)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment),
+      textLayoutManager_(
+          static_cast<const AdvancedTextViewShadowNode&>(sourceShadowNode)
+              .textLayoutManager_) {}
+
+AttributedString AdvancedTextViewShadowNode::getAttributedString() const {
+  const auto& props = getConcreteProps();
+
+  auto textAttributes = TextAttributes::defaultTextAttributes();
+
+  // Font size: matches the 16pt fallback used by the native views.
+  textAttributes.fontSize =
+      props.fontSize > 0 ? static_cast<Float>(props.fontSize) : 16.0;
+
+  if (!props.fontFamily.empty()) {
+    textAttributes.fontFamily = props.fontFamily;
+  }
+
+  // The native views treat `fontWeight` as either a weight ("bold") or a
+  // style ("italic"); mirror that here so wrapping metrics line up.
+  const auto weight = toLowerAscii(props.fontWeight);
+  if (weight == "bold") {
+    textAttributes.fontWeight = FontWeight::Bold;
+  } else if (weight == "italic") {
+    textAttributes.fontStyle = FontStyle::Italic;
+  }
+
+  if (props.letterSpacing != 0) {
+    textAttributes.letterSpacing = props.letterSpacing;
+  }
+
+  if (props.lineHeight > 0) {
+    // The component treats `lineHeight` as a multiple of the font size
+    // (see AdvancedTextView.mm / AdvancedTextView.kt). `TextAttributes`
+    // expects an absolute value; approximate the platform default single
+    // line height as 1.2 * fontSize.
+    textAttributes.lineHeight =
+        props.lineHeight * textAttributes.fontSize * 1.2;
+  }
+
+  auto attributedString = AttributedString{};
+  attributedString.appendFragment(AttributedString::Fragment{
+      .string = props.text,
+      .textAttributes = textAttributes,
+      .parentShadowView = ShadowView(*this),
+  });
+  return attributedString;
+}
+
+Size AdvancedTextViewShadowNode::measureContent(
+    const LayoutContext& layoutContext,
+    const LayoutConstraints& layoutConstraints) const {
+  const auto& props = getConcreteProps();
+
+  if (props.text.empty()) {
+    return layoutConstraints.clamp({0, 0});
+  }
+
+  if (!textLayoutManager_) {
+    textLayoutManager_ =
+        std::make_shared<const TextLayoutManager>(getContextContainer());
+  }
+
+  auto paragraphAttributes = ParagraphAttributes{};
+  paragraphAttributes.maximumNumberOfLines = 0; // unlimited -> natural wrapping
+  paragraphAttributes.adjustsFontSizeToFit = false;
+
+  auto textLayoutContext = TextLayoutContext{};
+  textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
+  textLayoutContext.surfaceId = getSurfaceId();
+
+  auto measurement = textLayoutManager_->measure(
+      AttributedStringBox{getAttributedString()},
+      paragraphAttributes,
+      textLayoutContext,
+      layoutConstraints);
+
+  return layoutConstraints.clamp(measurement.size);
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h

@@ -0,0 +1,95 @@
+/*
+ * Custom, self-measuring ShadowNode for <AdvancedTextView>.
+ *
+ * This file intentionally *shadows* the file generated by react-native-codegen
+ * at:
+ *   build/generated/source/codegen/jni/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h   (Android)
+ *   <codegen>/react/renderer/components/AdvancedTextViewSpec/ShadowNodes.h                             (iOS)
+ *
+ * The generated version defines `AdvancedTextViewShadowNode` as a plain
+ * `ConcreteViewShadowNode` alias, which has no Yoga measure function. That is
+ * why <AdvancedText> renders nothing unless an explicit `height` is provided.
+ *
+ * This version replaces the alias with a real class that opts into Yoga
+ * measurement (`LeafYogaNode | MeasurableYogaNode`) and implements
+ * `measureContent()` using React Native's own `TextLayoutManager` -- the exact
+ * engine <Text> uses -- so the component derives its height from its text and
+ * the available width, just like <Text>.
+ *
+ * The generated `ComponentDescriptors.h` (`using AdvancedTextViewComponentDescriptor
+ * = ConcreteComponentDescriptor<AdvancedTextViewShadowNode>`) therefore wraps
+ * this class automatically; no other wiring change is required on either
+ * platform. The `AdvancedTextViewComponentName` symbol is still defined by the
+ * generated `ShadowNodes.cpp`.
+ *
+ * For this shadowing to take effect, `common/cpp` must appear on the include
+ * path *before* the codegen output directory:
+ *   - Android: handled by `android/CMakeLists.txt` (see `target_include_directories`)
+ *   - iOS:     handled by `AdvancedText.podspec` (HEADER_SEARCH_PATHS)
+ */
+
+#pragma once
+
+#include <memory>
+
+#include <jsi/jsi.h>
+#include <react/renderer/attributedstring/AttributedString.h>
+#include <react/renderer/components/AdvancedTextViewSpec/EventEmitters.h>
+#include <react/renderer/components/AdvancedTextViewSpec/Props.h>
+#include <react/renderer/components/AdvancedTextViewSpec/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/core/ShadowNode.h>
+#include <react/renderer/core/ShadowNodeFragment.h>
+
+namespace facebook::react {
+
+class TextLayoutManager;
+
+// Defined by the codegen-generated ShadowNodes.cpp.
+JSI_EXPORT extern const char AdvancedTextViewComponentName[];
+
+/*
+ * `ShadowNode` for <AdvancedTextView> component.
+ */
+class AdvancedTextViewShadowNode final : public ConcreteViewShadowNode<
+                                            AdvancedTextViewComponentName,
+                                            AdvancedTextViewProps,
+                                            AdvancedTextViewEventEmitter,
+                                            AdvancedTextViewState> {
+ public:
+  // "create" constructor: (fragment, family, traits)
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  // "clone" constructor: carry the resolved TextLayoutManager across clones.
+  AdvancedTextViewShadowNode(
+      const ShadowNode& sourceShadowNode,
+      const ShadowNodeFragment& fragment);
+
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    // Opt into Yoga measurement. `MeasurableYogaNode` requires `LeafYogaNode`.
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+#pragma mark - LayoutableShadowNode
+
+  Size measureContent(
+      const LayoutContext& layoutContext,
+      const LayoutConstraints& layoutConstraints) const override;
+
+ private:
+  /*
+   * Builds a single-fragment `AttributedString` from the component props
+   * (text + font attributes), mirroring how the native views render it.
+   */
+  AttributedString getAttributedString() const;
+
+  // Lazily created on first measure, then reused / copied across clones.
+  mutable std::shared_ptr<const TextLayoutManager> textLayoutManager_;
+};
+
+} // namespace facebook::react

package/ios/AdvancedTextView.mm

@@ -23,8 +23,10 @@ using namespace facebook::react;
 @property (nonatomic, strong) NSString *textAlign;
 @property (nonatomic, strong) NSString *fontFamily;
 @property (nonatomic, assign) CGFloat lineHeight;
+@property (nonatomic, assign) CGFloat letterSpacing;
 @property (nonatomic, assign) NSInteger indicatorWordIndex;
 @property (nonatomic, strong) UIColor *indicatorColor;
+@property (nonatomic, strong) NSString *indicatorMode;
 
 - (void)handleCustomMenuAction:(UIMenuItem *)sender;
 - (void)drawHighlightedBackgroundsInTextView:(UITextView *)textView;
@@ -98,8 +100,10 @@ using namespace facebook::react;
             _textAlign = @"left";
             _fontFamily = @"System";
             _lineHeight = 0.0;
+            _letterSpacing = 0.0;
             _indicatorWordIndex = -1;
             _indicatorColor = nil;
+            _indicatorMode = @"Highlight";
 
             [self setupTextView];
             [self setupGestureRecognizers];
@@ -122,9 +126,17 @@ using namespace facebook::react;
         _textView.parentView = self;
         _textView.editable = NO;
         _textView.selectable = YES;
-        _textView.scrollEnabled = YES;
+        // The Fabric ShadowNode now measures the intrinsic content height, so the
+        // native view is always laid out tall enough to fit its text. Disable
+        // scrolling so the component behaves like <Text> (content grows / clips
+        // rather than scrolls).
+        _textView.scrollEnabled = NO;
         _textView.backgroundColor = [UIColor clearColor];
-        _textView.textContainerInset = UIEdgeInsetsMake(8, 8, 8, 8);
+        // Zero all intrinsic padding so the rendered text box matches the size
+        // reported by the ShadowNode's measureContent(). Consumers add padding
+        // via React Native `style` instead, exactly like <Text>.
+        _textView.textContainerInset = UIEdgeInsetsZero;
+        _textView.textContainer.lineFragmentPadding = 0;
         _textView.font = [UIFont systemFontOfSize:16];
         _textView.textColor = [UIColor labelColor];
         _textView.delegate = self;
@@ -234,10 +246,26 @@ using namespace facebook::react;
             styleChanged = YES;
         }
 
+        if (oldViewProps.letterSpacing != newViewProps.letterSpacing) {
+            NSLog(@"[AdvancedTextView] Updating letterSpacing to: %f", newViewProps.letterSpacing);
+            _letterSpacing = static_cast<CGFloat>(newViewProps.letterSpacing);
+            styleChanged = YES;
+        }
+
+        BOOL indicatorChanged = NO;
+
+        if (oldViewProps.indicatorMode != newViewProps.indicatorMode) {
+            NSLog(@"[AdvancedTextView] Updating indicatorMode to: %s", newViewProps.indicatorMode.c_str());
+            _indicatorMode = newViewProps.indicatorMode.empty()
+                ? @"Highlight"
+                : [NSString stringWithUTF8String:newViewProps.indicatorMode.c_str()];
+            indicatorChanged = YES;
+        }
+
         if (oldViewProps.indicatorWordIndex != newViewProps.indicatorWordIndex) {
             NSLog(@"[AdvancedTextView] Updating indicatorWordIndex to: %d", newViewProps.indicatorWordIndex);
             _indicatorWordIndex = static_cast<NSInteger>(newViewProps.indicatorWordIndex);
-            [_textView setNeedsDisplay];
+            indicatorChanged = YES;
         }
 
         if (oldViewProps.indicatorColor != newViewProps.indicatorColor) {
@@ -248,7 +276,15 @@ using namespace facebook::react;
             } else {
                 _indicatorColor = nil;
             }
-            [_textView setNeedsDisplay];
+            indicatorChanged = YES;
+        }
+
+        if (indicatorChanged) {
+            if ([_indicatorMode isEqualToString:@"fill"]) {
+                [self updateTextAppearance]; // rebuilds attributed text with fill colors; calls setNeedsDisplay
+            } else {
+                [_textView setNeedsDisplay];
+            }
         }
 
         if (textChanged) {
@@ -446,12 +482,30 @@ using namespace facebook::react;
                                  value:font
                                  range:NSMakeRange(0, attributedString.length)];
 
+        if (_letterSpacing != 0.0) {
+            [attributedString addAttribute:NSKernAttributeName
+                                     value:@(_letterSpacing)
+                                     range:NSMakeRange(0, attributedString.length)];
+        }
+
 
         UIColor *color = _textColor ?: [UIColor labelColor];
         [attributedString addAttribute:NSForegroundColorAttributeName
                                  value:color
                                  range:NSMakeRange(0, attributedString.length)];
 
+        if ([_indicatorMode isEqualToString:@"fill"] && _indicatorWordIndex >= 0 && _indicatorColor) {
+            for (NSDictionary *wordInfo in _wordRanges) {
+                NSInteger idx = [wordInfo[@"index"] integerValue];
+                if (idx <= _indicatorWordIndex) {
+                    NSRange wordRange = [wordInfo[@"range"] rangeValue];
+                    [attributedString addAttribute:NSForegroundColorAttributeName
+                                             value:_indicatorColor
+                                             range:wordRange];
+                }
+            }
+        }
+
         _textView.attributedText = attributedString;
         [_textView setNeedsDisplay];
 
@@ -513,7 +567,7 @@ using namespace facebook::react;
         }];
     }
 
-    if (_indicatorWordIndex >= 0 && _indicatorColor) {
+    if (![_indicatorMode isEqualToString:@"fill"] && _indicatorWordIndex >= 0 && _indicatorColor) {
         for (NSDictionary *wordInfo in _wordRanges) {
             NSNumber *index = wordInfo[@"index"];
             if ([index integerValue] != _indicatorWordIndex) {

package/lib/module/AdvancedTextViewNativeComponent.ts

@@ -22,8 +22,10 @@ export interface NativeProps extends ViewProps {
   textAlign?: string;
   fontFamily?: string;
   lineHeight?: Float;
+  letterSpacing?: Float;
   indicatorWordIndex?: Int32;
   indicatorColor?: string;
+  indicatorMode?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('AdvancedTextView');

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

@@ -23,8 +23,10 @@ export interface NativeProps extends ViewProps {
     textAlign?: string;
     fontFamily?: string;
     lineHeight?: Float;
+    letterSpacing?: Float;
     indicatorWordIndex?: Int32;
     indicatorColor?: string;
+    indicatorMode?: 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;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"}
+{"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,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;;AAED,wBAAuE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.1.43",
+  "version": "0.2.0",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -18,6 +18,7 @@
     "android",
     "ios",
     "cpp",
+    "common",
     "*.podspec",
     "react-native.config.js",
     "!ios/build",

package/react-native.config.js

@@ -0,0 +1,22 @@
+/**
+ * Autolinking config for react-native-advanced-text.
+ *
+ * On Android we ship a custom C++ ShadowNode (see android/CMakeLists.txt and
+ * common/cpp/...) so the Fabric component measures its own height from its text
+ * and the available width. Pointing `cmakeListsPath` at our own CMakeLists.txt
+ * makes the app build that instead of the plain codegen output.
+ *
+ * `libraryName` (AdvancedTextViewSpec) and `componentDescriptors`
+ * (AdvancedTextViewComponentDescriptor) are still auto-derived by the CLI from
+ * package.json `codegenConfig` and the JS spec, so they are intentionally not
+ * listed here.
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        cmakeListsPath: 'CMakeLists.txt',
+      },
+    },
+  },
+};

package/src/AdvancedTextViewNativeComponent.ts

@@ -22,8 +22,10 @@ export interface NativeProps extends ViewProps {
   textAlign?: string;
   fontFamily?: string;
   lineHeight?: Float;
+  letterSpacing?: Float;
   indicatorWordIndex?: Int32;
   indicatorColor?: string;
+  indicatorMode?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('AdvancedTextView');