TextInput backgroundColor transparency issue
See original GitHub issueHello, 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
- create a TextInput
- 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:
- Created 4 years ago
- Reactions:1
- Comments:12 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This issue seems to be happening in
RCTBaseTextInputShadowView.m
where background color is also being passed as atextAttribute
.A fix seems to have been already committed by @shergin.
That’s good news @jeswinsimon … any idea when this fix will be public?