feat: [iOS] add caretHeight and caretYoffset to TextInput component

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

@@ -124,6 +124,8 @@ const RCTTextInputViewConfig = {
     editable: true,
     inputAccessoryViewID: true,
     caretHidden: true,
+    caretHeight: true,
+    caretYOffset: true,
     enablesReturnKeyAutomatically: true,
     placeholderTextColor: {
       process: require('../../StyleSheet/processColor').default,

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

@@ -668,6 +668,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

@@ -591,6 +591,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

@@ -365,6 +365,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.mm

@@ -13,6 +13,33 @@
 #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, assign) CGRect rect;
+@property (nonatomic, assign) NSWritingDirection writingDirection;
+@property (nonatomic, assign) BOOL containsStart; // Returns YES if the rect contains the start of the selection.
+@property (nonatomic, assign) BOOL containsEnd; // Returns YES if the rect contains the end of the selection.
+@property (nonatomic, assign) BOOL isVertical; // Returns YES if the rect is for vertically oriented text.
+
+@end
+
+@implementation CustomTextSelectionRect {
+    CGRect _customRect;
+    NSWritingDirection _customWritingDirection;
+    BOOL _customContainsStart;
+    BOOL _customContainsEnd;
+    BOOL _customIsVertical;
+}
+
+@synthesize rect = _customRect;
+@synthesize writingDirection = _customWritingDirection;
+@synthesize containsStart = _customContainsStart;
+@synthesize containsEnd = _customContainsEnd;
+@synthesize isVertical = _customIsVertical;
+
+@end
+
 @implementation RCTUITextView {
   UILabel *_placeholderView;
   UITextView *_detachedTextView;
@@ -307,11 +334,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.mm

@@ -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/Libraries/Text/TextInput/Singleline/RCTUITextField.h

@@ -22,6 +22,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, weak) id<RCTBackedTextInputDelegate> textInputDelegate;
 
 @property (nonatomic, assign) BOOL caretHidden;
+@property (nonatomic, assign) BOOL caretYOffset;
+@property (nonatomic, assign) BOOL caretHeight;
 @property (nonatomic, assign) BOOL contextMenuHidden;
 @property (nonatomic, assign, readonly) BOOL textWasPasted;
 @property (nonatomic, assign, readonly) BOOL dictationRecognizing;

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

@@ -151,6 +151,14 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     _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/platform/ios/react/renderer/components/iostextinput/primitives.h

@@ -155,6 +155,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/platform/ios/react/renderer/components/iostextinput/propsConversions.h

@@ -75,6 +75,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,