Support background colors on <Text> components

[KAnder425]

Proposal: Support background colors on <Text> components

Summary

Both iOS and Android RN support the ability to set the background color of a <Text> element. Without this support in RNW, we have to resort to wrapping Text in Views in order to get the same effect. This approach quickly runs into complex Yoga/Flexbox layout issues that prevent its use in all but the most basic scenarios.

This is not a new issue. See #698 and #1949 for background.

Motivation

I'm implementing a search highlighting feature in our app. I need to apply a highlight background on specific runs of text in several elements of the app. If I use nested <Text> elements to apply styling like 'underline' to the various runs of text, everything looks stellar. When I switch to nested <View> elements to apply a background color I run into seemingly insurmountable issues with Flexbox/Yoga layout and all those nested Views.

I'm (somewhat) sure I'll surmount those issues at some point using the View/Text workaround, but it would be so much better if I could just do what iOS and Android already support.

Basic example

Here's an example of what I'd like to do....

import React, { Component } from 'react';
import { View, Text } from 'react-native';

// This is the version using Text runs that works great in iOS and Android
export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={{flex: 1, height: 20, maxWidth: 250, paddingTop: 200, flexDirection: 'row'}} >
        <Text numberOfLines={1}  ellipsizeMode={'tail'}>
          <Text style={{fontWeight: 'bold'}}>
            I am bold&nbsp;
          </Text>
          <Text style={{backgroundColor: 'yellow', color: 'red', fontWeight: 'bold'}}>
            and super glowing red (this should trunctate at 250)&nbsp;
          </Text>
          <Text style={{fontWeight: 'bold'}}>
            and bold again forever.
          </Text>
        </Text>
      </View>
    );
  }
}

Open Questions

I realize that this issue is due to a lack of support for background color in XAML's TextBlock but perhaps we can find a creative way to workaround that in RNW native code?

[harinikmsft]

This is a good topic to discuss during an upcoming checkpoint review, I will queue it up.

The most elegant way to solve this may be to improve the XAML TextBlock to be able to take a background which will likely take a while (needs WinUI3+).

[harinikmsft]

Per @kmelmon, TextBlock.TextHighlighters property in XAML might be the right native property that helps address this scenario.

I looked out of curiosity - Android has an analogous TextView.textColorHighlight property and the scenario appears to be possible to accomplish in iOS as well by applying a background color to an NSAttributedString combined with UITextView's attributedText props.

This may be a good candidate to surface as a cross-platform prop for react-native.

[rectified95]

FYI @KAnder425 I've just submitted a PR implementing what you requested - backgroundColor for arbitrarily nested <Text> elements. I hope to have it merged soon.