[BUG]: Does not support transparent backgrounds.

[TrebuhD]

I'm trying to interpolate between a regular color and a transparent one in order to have 2 radial gradients that interact with each other. Unfortunately it seems transparent gets ignored and interpreted as black. Transparent hex values also don't work.

      <RadialGradient
        style={{ width: 200, height: 200 }}
        colors={['#00ffff', 'transparent']}
        stops={[0.3]}
        center={[100, 100]}
        radius={200}
      />

results in

Whereas the black pixels should be transparent.

[ali226281]

in android , you can use colors={['rgba(0,255,255,1)','rgba(0,255,255,0)']}. it is ok in android but don't work in ios.

[TheWebartist]

I've the same issue : On Android my transparent radial gradients are correctly rendered but on iOS the transparent color is transformed in black color.

[ManigandanRaamanathan]

@TrebuhD @TheWebartist did you guys found any fix for this? @surajit-bitcanny @surajitsarkar19

[TrebuhD]

I haven't been able to achieve this effect using this library. I'm not sure it's possible with the current implementation in the java code.

I was able to throw something together using this library, but we're not using it in production: https://github.com/iyegoroff/react-native-image-filter-kit. It's an image filter library, but you can create a transparent image and generate a radial gradient on top of that.

You could try using https://github.com/react-native-community/react-native-svg, it might be more performant.

[shkatulo]

Hey guys,

I fixed this issue on iOS and sent pull request to this repository. But for now you can use fixed version from my fork:

npm install shkatulo/react-native-radial-gradient --save

[ffMathy]

The PR in question is #12.

[ffMathy]

Not sure if the owner (@surajitsarkar19) is still active. Has anyone heard from him recently?

[klodha]

+1 for Android issue. Even specifying colors like colors={['rgba(0,255,255,1)','rgba(0,255,255,0)']} are rendering a 'square' not 'circle'. Same result with iOS (PR !12 is merged and I can verify that fix from @shkatulo is in codebase of module, but its not working on iOS too).

Any clue ??

[klodha]

If this project is anymore active?

[ffMathy]

No idea. It's a shame, because it's such an important feature, and this library is very simple and easy to use.

[klodha]

I can totally understand if @surajitsarkar19 is no longer interested in maintaining the project, everyone has their priorities. Though if he could have mentioned state on repo home page (like deprecated / no longer being maintained), new users like me could have saved ton of time by not opting for this plugin.

Anyways, I don't have enough experience with native programming (a reason why I am using React Native) but hopefully someone having in depth idea about how native rendering is working will be able to get it resolved.

For now, I switched to SVG option.

[shkatulo]

+1 for Android issue. Even specifying colors like colors={['rgba(0,255,255,1)','rgba(0,255,255,0)']} are rendering a 'square' not 'circle'. Same result with iOS (PR !12 is merged and I can verify that fix from @shkatulo is in codebase of module, but its not working on iOS too).

Any clue ??

Just rebuilt project, where I use fixed code. Still works for me on both platforms, if I create gradient like this:

<RadialGradient 
                colors={[ '#C86DD7FF', '#C86DD760', '#C86DD700' ]} 
                center={[ gradX, gradY ]}
                radius={radius}
                style={StyleSheet.absoluteFillObject}/>