Fix semi-transparent backgrounds on Text components (#23872)

Summary:
Fix #23849. When setting a semi-transparent background on text, it becomes obvious that we are drawing the background color twice. Since background color is handled by the view, we should not need to draw the glyph background color too.

| Before        | After   |
| ------------- |-------------|
|<img src="https://i.imgur.com/8JGpKTC.png" width="300">     | <img src="https://imgur.com/qjKU9Ze.png" width="300">

[iOS] [Fixed] - Semi-transparent backgrounds on text
Pull Request resolved: https://github.com/facebook/react-native/pull/23872

Differential Revision: D14430501

Pulled By: shergin

fbshipit-source-id: 19743415b2d20a3b941b1c80bd7b47144e929458

Libraries/Text/Text/RCTTextShadowView.m

@@ -35,6 +35,19 @@
   return self;
 }
 
+- (void)didSetProps:(NSArray<NSString *> *)changedProps
+{
+  [super didSetProps:changedProps];
+
+  // When applying a semi-transparent background color to Text component
+  // we must set the root text nodes text attribute background color to nil
+  // because the background color is drawn on the RCTTextView itself, as well
+  // as on the glphy background draw step. By setting this to nil, we allow
+  // the RCTTextView backgroundColor to be used, without affecting nested Text
+  // components.
+  self.textAttributes.backgroundColor = nil;
+}
+
 - (BOOL)isYogaLeafNode
 {
   return YES;

RNTester/js/TextExample.ios.js

@@ -434,6 +434,19 @@ exports.examples = [
       return <Text>{'test🙃'.substring(0, 5)}</Text>;
     },
   },
+  {
+    title: 'Transparent Background Color',
+    render: function() {
+      return (
+        <Text style={{backgroundColor: '#00000020', padding: 10}}>
+          Text in a gray box!
+          <Text style={{backgroundColor: 'red'}}>
+            Another text in a (inline) red box (which is inside the gray box).
+          </Text>
+        </Text>
+      );
+    },
+  },
   {
     title: 'Text metrics',
     render: function() {