Better text background behavior

Examples/UIExplorer/TextExample.ios.js

@@ -25,7 +25,7 @@ var {
 var Entity = React.createClass({
   render: function() {
     return (
-      <Text style={styles.entity}>
+      <Text style={{fontWeight: '500', color: '#527fe4'}}>
         {this.props.children}
       </Text>
     );
@@ -34,7 +34,12 @@ var Entity = React.createClass({
 
 var AttributeToggler = React.createClass({
   getInitialState: function() {
-    return {fontWeight: '500', fontSize: 15};
+    return {fontWeight: 'bold', fontSize: 15};
+  },
+  toggleWeight: function() {
+    this.setState({
+      fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
+    });
   },
   increaseSize: function() {
     this.setState({
@@ -42,22 +47,26 @@ var AttributeToggler = React.createClass({
     });
   },
   render: function() {
-    var curStyle = {fontSize: this.state.fontSize};
+    var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
     return (
-      <Text>
+      <View>
         <Text style={curStyle}>
           Tap the controls below to change attributes.
         </Text>
         <Text>
-          See how it will even work on{' '}
-          <Text style={curStyle}>
-            this nested text
-          </Text>
-          <Text onPress={this.increaseSize}>
-            {'>> Increase Size <<'}
-          </Text>
+          <Text>See how it will even work on <Text style={curStyle}>this nested text</Text></Text>
         </Text>
-      </Text>
+        <Text
+          style={{backgroundColor: '#ffaaaa', marginTop: 5}}
+          onPress={this.toggleWeight}>
+          Toggle Weight
+        </Text>
+        <Text
+          style={{backgroundColor: '#aaaaff', marginTop: 5}}
+          onPress={this.increaseSize}>
+          Increase Size
+        </Text>
+      </View>
     );
   }
 });
@@ -206,6 +215,12 @@ exports.examples = [
   render: function() {
     return (
       <View>
+        <Text>
+          auto (default) - english LTR
+        </Text>
+        <Text>
+          أحب اللغة العربية auto (default) - arabic RTL
+        </Text>
         <Text style={{textAlign: 'left'}}>
           left left left left left left left left left left left left left left left
         </Text>
@@ -282,43 +297,21 @@ exports.examples = [
   description: 'backgroundColor is inherited from all types of views.',
   render: function() {
     return (
-      <View style={{backgroundColor: 'yellow'}}>
-        <Text>
-          Yellow background inherited from View parent,
-          <Text style={{backgroundColor: '#ffaaaa'}}>
-            {' '}red background,
-            <Text style={{backgroundColor: '#aaaaff'}}>
-              {' '}blue background,
-              <Text>
-                {' '}inherited blue background,
-                <Text style={{backgroundColor: '#aaffaa'}}>
-                  {' '}nested green background.
-                </Text>
+      <Text style={{backgroundColor: 'yellow'}}>
+        Yellow container background,
+        <Text style={{backgroundColor: '#ffaaaa'}}>
+          {' '}red background,
+          <Text style={{backgroundColor: '#aaaaff'}}>
+            {' '}blue background,
+            <Text>
+              {' '}inherited blue background,
+              <Text style={{backgroundColor: '#aaffaa'}}>
+                {' '}nested green background.
               </Text>
             </Text>
           </Text>
         </Text>
-      </View>
-    );
-  },
-}, {
-  title: 'containerBackgroundColor attribute',
-  render: function() {
-    return (
-      <View style={{backgroundColor: 'yellow'}}>
-        <View style={{flexDirection: 'row', position: 'absolute', height: 80}}>
-          <View style={{backgroundColor: '#ffaaaa', width: 140}} />
-          <View style={{backgroundColor: '#aaaaff', width: 140}} />
-        </View>
-        <Text style={styles.backgroundColorText}>
-          Default containerBackgroundColor (inherited) + backgroundColor wash
-        </Text>
-        <Text style={[
-          styles.backgroundColorText,
-          {marginBottom: 5, containerBackgroundColor: 'transparent'}]}>
-          {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
-        </Text>
-      </View>
+      </Text>
     );
   },
 }, {
@@ -346,8 +339,4 @@ var styles = StyleSheet.create({
     marginBottom: 0,
     backgroundColor: 'rgba(100, 100, 100, 0.3)'
   },
-  entity: {
-    fontWeight: '500',
-    color: '#527fe4',
-  },
 });

Libraries/Text/RCTShadowText.h

@@ -25,7 +25,6 @@ extern NSString *const RCTReactTagAttributeName;
 @property (nonatomic, assign) NSUInteger numberOfLines;
 @property (nonatomic, assign) CGSize shadowOffset;
 @property (nonatomic, assign) NSTextAlignment textAlign;
-@property (nonatomic, strong) UIColor *textBackgroundColor;
 @property (nonatomic, assign) NSWritingDirection writingDirection;
 
 - (void)recomputeText;

Libraries/Text/RCTShadowText.m

@@ -131,7 +131,8 @@ static css_dim_t RCTMeasure(void *context, float width)
                                       fontSize:nil
                                     fontWeight:nil
                                      fontStyle:nil
-                                 letterSpacing:nil];
+                                 letterSpacing:nil
+                            useBackgroundColor:NO];
 }
 
 - (NSAttributedString *)_attributedStringWithFontFamily:(NSString *)fontFamily
@@ -139,6 +140,7 @@ static css_dim_t RCTMeasure(void *context, float width)
                                              fontWeight:(NSString *)fontWeight
                                               fontStyle:(NSString *)fontStyle
                                           letterSpacing:(NSNumber *)letterSpacing
+                                     useBackgroundColor:(BOOL)useBackgroundColor
 {
   if (![self isTextDirty] && _cachedAttributedString) {
     return _cachedAttributedString;
@@ -166,7 +168,7 @@ static css_dim_t RCTMeasure(void *context, float width)
   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 letterSpacing:letterSpacing]];
+      [attributedString appendAttributedString:[shadowText _attributedStringWithFontFamily:fontFamily fontSize:fontSize fontWeight:fontWeight fontStyle:fontStyle letterSpacing:letterSpacing useBackgroundColor:YES]];
     } else if ([child isKindOfClass:[RCTShadowRawText class]]) {
       RCTShadowRawText *shadowRawText = (RCTShadowRawText *)child;
       [attributedString appendAttributedString:[[NSAttributedString alloc] initWithString:[shadowRawText text] ?: @""]];
@@ -183,8 +185,8 @@ static css_dim_t RCTMeasure(void *context, float width)
   if (_isHighlighted) {
     [self _addAttribute:RCTIsHighlightedAttributeName withValue:@YES toAttributedString:attributedString];
   }
-  if (_textBackgroundColor) {
-    [self _addAttribute:NSBackgroundColorAttributeName withValue:_textBackgroundColor toAttributedString:attributedString];
+  if (useBackgroundColor && self.backgroundColor) {
+    [self _addAttribute:NSBackgroundColorAttributeName withValue:self.backgroundColor toAttributedString:attributedString];
   }
 
   UIFont *font = [RCTConvert UIFont:nil withFamily:fontFamily size:fontSize weight:fontWeight style:fontStyle];
@@ -271,6 +273,12 @@ static css_dim_t RCTMeasure(void *context, float width)
   [self cssNode]->children_count = 0;
 }
 
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+  super.backgroundColor = backgroundColor;
+  [self dirtyText];
+}
+
 #define RCT_TEXT_PROPERTY(setProp, ivar, type) \
 - (void)set##setProp:(type)value;              \
 {                                              \
@@ -289,7 +297,6 @@ RCT_TEXT_PROPERTY(LineHeight, _lineHeight, CGFloat)
 RCT_TEXT_PROPERTY(NumberOfLines, _numberOfLines, NSUInteger)
 RCT_TEXT_PROPERTY(ShadowOffset, _shadowOffset, CGSize)
 RCT_TEXT_PROPERTY(TextAlign, _textAlign, NSTextAlignment)
-RCT_TEXT_PROPERTY(TextBackgroundColor, _textBackgroundColor, UIColor *)
 RCT_TEXT_PROPERTY(WritingDirection, _writingDirection, NSWritingDirection)
 
 @end

Libraries/Text/RCTTextManager.m

@@ -32,11 +32,6 @@ RCT_EXPORT_MODULE()
   return [[RCTShadowText alloc] init];
 }
 
-#pragma mark - View properties
-
-RCT_IGNORE_VIEW_PROPERTY(backgroundColor);
-RCT_REMAP_VIEW_PROPERTY(containerBackgroundColor, backgroundColor, UIColor)
-
 #pragma mark - Shadow properties
 
 RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection)
@@ -50,8 +45,6 @@ RCT_EXPORT_SHADOW_PROPERTY(letterSpacing, CGFloat)
 RCT_EXPORT_SHADOW_PROPERTY(lineHeight, CGFloat)
 RCT_EXPORT_SHADOW_PROPERTY(shadowOffset, CGSize)
 RCT_EXPORT_SHADOW_PROPERTY(textAlign, NSTextAlignment)
-RCT_REMAP_SHADOW_PROPERTY(backgroundColor, textBackgroundColor, UIColor)
-RCT_REMAP_SHADOW_PROPERTY(containerBackgroundColor, backgroundColor, UIColor)
 RCT_EXPORT_SHADOW_PROPERTY(numberOfLines, NSUInteger)
 
 - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)shadowViewRegistry

Libraries/Text/Text.js

@@ -97,7 +97,7 @@ var Text = React.createClass({
     /**
      * Invoked on mount and layout changes with
      *
-     *   {nativeEvent: { layout: {x, y, width, height}}}.
+     *   {nativeEvent: {layout: {x, y, width, height}}}.
      */
      onLayout: React.PropTypes.func,
   },

Libraries/Text/TextStylePropTypes.js

@@ -25,8 +25,7 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
   fontStyle: ReactPropTypes.oneOf(['normal', 'italic']),
   lineHeight: ReactPropTypes.number,
   color: ReactPropTypes.string,
-  containerBackgroundColor: ReactPropTypes.string,
-  // NOTE: "justify" is supported only on iOS
+  // NOTE: 'justify is supported only on iOS
   textAlign: ReactPropTypes.oneOf(
     ['auto' /*default*/, 'left', 'right', 'center', 'justify']
   ),