Add letterSpacing style property for Text

Fixes #457
facebook · Mar 30, 2015 · d1451fe · d1451fe
1 parent f3cd27c
commit d1451fe
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/Libraries/Text/RCTShadowText.h b/Libraries/Text/RCTShadowText.h
@@ -22,6 +22,7 @@ extern NSString *const RCTReactTagAttributeName;
 @property (nonatomic, copy) NSString *fontWeight;
 @property (nonatomic, copy) NSString *fontStyle;
 @property (nonatomic, assign) BOOL isHighlighted;
+@property (nonatomic, assign) CGFloat letterSpacing;
 @property (nonatomic, assign) CGFloat lineHeight;
 @property (nonatomic, assign) NSInteger maxNumberOfLines;
 @property (nonatomic, assign) CGSize shadowOffset;

diff --git a/Libraries/Text/RCTShadowText.m b/Libraries/Text/RCTShadowText.m
@@ -40,6 +40,7 @@ - (instancetype)init
 {
   if ((self = [super init])) {
     _fontSize = NAN;
+    _letterSpacing = NAN;
     _isHighlighted = NO;
   }
   return self;
@@ -50,13 +51,15 @@ - (NSAttributedString *)attributedString
   return [self _attributedStringWithFontFamily:nil
                                       fontSize:0
                                     fontWeight:nil
-                                     fontStyle:nil];
+                                     fontStyle:nil
+                                 letterSpacing:0];
 }
 
 - (NSAttributedString *)_attributedStringWithFontFamily:(NSString *)fontFamily
                                                fontSize:(CGFloat)fontSize
                                              fontWeight:(NSString *)fontWeight
                                               fontStyle:(NSString *)fontStyle
+                                          letterSpacing:(CGFloat)letterSpacing
 {
   if (![self isTextDirty] && _cachedAttributedString) {
     return _cachedAttributedString;
@@ -74,12 +77,15 @@ - (NSAttributedString *)_attributedStringWithFontFamily:(NSString *)fontFamily
   if (_fontFamily) {
     fontFamily = _fontFamily;
   }
+  if (!isnan(_letterSpacing)) {
+    letterSpacing = _letterSpacing;
+  }
 
   NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] init];
   for (RCTShadowView *child in [self reactSubviews]) {
     if ([child isKindOfClass:[RCTShadowText class]]) {
       RCTShadowText *shadowText = (RCTShadowText *)child;
-      [attributedString appendAttributedString:[shadowText _attributedStringWithFontFamily:fontFamily fontSize:fontSize fontWeight:fontWeight fontStyle:fontStyle]];
+      [attributedString appendAttributedString:[shadowText _attributedStringWithFontFamily:fontFamily fontSize:fontSize fontWeight:fontWeight fontStyle:fontStyle letterSpacing:letterSpacing]];
     } else if ([child isKindOfClass:[RCTShadowRawText class]]) {
       RCTShadowRawText *shadowRawText = (RCTShadowRawText *)child;
       [attributedString appendAttributedString:[[NSAttributedString alloc] initWithString:[shadowRawText text] ?: @""]];
@@ -102,6 +108,7 @@ - (NSAttributedString *)_attributedStringWithFontFamily:(NSString *)fontFamily
 
   _font = [RCTConvert UIFont:nil withFamily:fontFamily size:@(fontSize) weight:fontWeight style:fontStyle];
   [self _addAttribute:NSFontAttributeName withValue:_font toAttributedString:attributedString];
+  [self _addAttribute:NSKernAttributeName withValue:@(letterSpacing) toAttributedString:attributedString];
   [self _addAttribute:RCTReactTagAttributeName withValue:self.reactTag toAttributedString:attributedString];
   [self _setParagraphStyleOnAttributedString:attributedString];
 
@@ -200,6 +207,7 @@ - (void)set##setProp:(type)value;              \
 RCT_TEXT_PROPERTY(FontFamily, _fontFamily, NSString *);
 RCT_TEXT_PROPERTY(FontSize, _fontSize, CGFloat);
 RCT_TEXT_PROPERTY(FontWeight, _fontWeight, NSString *);
+RCT_TEXT_PROPERTY(LetterSpacing, _letterSpacing, CGFloat);
 RCT_TEXT_PROPERTY(LineHeight, _lineHeight, CGFloat);
 RCT_TEXT_PROPERTY(MaxNumberOfLines, _maxNumberOfLines, NSInteger);
 RCT_TEXT_PROPERTY(ShadowOffset, _shadowOffset, CGSize);

diff --git a/Libraries/Text/RCTTextManager.m b/Libraries/Text/RCTTextManager.m
@@ -52,6 +52,7 @@ - (RCTShadowView *)shadowView
 RCT_EXPORT_SHADOW_PROPERTY(fontWeight, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(fontStyle, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(isHighlighted, BOOL)
+RCT_EXPORT_SHADOW_PROPERTY(letterSpacing, CGFloat)
 RCT_EXPORT_SHADOW_PROPERTY(lineHeight, CGFloat)
 RCT_EXPORT_SHADOW_PROPERTY(maxNumberOfLines, NSInteger)
 RCT_EXPORT_SHADOW_PROPERTY(shadowOffset, CGSize)

diff --git a/Libraries/Text/TextStylePropTypes.js b/Libraries/Text/TextStylePropTypes.js
@@ -32,6 +32,7 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
   writingDirection: ReactPropTypes.oneOf(
     ['auto' /*default*/, 'ltr', 'rtl']
   ),
+  letterSpacing: ReactPropTypes.number
 });
 
 // Text doesn't support padding correctly (#4841912)