[iOS] add caretHeight and caretYoffset to TextInput component #37147

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -583,6 +583,20 @@ export interface TextInputProps
    */
   caretHidden?: boolean | undefined;
 
+  /**
+   * Allows to adjust caret height.
+   * The default value is 0, which means the height of the caret will be calculated automatically
+   * @platform ios
+   */
+  caretHeight?: number | undefined;
+
+  /**
+   * Allows to adjust caret position relative to the Y axis
+   * The default value is 0.
+   * @platform ios
+   */
+  caretYOffset?: number | undefined;
+
   /**
    * If true, context menu is hidden. The default value is false.
    */

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -557,6 +557,20 @@ export type Props = $ReadOnly<{|
    */
   caretHidden?: ?boolean,
 
+  /**
+   * Allows to adjust caret height.
+   * The default value is 0, which means the height of the caret will be calculated automatically
+   * @platform ios
+   */
+  caretYOffset?: ?number,
+
+  /**
+   * Allows to adjust caret position relative to the Y axis
+   * The default value is 0.
+   * @platform ios
+   */
+  caretYHeight?: ?number,
+
   /*
    * If `true`, contextMenuHidden is hidden. The default value is `false`.
    */

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -376,6 +376,20 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   smartInsertDelete?: ?boolean,
+
+  /**
+   * Allows to adjust caret height.
+   * The default value is 0, which means the height of the caret will be calculated automatically
+   * @platform ios
+   */
+  caretYOffset?: ?number,
+
+  /**
+   * Allows to adjust caret position relative to the Y axis
+   * The default value is 0.
+   * @platform ios
+   */
+  caretHeight?: ?number,
 |}>;
 
 type AndroidProps = $ReadOnly<{|

packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.h

@@ -35,6 +35,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) UITextFieldViewMode clearButtonMode;
 
 @property (nonatomic, assign) BOOL caretHidden;
+@property (nonatomic, assign) CGFloat caretYOffset;
+@property (nonatomic, assign) CGFloat caretHeight;
 
 @property (nonatomic, strong, nullable) NSString *inputAccessoryViewID;
 

packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.m

@@ -13,6 +13,41 @@
 #import <React/RCTBackedTextInputDelegateAdapter.h>
 #import <React/RCTTextAttributes.h>
 
