[iOS] Opacity prop of Text applies double times.

🐛 Bug Report

On iOS, Text component with style prop opacity applies twice. It seems the base class of RCTTextView is RCTView, and it causes the style prop opacity applies double times to RCTTevtView.

Roughly, delete this line in RCTBaseTextViewManager.m fix this issue.

To Reproduce

//Please check the example code below.
const styles = StyleSheet.create({
  rgba: {
    fontSize: 20,
    marginBottom: 10,
    color: 'rgba(0, 0, 0, 0.25)'
  },
  opacity_50: {
    fontSize: 20,
    marginBottom: 10,
    color: '#000',
    opacity: 0.5
  },
  opacity_25: {
    fontSize: 20,
    marginBottom: 10,
    color: '#000',
    opacity: 0.25
  },
  hexa: {
    fontSize: 20,
    color: '#00000040' //rrggbbaa
  }
}

Expected Behavior

It should be rendered as same as Android (right image above).

Code Example

https://snack.expo.io/Hy8RhMkYN

In iOS environment, compare the rendered colors of Text component with style { opacity: 0.5 } and { color: 'rgba(0, 0, 0, 0.25)' } - those are seems same.

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
      Memory: 225.85 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.5.0 - ~/.nvm/versions/node/v11.5.0/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v11.5.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.2 => 0.59.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2

[PaxLyj]

@lukewalczak Well, you may thought that text with OPACITY BG is not rendered as translucent, right? The conbined style of that text component is -

  color: '#000000',
  backgroundColor: '#ff0000',
  opacity: 0.5,

and I think it’s reasonable that applying opacity to Textcomponent once, make both color of text and background as 50% of translucency. (Which is as shown in the image you attached.)

On the other hand, the text components of both RGBA BG and HEXA BG has 50% of translucency, so the colors of texts are mixed with each color of background.

[shergin]

Oh, I see now, the issue is not about nested text components at all!

So, the solution should be pretty simple, we should just add self.textAttributes.opacity = NAN; similarly to what we did in #23872.

Who wants to contribute? 😉