[iOS] Fix semi-transparent backgrounds on Text components

[ericlewis]

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

Changelog

[iOS] [Fixed] - Semi-transparent backgrounds on text

Test Plan

Added a new section to iOS RNTester Text Examples, CI passes. Also confirmed the TextExample snapshot tests passed with this change before I added the new test & snapshot.

[ericlewis]

the test failing seems unrelated. e2e test for DatePickerIOS.

[facebook-github-bot]

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[shergin]

❤️
The problem does exist, but that's not a proper place to fix it. We should not apply background color for outer VirtualText.
To be sure, create a test with nested background like this:

<Text style={{backgroundColor: '#00000020', padding: 10}}>
Text in a gray box!
<Text style={{backgroundColor: 'red'}}>another text in red box</Text>
</Text>

[ericlewis]

I pushed changes to reflect (I think) what you said, but it breaks other places in the RNTester app.

If I understand you correctly, it should look like this:

But this has undesired effects when text doesn't have children:

So should the solution be to allow the background to be drawn so the after image works & so the nested backgrounds work?

[ericlewis]

@shergin fixing the snapshot now, changing the TextExample.ios.js dirtied it.

[facebook-github-bot]

@shergin is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @ericlewis in bbf7156.

^{When will my fix make it into a release? | Upcoming Releases}