[Android] borderColor is broken for transparent colors #3652

cosmith · 2015-10-24T08:40:17Z

Setting borderColor: "rgba(255, 255, 255, 0.5)" works but borderColor: "rgba(255, 255, 255, 0.6)" gives a black border.

Expected:

Android:

Sample app: https://rnplay.org/apps/l1bw2A

The text was updated successfully, but these errors were encountered:

satya164 · 2015-12-24T20:13:57Z

@cosmith Is this still an issue?

cosmith · 2016-01-07T15:38:00Z

Sorry for the delay, still an issue on 0.16 but I haven't had the time to upgrade to 0.17 or 0.18.

ataber · 2016-01-12T20:55:38Z

I'm seeing this in 0.17, however opacity of 0.5 also appears as black.

scgough · 2016-01-13T10:59:32Z

I'm also seeing this in 0.17 on Android

I've tried a number of combinations...for e.g.

mystyle: { height:1, borderBottomWidth:1, borderColor:'rgba(255,255,255,0.5)', borderTopWidth:0, borderLeftWidth:0, borderRightWidth:0, },

foghina · 2016-01-18T15:26:31Z

Seeing this on master, seems related to color parsing? cc @andreicoman11

Strainy · 2016-02-24T01:32:37Z

Can confirm on 0.18, still an issue.

slamus · 2016-03-04T10:53:37Z

+1

marcshilling · 2016-03-23T16:58:18Z

Happening in 0.22 still. Black border for any alpha value except 1.0.

IanVS · 2016-03-28T03:10:46Z

Happening still in 0.23.0-rc. It seems like instead of a real opacity being calculated, a different color value is being applied. So, the blacks turn into greys, but are fully opaque.

jsangilve · 2016-03-31T11:10:51Z

Still happening on 0.23-rc1

hyugit · 2016-04-06T21:01:28Z

anybody working on this??

samuelpismel · 2016-05-19T17:52:12Z

Still happening on 0.26 on Android

omeid · 2016-05-23T01:41:06Z

I have the same issue with 0.26 on ios as well.

robertftw · 2016-06-16T09:12:43Z

Still happens on 0.27.2

mattvot · 2016-07-04T14:08:37Z

@foghina, @andreicoman11, Is fixing this issue scheduled or in a backlog?

foghina · 2016-07-04T14:10:45Z

Not that I know of. Added some tags to encourage people to send a PR to fix it :)

fxhereng · 2016-07-07T09:08:03Z

+1

anuragdadheech · 2016-07-14T10:31:26Z

Waiting for the fix.

hyugit · 2016-07-14T23:00:06Z

I'll work on it. anyone who has already started, please let me know here.

manicakes · 2016-08-12T19:12:29Z

Hi all, I have a pull request to fix this here: #9380

Problem had to do with storing int value as float. This is lossy when converting back to int for very large numbers. To solve this I split color (ARGB) into RGB and Alpha values to be stored separately.

Summary: Fix for issue #3652 - Converting from `int` to `float` is lossy for very large numbers, so storing `borderColor` as a single `Spacing` object (which uses `float`) was not working for certain colors. So, this pull request splits `borderColor` into alpha and RGB components, and stores each of these as their own respective `Spacing` objects. *Test Plan* Check out cosmith sample code here that triggers the bug: https://rnplay.org/apps/l1bw2A What currently looks like this: <img width="548" alt="screen shot 2016-08-13 at 6 22 28 pm" src="https://cloud.githubusercontent.com/assets/1630466/17645965/9346f05e-6183-11e6-8d40-3e458b08fd9a.png"> Should look like this (with my fix applied): <img width="543" alt="screen shot 2016-08-13 at 6 20 08 pm" src="https://cloud.githubusercontent.com/assets/1630466/17645968/9c26d1d0-6183-11e6-8759-75a5e99f498a.png"> Closes #9380 Differential Revision: D3716707 Pulled By: foghina fbshipit-source-id: 1164378112e2a58d43c8f5fc671c2efdb64b412b

manicakes · 2016-08-15T16:21:51Z

Many thanks to @foghina for reviewing and getting the pull request merged in today - if @cosmith and others here can confirm this bug is fixed that would be appreciated!

satya164 · 2016-08-15T21:08:47Z

