[Text] Add textDecoration style attributes

Examples/UIExplorer/TextExample.ios.js

@@ -176,6 +176,44 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Text Decoration',
+  render: function() {
+    return (
+      <View>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}>
+          Solid underline
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
+          Double underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
+          Dashed underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
+          Dotted underline with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'none'}}>
+          None textDecoration
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
+          Solid line-through
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
+          Double line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
+          Dashed line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
+          Dotted line-through with custom color
+        </Text>
+        <Text style={{textDecorationLine: 'underline line-through'}}>
+          Both underline and line-through
+        </Text>
+      </View>
+    );
+  },
 }, {
   title: 'Nested',
   description: 'Nested text components will inherit the styles of their ' +

Libraries/Text/RCTShadowText.h

@@ -8,6 +8,7 @@
  */
 
 #import "RCTShadowView.h"
+#import "RCTTextDecorationType.h"
 
 extern NSString *const RCTIsHighlightedAttributeName;
 extern NSString *const RCTReactTagAttributeName;
@@ -27,6 +28,9 @@ extern NSString *const RCTReactTagAttributeName;
 @property (nonatomic, assign) NSTextAlignment textAlign;
 @property (nonatomic, strong) UIColor *textBackgroundColor;
 @property (nonatomic, assign) NSWritingDirection writingDirection;
+@property (nonatomic, strong) UIColor *textDecorationColor;
+@property (nonatomic, assign) NSUnderlineStyle textDecorationStyle;
+@property (nonatomic, assign) RCTTextDecorationType textDecorationLine;
 
 - (void)recomputeText;
 

Libraries/Text/RCTShadowText.m

@@ -250,6 +250,22 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib
                              value:paragraphStyle
                              range:(NSRange){0, attributedString.length}];
   }
+
+
+  //underline and line-through
+  _textDecorationStyle = _textDecorationStyle ? : NSUnderlineStyleSingle;
+  if(_textDecorationLine == RCTTextDecorationTypeUnderline || _textDecorationLine == RCTTextDecorationTypeUnderlineStrikethrough) {
+    [self _addAttribute: NSUnderlineStyleAttributeName withValue:[NSNumber numberWithInt:_textDecorationStyle] toAttributedString:attributedString];
+  }
+  if(_textDecorationLine == RCTTextDecorationTypeStrikethrough || _textDecorationLine == RCTTextDecorationTypeUnderlineStrikethrough){
+    [self _addAttribute: NSStrikethroughStyleAttributeName withValue:[NSNumber numberWithInt:_textDecorationStyle] toAttributedString:attributedString];
+  }
+
+  if(_textDecorationColor) {
+    [self _addAttribute: NSStrikethroughColorAttributeName withValue: _textDecorationColor toAttributedString:attributedString];
+    [self _addAttribute: NSUnderlineColorAttributeName withValue: _textDecorationColor toAttributedString:attributedString];
+  }
+
 }
 
 - (void)fillCSSNode:(css_node_t *)node
@@ -291,5 +307,8 @@ - (void)set##setProp:(type)value;              \
 RCT_TEXT_PROPERTY(TextAlign, _textAlign, NSTextAlignment)
 RCT_TEXT_PROPERTY(TextBackgroundColor, _textBackgroundColor, UIColor *)
 RCT_TEXT_PROPERTY(WritingDirection, _writingDirection, NSWritingDirection)
+RCT_TEXT_PROPERTY(TextDecorationStyle, _textDecorationStyle, NSUnderlineStyle);
+RCT_TEXT_PROPERTY(TextDecorationColor, _textDecorationColor, UIColor *);
+RCT_TEXT_PROPERTY(TextDecorationLine, _textDecorationLine, RCTTextDecorationType);
 
 @end

Libraries/Text/RCTTextManager.m

@@ -40,6 +40,9 @@ - (RCTShadowView *)shadowView
 #pragma mark - Shadow properties
 
 RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection)
+RCT_EXPORT_SHADOW_PROPERTY(textDecorationStyle, NSUnderlineStyle)
+RCT_EXPORT_SHADOW_PROPERTY(textDecorationColor, UIColor)
+RCT_EXPORT_SHADOW_PROPERTY(textDecorationLine, RCTTextDecorationType)
 RCT_EXPORT_SHADOW_PROPERTY(color, UIColor)
 RCT_EXPORT_SHADOW_PROPERTY(fontFamily, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(fontSize, CGFloat)

Libraries/Text/TextStylePropTypes.js

@@ -34,6 +34,13 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
     ['auto' /*default*/, 'ltr', 'rtl']
   ),
   letterSpacing: ReactPropTypes.number,
