feat: Add Custom Textfield (RN v0.68)

Gemfile.lock

@@ -3,39 +3,38 @@ GEM
   specs:
     CFPropertyList (3.0.6)
       rexml
-    activesupport (6.1.7.2)
+    activesupport (7.0.4.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    addressable (2.8.1)
+    addressable (2.8.4)
       public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
     claide (1.1.0)
-    cocoapods (1.11.3)
+    cocoapods (1.12.1)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.11.3)
+      cocoapods-core (= 1.12.1)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-downloader (>= 1.6.0, < 2.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
       cocoapods-try (>= 1.1.0, < 2.0)
       colored2 (~> 3.1)
       escape (~> 0.0.4)
       fourflusher (>= 2.3.0, < 3.0)
       gh_inspector (~> 1.0)
       molinillo (~> 0.8.0)
       nap (~> 1.0)
-      ruby-macho (>= 1.0, < 3.0)
+      ruby-macho (>= 2.3.0, < 3.0)
       xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.11.3)
-      activesupport (>= 5.0, < 7)
+    cocoapods-core (1.12.1)
+      activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
       concurrent-ruby (~> 1.1)
@@ -54,7 +53,7 @@ GEM
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.2.0)
+    concurrent-ruby (1.2.2)
     escape (0.0.4)
     ethon (0.16.0)
       ffi (>= 1.15.0)
@@ -63,10 +62,10 @@ GEM
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.12.0)
+    i18n (1.13.0)
       concurrent-ruby (~> 1.0)
     json (2.6.3)
-    minitest (5.17.0)
+    minitest (5.18.0)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
@@ -85,7 +84,6 @@ GEM
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
       rexml (~> 3.2.4)
-    zeitwerk (2.6.6)
 
 PLATFORMS
   ruby

Libraries/Core/ReactNativeVersion.js

@@ -12,6 +12,6 @@
 exports.version = {
   major: 0,
   minor: 68,
-  patch: 6,
+  patch: 7,
   prerelease: null,
 };

Libraries/Text/RCTTextAttributes.m

@@ -135,10 +135,6 @@ - (NSParagraphStyle *)effectiveParagraphStyle
     attributes[NSForegroundColorAttributeName] = effectiveForegroundColor;
   }
 
-  if (_backgroundColor || !isnan(_opacity)) {
-    attributes[NSBackgroundColorAttributeName] = self.effectiveBackgroundColor;
-  }
-
   // Kerning
   if (!isnan(_letterSpacing)) {
     attributes[NSKernAttributeName] = @(_letterSpacing);
@@ -169,6 +165,13 @@ - (NSParagraphStyle *)effectiveParagraphStyle
     attributes[NSUnderlineColorAttributeName] = _textDecorationColor ?: effectiveForegroundColor;
   }
 