+// the UITextSelectionRect subclass needs to be created because the original version is not writable
+@interface CustomTextSelectionRect : UITextSelectionRect
+
+@property (nonatomic) CGRect _rect;
+@property (nonatomic) NSWritingDirection _writingDirection;
+@property (nonatomic) BOOL _containsStart; // Returns YES if the rect contains the start of the selection.
+@property (nonatomic) BOOL _containsEnd; // Returns YES if the rect contains the end of the selection.
+@property (nonatomic) BOOL _isVertical; // Returns YES if the rect is for vertically oriented text.
+
+@end
+
+@implementation CustomTextSelectionRect
+
+- (CGRect)rect {
+    return __rect;
+}
+
+- (NSWritingDirection)writingDirection {
+    return __writingDirection;
+}
+
+- (BOOL)containsStart {
+    return __containsStart;
+}
+
+- (BOOL)containsEnd {
+    return __containsEnd;
+}
+
+- (BOOL)isVertical {
+    return __isVertical;
+}
+
+@end
+
 @implementation RCTUITextView {
   UILabel *_placeholderView;
   UITextView *_detachedTextView;
@@ -307,11 +342,44 @@ - (void)_updatePlaceholder
 
 - (CGRect)caretRectForPosition:(UITextPosition *)position
 {
+  CGRect originalRect = [super caretRectForPosition:position];
+
   if (_caretHidden) {
     return CGRectZero;
   }
 
-  return [super caretRectForPosition:position];
+  if(_caretYOffset != 0) {
+    originalRect.origin.y += _caretYOffset;
+  }
+
+  if(_caretHeight != 0) {
+    originalRect.size.height = _caretHeight;
+  }
+
+  return originalRect;
+}
+
+- (NSArray *)selectionRectsForRange:(UITextRange *)range {
+  NSArray *superRects = [super selectionRectsForRange:range];
+  if(_caretYOffset != 0 && _caretHeight != 0) {
+    NSMutableArray *customTextSelectionRects = [NSMutableArray array];
+
+    for (UITextSelectionRect *rect in superRects) {
+        CustomTextSelectionRect *customTextRect = [[CustomTextSelectionRect alloc] init];
+
+        customTextRect._rect = CGRectMake(rect.rect.origin.x, rect.rect.origin.y + _caretYOffset, rect.rect.size.width, _caretHeight);
+        customTextRect._writingDirection = rect.writingDirection;
+        customTextRect._containsStart = rect.containsStart;
+        customTextRect._containsEnd = rect.containsEnd;
+        customTextRect._isVertical = rect.isVertical;
+        [customTextSelectionRects addObject:customTextRect];
+    }
+
+    return customTextSelectionRects;
+
+  }
+  return superRects;
+
 }
 
 #pragma mark - Utility Methods

packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h

@@ -28,6 +28,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL contextMenuHidden;
 @property (nonatomic, assign, getter=isEditable) BOOL editable;
 @property (nonatomic, assign) BOOL caretHidden;
+@property (nonatomic, assign) CGFloat caretYOffset;
+@property (nonatomic, assign) CGFloat caretHeight;
 @property (nonatomic, assign) BOOL enablesReturnKeyAutomatically;
 @property (nonatomic, assign) UITextFieldViewMode clearButtonMode;
 @property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled;

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m

@@ -44,6 +44,8 @@ @implementation RCTBaseTextInputViewManager {
 RCT_REMAP_VIEW_PROPERTY(selectionColor, backedTextInputView.tintColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(spellCheck, backedTextInputView.spellCheckingType, UITextSpellCheckingType)
 RCT_REMAP_VIEW_PROPERTY(caretHidden, backedTextInputView.caretHidden, BOOL)
+RCT_REMAP_VIEW_PROPERTY(caretYOffset, backedTextInputView.caretYOffset, CGFloat)
+RCT_REMAP_VIEW_PROPERTY(caretHeight, backedTextInputView.caretHeight, CGFloat)
 RCT_REMAP_VIEW_PROPERTY(clearButtonMode, backedTextInputView.clearButtonMode, UITextFieldViewMode)
 RCT_REMAP_VIEW_PROPERTY(scrollEnabled, backedTextInputView.scrollEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(secureTextEntry, backedTextInputView.secureTextEntry, BOOL)

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -152,6 +152,14 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _backedTextInputView.caretHidden = newTextInputProps.traits.caretHidden;
   }
 
+  if(newTextInputProps.traits.caretYOffset != oldTextInputProps.traits.caretYOffset) {
+    _backedTextInputView.caretYOffset = newTextInputProps.traits.caretYOffset;
+  }
+
+  if(newTextInputProps.traits.caretHeight != oldTextInputProps.traits.caretHeight) {
+    _backedTextInputView.caretHeight = newTextInputProps.traits.caretHeight;
+  }
+
   if (newTextInputProps.traits.clearButtonMode != oldTextInputProps.traits.clearButtonMode) {
     _backedTextInputView.clearButtonMode =
         RCTUITextFieldViewModeFromTextInputAccessoryVisibilityMode(newTextInputProps.traits.clearButtonMode);

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputUtils.mm

@@ -38,6 +38,8 @@ void RCTCopyBackedTextInput(
   toTextInput.keyboardAppearance = fromTextInput.keyboardAppearance;
   toTextInput.spellCheckingType = fromTextInput.spellCheckingType;
   toTextInput.caretHidden = fromTextInput.caretHidden;
+  toTextInput.caretYOffset = fromTextInput.caretYOffset;
+  toTextInput.caretHeight = fromTextInput.caretHeight;
   toTextInput.clearButtonMode = fromTextInput.clearButtonMode;
   toTextInput.scrollEnabled = fromTextInput.scrollEnabled;
   toTextInput.secureTextEntry = fromTextInput.secureTextEntry;

packages/react-native/ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/primitives.h

@@ -156,6 +156,18 @@ class TextInputTraits final {
    */
   bool caretHidden{false};
 
+  /*
+   * iOS-only (inherently iOS-specific)
+   * Default value: 0 with a default font.
+   */
+  int caretHeight{0};
+
+  /*
+   * iOS-only (inherently iOS-specific)
+   * Default value: 0 means that the caret offset will have the default value
+   */
+  int caretYOffset{0};
+
   /*
    * Controls the visibility of a `Clean` button.
    * iOS-only (implemented only on iOS for now)

packages/react-native/ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/propsConversions.h

@@ -76,6 +76,18 @@ static TextInputTraits convertRawProp(
       "caretHidden",
       sourceTraits.caretHidden,
       defaultTraits.caretHidden);
+  traits.caretYOffset = convertRawProp(
+    context,
+    rawProps,
+    "caretYOffset",
+    sourceTraits.caretYOffset,
+    defaultTraits.caretYOffset);
+  traits.caretHeight= convertRawProp(
+    context,
+    rawProps,
+    "caretHeight",
+    sourceTraits.caretHeight,
+    defaultTraits.caretHeight);
   traits.clearButtonMode = convertRawProp(
       context,
       rawProps,