question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput backgroundColor transparency issue

See original GitHub issue

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 ‘#0006’

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
jeswinsimoncommented, Nov 14, 2019

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.

0reactions
Sofianiocommented, Nov 14, 2019

That’s good news @jeswinsimon … any idea when this fix will be public?

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native TextInput background color looks double layered ...
This issue only occurs on iOS, because there it is used as performace tweak to avoid alpha blending. On iOS devices, a <Text/>...
Read more >
opacity - CSS: Cascading Style Sheets - MDN Web Docs
The opacity CSS property sets the opacity of an element. ... the luminosity of the opacity-adjusted text and background color values.
Read more >
transparency on textbox - WordPress.org
It means that the background behind the text is a solid color with transparency, so we can see the website background through the...
Read more >
background-color of text input fields - CSS-Tricks
When I put the following code into my css file: input { background-color:transparent; } Chrome still makes the text-input fields yellow.
Read more >
There is no way to change a text box background color
Also, once something has a background, it cannot go back to transparent. Is the back/front arrangement buttons not working also a known issue?...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found