Closing this due to 8095707

Let's reopen if it's not fixed.

Summary: Fix for issue facebook#3652 - Converting from `int` to `float` is lossy for very large numbers, so storing `borderColor` as a single `Spacing` object (which uses `float`) was not working for certain colors. So, this pull request splits `borderColor` into alpha and RGB components, and stores each of these as their own respective `Spacing` objects. *Test Plan* Check out cosmith sample code here that triggers the bug: https://rnplay.org/apps/l1bw2A What currently looks like this: <img width="548" alt="screen shot 2016-08-13 at 6 22 28 pm" src="https://cloud.githubusercontent.com/assets/1630466/17645965/9346f05e-6183-11e6-8d40-3e458b08fd9a.png"> Should look like this (with my fix applied): <img width="543" alt="screen shot 2016-08-13 at 6 20 08 pm" src="https://cloud.githubusercontent.com/assets/1630466/17645968/9c26d1d0-6183-11e6-8759-75a5e99f498a.png"> Closes facebook#9380 Differential Revision: D3716707 Pulled By: foghina fbshipit-source-id: 1164378112e2a58d43c8f5fc671c2efdb64b412b

ide added the Android label Oct 24, 2015

astreet assigned foghina Oct 27, 2015

satya164 added the Needs Response from Author label Dec 24, 2015

christopherdro mentioned this issue Jan 19, 2016

Using CSS to draw triangle under Android #5396

Closed

lelandrichardson mentioned this issue Jan 19, 2016

CSS Transparent Border trick doesn't work on Android when embedded in the Map react-native-maps/react-native-maps#17

Closed

satya164 removed the Needs Response from Author label Jan 26, 2016

foghina removed their assignment Jul 4, 2016

foghina added Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Help Wanted Issues ideal for external contributors. labels Jul 4, 2016

manicakes mentioned this issue Aug 12, 2016

[Android] store borderColor in a non lossy way #9380

Closed

satya164 closed this as completed Aug 15, 2016

facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] borderColor is broken for transparent colors #3652

[Android] borderColor is broken for transparent colors #3652

cosmith commented Oct 24, 2015

satya164 commented Dec 24, 2015

cosmith commented Jan 7, 2016

ataber commented Jan 12, 2016

scgough commented Jan 13, 2016

foghina commented Jan 18, 2016

Strainy commented Feb 24, 2016

slamus commented Mar 4, 2016

marcshilling commented Mar 23, 2016

IanVS commented Mar 28, 2016

jsangilve commented Mar 31, 2016

hyugit commented Apr 6, 2016

samuelpismel commented May 19, 2016 •

edited

Loading

omeid commented May 23, 2016

robertftw commented Jun 16, 2016

mattvot commented Jul 4, 2016

foghina commented Jul 4, 2016

fxhereng commented Jul 7, 2016

anuragdadheech commented Jul 14, 2016

hyugit commented Jul 14, 2016

manicakes commented Aug 12, 2016 •

edited

Loading

manicakes commented Aug 15, 2016

satya164 commented Aug 15, 2016

[Android] borderColor is broken for transparent colors #3652

[Android] borderColor is broken for transparent colors #3652

Comments

cosmith commented Oct 24, 2015

satya164 commented Dec 24, 2015

cosmith commented Jan 7, 2016

ataber commented Jan 12, 2016

scgough commented Jan 13, 2016

foghina commented Jan 18, 2016

Strainy commented Feb 24, 2016

slamus commented Mar 4, 2016

marcshilling commented Mar 23, 2016

IanVS commented Mar 28, 2016

jsangilve commented Mar 31, 2016

hyugit commented Apr 6, 2016

samuelpismel commented May 19, 2016 • edited Loading

omeid commented May 23, 2016

robertftw commented Jun 16, 2016

mattvot commented Jul 4, 2016

foghina commented Jul 4, 2016

fxhereng commented Jul 7, 2016

anuragdadheech commented Jul 14, 2016

hyugit commented Jul 14, 2016

manicakes commented Aug 12, 2016 • edited Loading

manicakes commented Aug 15, 2016

satya164 commented Aug 15, 2016

samuelpismel commented May 19, 2016 •

edited

Loading

manicakes commented Aug 12, 2016 •

edited

Loading