+  // @Taskadev1 Turn background highlight into underline highlight
+  if (_backgroundColor || !isnan(_opacity)) {
+    isTextDecorationEnabled = YES;
+    attributes[NSUnderlineColorAttributeName] = self.effectiveBackgroundColor;
+    attributes[NSUnderlineStyleAttributeName] = @(NSUnderlineStyleThick + NSUnderlineStyleSingle);
+  }
+
   // Shadow
   if (!isnan(_textShadowRadius)) {
     NSShadow *shadow = [NSShadow new];

Libraries/Text/Text/RCTTextShadowView.m

@@ -15,6 +15,50 @@
 #import "NSTextStorage+FontScaling.h"
 #import <React/RCTTextView.h>
 
+// @Taskadev1 A custom layout manager to support gapless underlined text
+@interface CustomLayoutManager : NSLayoutManager {
+}
+  - (void)drawUnderlineForRect:(CGRect)rect;
+  - (void)drawUnderlineForGlyphRange:(NSRange)glyphRange 
+                     underlineType:(NSUnderlineStyle)underlineVal 
+                    baselineOffset:(CGFloat)baselineOffset 
+                  lineFragmentRect:(CGRect)lineRect 
+            lineFragmentGlyphRange:(NSRange)lineGlyphRange 
+                   containerOrigin:(CGPoint)containerOrigin;
+@end
+
+@implementation CustomLayoutManager
+
+- (void)drawUnderlineForRect:(CGRect)rect
+{
+  UIBezierPath *path = [UIBezierPath new];
+  path.lineWidth = 3.5;
+  [path moveToPoint: CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect))];
+  [path addLineToPoint: CGPointMake(CGRectGetMaxX(rect), CGRectGetMaxY(rect))];
+  [path stroke];
+}
+
+- (void)drawUnderlineForGlyphRange:(NSRange)glyphRange 
+                     underlineType:(NSUnderlineStyle)underlineVal 
+                    baselineOffset:(CGFloat)baselineOffset 
+                  lineFragmentRect:(CGRect)lineRect 
+            lineFragmentGlyphRange:(NSRange)lineGlyphRange 
+                   containerOrigin:(CGPoint)containerOrigin
+{
+  NSTextContainer *textContainer = [self textContainerForGlyphAtIndex:glyphRange.location effectiveRange: nil];
+  CGRect boundingRect = [self boundingRectForGlyphRange:glyphRange inTextContainer:textContainer];
+  CGRect offsetRect = CGRectOffset(boundingRect, containerOrigin.x, containerOrigin.y );
+  UIColor *color = [self.textStorage attribute:NSUnderlineColorAttributeName atIndex:glyphRange.location effectiveRange: nil];
+
+  if (color) {
+    [color setStroke];
+  }
+
+  [self drawUnderlineForRect:offsetRect];
+}
+
+@end
+
 @implementation RCTTextShadowView
 {
   __weak RCTBridge *_bridge;
@@ -232,7 +276,7 @@ - (NSTextStorage *)textStorageAndLayoutManagerThatFitsSize:(CGSize)size
     _maximumNumberOfLines > 0 ? _lineBreakMode : NSLineBreakByClipping;
   textContainer.maximumNumberOfLines = _maximumNumberOfLines;
 
-  NSLayoutManager *layoutManager = [NSLayoutManager new];
+  CustomLayoutManager *layoutManager = [CustomLayoutManager new];
   layoutManager.usesFontLeading = NO;
   [layoutManager addTextContainer:textContainer];
 

Libraries/Text/TextInput/Multiline/RCTUITextView.h

@@ -34,6 +34,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) UITextFieldViewMode clearButtonMode;
 
 @property (nonatomic, assign) BOOL caretHidden;
+//@Taskadev1 Editor input prop declaration
+@property (nonatomic, assign) BOOL editorInput;
 
 @property (nonatomic, strong, nullable) NSString *inputAccessoryViewID;
 

Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m