+  textDecorationLine:ReactPropTypes.oneOf(
+    ['none' /*default*/, 'underline', 'line-through', 'underline line-through']
+  ),
+  textDecorationStyle:ReactPropTypes.oneOf(
+    ['solid' /*default*/, 'double', 'dotted','dashed']
+  ),
+  textDecorationColor: ReactPropTypes.string,
 });
 
 // Text doesn't support padding correctly (#4841912)

React/Base/RCTConvert.h

@@ -12,10 +12,12 @@
 
 #import "Layout.h"
 #import "RCTAnimationType.h"
+#import "RCTTextDecorationType.h"
 #import "RCTDefines.h"
 #import "RCTLog.h"
 #import "RCTPointerEvents.h"
 
+
 /**
  * This class provides a collection of conversion functions for mapping
  * JSON objects to native types and classes. These are useful when writing
@@ -51,6 +53,7 @@
 + (NSTimeInterval)NSTimeInterval:(id)json;
 
 + (NSTextAlignment)NSTextAlignment:(id)json;
++ (NSUnderlineStyle)NSUnderlineStyle:(id)json;
 + (NSWritingDirection)NSWritingDirection:(id)json;
 + (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json;
 + (UITextFieldViewMode)UITextFieldViewMode:(id)json;
@@ -120,6 +123,7 @@ typedef BOOL css_clip_t;
 
 + (RCTPointerEvents)RCTPointerEvents:(id)json;
 + (RCTAnimationType)RCTAnimationType:(id)json;
++ (RCTTextDecorationType)RCTTextDecorationType:(id)json;
 
 @end
 

React/Base/RCTConvert.m

@@ -202,6 +202,20 @@ + (NSDate *)NSDate:(id)json
   @"justify": @(NSTextAlignmentJustified),
 }), NSTextAlignmentNatural, integerValue)
 
+RCT_ENUM_CONVERTER(NSUnderlineStyle, (@{
+  @"solid": @(NSUnderlineStyleSingle),
+  @"double": @(NSUnderlineStyleDouble),
+  @"dotted": @(NSUnderlinePatternDot | NSUnderlineStyleSingle),
+  @"dashed": @(NSUnderlinePatternDash | NSUnderlineStyleSingle),
+}), NSUnderlineStyleSingle, integerValue)
+
+RCT_ENUM_CONVERTER(RCTTextDecorationType, (@{
+  @"none": @(RCTTextDecorationTypeNone),
+  @"underline": @(RCTTextDecorationTypeUnderline),
+  @"line-through": @(RCTTextDecorationTypeStrikethrough),
+  @"underline line-through": @(RCTTextDecorationTypeUnderlineStrikethrough),
+}), RCTTextDecorationTypeNone, integerValue)
+
 RCT_ENUM_CONVERTER(NSWritingDirection, (@{
   @"auto": @(NSWritingDirectionNatural),
   @"ltr": @(NSWritingDirectionLeftToRight),

React/React.xcodeproj/project.pbxproj

@@ -226,6 +226,7 @@
 		83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTouchHandler.m; sourceTree = "<group>"; };
 		83CBBACA1A6023D300E9B192 /* RCTConvert.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTConvert.h; sourceTree = "<group>"; };
 		83CBBACB1A6023D300E9B192 /* RCTConvert.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert.m; sourceTree = "<group>"; };
+		E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationType.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTTextDecorationType.h; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -361,6 +362,7 @@
 				13B080241A694A8400A75B9A /* RCTWrapperViewController.m */,
 				13E067531A70F44B002CDEE1 /* UIView+React.h */,
 				13E067541A70F44B002CDEE1 /* UIView+React.m */,
+				E3BBC8EB1ADE6F47001BBD81 /* RCTTextDecorationType.h */,
 			);
 			path = Views;
 			sourceTree = "<group>";

React/Views/RCTTextDecorationType.h

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <Foundation/Foundation.h>
+
+typedef NS_ENUM(NSInteger, RCTTextDecorationType) {
+  RCTTextDecorationTypeNone = 0,
+  RCTTextDecorationTypeUnderline,
+  RCTTextDecorationTypeStrikethrough,
+  RCTTextDecorationTypeUnderlineStrikethrough,
+};