TextInput backgroundColor transparency issue

[Sofianio]

Hello,
I'm having a weird behavior when setting TextInput backgroundColor with transparency, the text gets some kind of background, See Screenshot
I'm using the latest React Native release tested on iOS 12.1

React Native version:

System:
    OS: macOS Mojave 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 38.39 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
      API Levels: 26, 27, 28
      Build Tools: 26.0.2, 28.0.3
      System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  IDEs:
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-rename: 2.2.2

Steps To Reproduce

1. create a TextInput
2. set backgroundColor to 'Renamed hasMove to hasMark #6'

Describe what you expected to happen:
I expected to see text without the "highlight"

Snack, code example, screenshot, or link to a repository:
In snack expo it works fine but not in RN
<TextInput style={{height: 50, backgroundColor: '#0006'}}/>

Another user reported this issue #26494 but it was closed for not following the template
I hope this one is accepted and investigated
Thanks in advance.

[Sofianio]

For solid colors the issue doesn't appear.
For high transparency #0001 the text background has also high transparency.

What I think is happening is that there's a text container inside the TextInput that is getting the same backgroundColor as the TextInput instead of transparent

It feels like the 2 backgrounds are stacking

[Sofianio]

A workaround I went for while waiting for a response is to put the TextInput background to transparent and put it inside a view that has the desired transparency

[jacobp100]

#7964 might give some background on this

[Sofianio]

The issue #7964 is closed but not solved yet,
I might not know what I'm talking about but I think using transparent background on the text instead of inheriting the background would solve this.

[jacobp100]

Does it work if you do something like this

<TextInput style={{ backgroundColor: "#0006" }}>
  <Text style={{ backgroundColor: "transparent" }}>
    {yourTextContent}
  </Text>
</TextInput>

[Sofianio]

Didn't know you could do that ...
I thought TextInput was like me or like an html input tag .. no children
I tried it and It works for normal TextInput but it doesn't for password secureTextEntry={true}

[jacobp100]

Yeah, so I guess it looks like a RN bug. I suspect it's putting the background colour on the text attributes as well as the text input itself. Is this something you'd want to look into?

[Sofianio]

If you mean do I want it to be fixed .. then yes
If you mean do I want to fix it I'm afraid I can't, I'm a RN beginner with 0 experience in native Android & iOS

Thanks for the help identifying the issue @jacobp100
I hope this gets fixed

[jeswinsimon]

@jacobp100 @Sofianio I would like to take this up if this is not taken.

[jacobp100]

@jeswinsimon That'd be great! 👍

[jeswinsimon]

This issue seems to be happening in RCTBaseTextInputShadowView.m where background color is also being passed as a textAttribute.

A fix seems to have been already committed by @shergin.

[Sofianio]

That's good news @jeswinsimon ... any idea when this fix will be public?