@@ -222,6 +222,11 @@ - (BOOL)textView:(__unused UITextView *)textView shouldChangeTextInRange:(NSRang
   if (newText == nil) {
     return NO;
   }
+
+  //@Taskadev1 Prevent enter for editor input
+  if (_backedTextInputView.editorInput && [text isEqualToString:@"\n"]) {
+    return NO;
+  }
 
   if ([newText isEqualToString:text]) {
     _textDidChangeIsComing = YES;

Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h

@@ -27,6 +27,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL contextMenuHidden;
 @property (nonatomic, assign, getter=isEditable) BOOL editable;
 @property (nonatomic, assign) BOOL caretHidden;
+//@Taskadev1 Editor input declaration
+@property (nonatomic, assign) BOOL editorInput;
 @property (nonatomic, assign) BOOL enablesReturnKeyAutomatically;
 @property (nonatomic, assign) UITextFieldViewMode clearButtonMode;
 @property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled;

Libraries/Text/TextInput/RCTBaseTextInputView.h

@@ -46,6 +46,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL selectTextOnFocus;
 @property (nonatomic, assign) BOOL clearTextOnFocus;
 @property (nonatomic, assign) BOOL secureTextEntry;
+//@Taskadev1 Editor input prop declaration
+@property (nonatomic, assign) BOOL editorInput;
 @property (nonatomic, copy) RCTTextSelection *selection;
 @property (nonatomic, strong, nullable) NSNumber *maxLength;
 @property (nonatomic, copy, nullable) NSAttributedString *attributedText;

Libraries/Text/TextInput/RCTBaseTextInputViewManager.m

@@ -48,6 +48,8 @@ @implementation RCTBaseTextInputViewManager
 RCT_REMAP_VIEW_PROPERTY(clearButtonMode, backedTextInputView.clearButtonMode, UITextFieldViewMode)
 RCT_REMAP_VIEW_PROPERTY(scrollEnabled, backedTextInputView.scrollEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(secureTextEntry, backedTextInputView.secureTextEntry, BOOL)
+//@Taskadev1 Editor input map property
+RCT_REMAP_VIEW_PROPERTY(editorInput, backedTextInputView.editorInput, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(autoFocus, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)

React/Base/RCTVersion.m

@@ -23,7 +23,7 @@
     __rnVersion = @{
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(68),
-                  RCTVersionPatch: @(6),
+                  RCTVersionPatch: @(7),
                   RCTVersionPrerelease: [NSNull null],
                   };
   });

ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.68.6
+VERSION_NAME=0.68.7
 GROUP=com.facebook.react
 
 POM_NAME=ReactNative

ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.java

@@ -17,6 +17,6 @@ public class ReactNativeVersion {
   public static final Map<String, Object> VERSION = MapBuilder.<String, Object>of(
       "major", 0,
       "minor", 68,
-      "patch", 6,
+      "patch", 7,
       "prerelease", null);
 }

ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLetterSpacingSpan.java

@@ -37,6 +37,10 @@ public void updateMeasureState(TextPaint paint) {
     apply(paint);
   }
 
+  public float getSpacing() {
+    return mLetterSpacing;
+  }
+
   private void apply(TextPaint paint) {
     if (!Float.isNaN(mLetterSpacing)) {
       paint.setLetterSpacing(mLetterSpacing);

ReactAndroid/src/main/java/com/facebook/react/views/text/CustomStyleSpan.java

@@ -71,6 +71,10 @@ public int getWeight() {
     return mFontFamily;
   }
 
+  public @Nullable String getFontFeatureSettings() {
+    return mFeatureSettings;
+  }
+
   private static void apply(
       Paint paint,
       int style,

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

@@ -174,9 +174,11 @@ private static void buildSpannedFromShadowNode(
             new SetSpanOperation(start, end, new ReactForegroundColorSpan(textShadowNode.mColor)));
       }
       if (textShadowNode.mIsBackgroundColorSet) {
-        ops.add(
-            new SetSpanOperation(
-                start, end, new ReactBackgroundColorSpan(textShadowNode.mBackgroundColor)));
+        // @Taskadev1 Draw underline highlight
+        ops.add(new SetSpanOperation(
+                start,
+                end,
+                new UnderlineStyleSpan(textShadowNode.mBackgroundColor)));
       }
       float effectiveLetterSpacing = textAttributes.getEffectiveLetterSpacing();
       if (!Float.isNaN(effectiveLetterSpacing)

ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java

@@ -136,9 +136,6 @@ private static void buildSpannableFromFragment(
                   start, end, new ReactForegroundColorSpan(textAttributes.mColor)));
         }
         if (textAttributes.mIsBackgroundColorSet) {
-          ops.add(
-              new SetSpanOperation(
-                  start, end, new ReactBackgroundColorSpan(textAttributes.mBackgroundColor)));
         }
         if (!Float.isNaN(textAttributes.getLetterSpacing())) {
           ops.add(

ReactAndroid/src/main/java/com/facebook/react/views/text/UnderlineStyleSpan.java

@@ -0,0 +1,24 @@
+package com.facebook.react.views.text;
+
+import android.text.TextPaint;
+import android.text.style.CharacterStyle;
+import java.lang.reflect.Method;
+
+// @Taskadev1 Color underline highlight span
+public class UnderlineStyleSpan extends CharacterStyle implements ReactSpan {
+  private final int mColor;
+
+  public UnderlineStyleSpan(final int color) {
+      mColor = color;
+  }
+
+  @Override
+  public void updateDrawState(TextPaint textPaint) {
+    try {
+      final Method method = TextPaint.class.getMethod("setUnderlineText", Integer.TYPE, Float.TYPE);
+      method.invoke(textPaint, mColor, 8.0f);
+    } catch (final Exception e) {
+      textPaint.setUnderlineText(true);
+    }
+  }
+}