React-native-linear-gradient: Incorrect color when using `transparent`

[holmesal]

Yo! Nice work on this. I'm not sure that transparent values are handled properly.

I'm on react-native 0.13.1

When I use colors={['transparent', 'white']}, I get something unexpected:

but when I use colors={['rgba(255, 255, 255, 0)', 'white']}, it looks as it should:

[rreusser]

It appears that it's rendered correctly, assuming transparent is shorthand for rgba(0, 0, 0, 0). Opaque white to transparent black yields semi-opaque gray in the middle. The alternative would be that the definition of 'transparent' changes depending on the opposing argument and the context (plus, what if a color is run through processColor?), which, though not strictly invalid, seems more prone to unexpected corner cases and requires additional checks. I've found similar behavior in web browsers (e.g. Chrome vs. Safari), so at risk of being dismissive—which I don't mean to be!—would recommend getting in the habit of not relying on the shorthand where gradients are involved.

[holmesal]

Ah! You're absolutely right.

I was expecting the behavior you describe, where the value of transparent is based on the opposing color stop (or adjacent stops). Didn't realize that transparent was actually transparentBlack, but that makes sense.

Am now avoiding the shorthand for clarity. Thanks!

[rreusser]

:+1:

[jjercx]

I think this should be documented somewhere. How can I help?

[rreusser]

@jjercx I'm not a maintainer, but if you submit a PR with a clean, concise addition to the readme adding a small note about this, I imagine it'd probably be gladly received!