react-native-highlight-text-view 0.1.1 → 0.1.3

package/README.md

@@ -12,13 +12,55 @@ 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 }}
+    />
+  );
+}
+```
 
-<HighlightTextView color="tomato" />
+## 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.
 ```
 
 

package/ios/HighlightTextView.mm

@@ -73,6 +73,7 @@ using namespace facebook::react;
     CGFloat _paddingTop;
     CGFloat _paddingBottom;
     CGFloat _cornerRadius;
+    BOOL _isUpdatingText;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -146,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
     }
     
@@ -220,6 +262,37 @@ using namespace facebook::react;
             _layoutManager.paddingBottom = _paddingBottom;
         }
     }
+    
+    if (oldViewProps.text != newViewProps.text) {
+        NSString *text = [[NSString alloc] initWithUTF8String: newViewProps.text.c_str()];
+        if (![_textView.text isEqualToString:text]) {
+            _isUpdatingText = YES;
+            _textView.text = text;
+            [self applyCharacterBackgrounds];
+            _isUpdatingText = NO;
+        }
+    }
+    
+    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];
 }
@@ -232,6 +305,14 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
 - (void)textViewDidChange:(UITextView *)textView
 {
     [self applyCharacterBackgrounds];
+    if (!_isUpdatingText) {
+        if (_eventEmitter != nullptr) {
+            std::dynamic_pointer_cast<const HighlightTextViewEventEmitter>(_eventEmitter)
+                ->onChange(HighlightTextViewEventEmitter::OnChange{
+                    .text = std::string([textView.text UTF8String] ?: "")
+                });
+        }
+    }
 }
 
 - (void)applyCharacterBackgrounds

package/lib/module/HighlightTextViewNativeComponent.ts

@@ -1,9 +1,49 @@
-import { codegenNativeComponent, type ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+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;
@@ -11,6 +51,9 @@ export interface HighlightTextViewProps extends ViewProps {
   paddingRight?: string;
   paddingTop?: string;
   paddingBottom?: string;
+  text?: string;
+  isEditable?: boolean;
+  onChange?: BubblingEventHandler<OnChangeEventData>;
 }
 
 export default codegenNativeComponent<HighlightTextViewProps>(

package/lib/module/codegen-types.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=codegen-types.d.js.map

package/lib/module/codegen-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["codegen-types.d.ts"],"mappings":"","ignoreList":[]}

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

@@ -1,8 +1,31 @@
-import { type ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+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;
@@ -10,6 +33,9 @@ export interface HighlightTextViewProps extends ViewProps {
     paddingRight?: string;
     paddingTop?: string;
     paddingBottom?: string;
+    text?: string;
+    isEditable?: boolean;
+    onChange?: BubblingEventHandler<OnChangeEventData>;
 }
 declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<HighlightTextViewProps>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"HighlightTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/HighlightTextViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,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;CACxB;;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.1",
+  "version": "0.1.3",
   "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

@@ -1,9 +1,49 @@
-import { codegenNativeComponent, type ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+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;
@@ -11,6 +51,9 @@ export interface HighlightTextViewProps extends ViewProps {
   paddingRight?: string;
   paddingTop?: string;
   paddingBottom?: string;
+  text?: string;
+  isEditable?: boolean;
+  onChange?: BubblingEventHandler<OnChangeEventData>;
 }
 
 export default codegenNativeComponent<HighlightTextViewProps>(

package/src/codegen-types.d.ts

@@ -0,0 +1,14 @@
+declare module 'react-native/Libraries/Types/CodegenTypes' {
+  export type DirectEventHandler<T = {}> = (event: { nativeEvent: T }) => void;
+  export type BubblingEventHandler<T = {}> = (event: {
+    nativeEvent: T;
+  }) => void;
+}
+
+declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
+  import type { HostComponent } from 'react-native';
+  export default function codegenNativeComponent<T>(
+    componentName: string,
+    options?: {}
+  ): HostComponent<T>;
+}