Is it possible to get it working with Linear Gradients?

[robert-stevens]

Hi,

I am currently using https://github.com/react-native-community/react-native-linear-gradient and was wondering if I can pass the gradient through to ColorBlending instead of the color array?

What I am trying to achieve is having 3 layers:

1. Purple Gradient as background layer

`<LinearGradient start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}} locations={[0,0.25,0.5,0.75,1]} colors={['#692eff', '#642cf4', '#602ae9', '#5224c8', '#5e29e5']} style={styles.contentContainer}

`

2. Blue Gradient as a second layer but also using a blendmode of Overlay, e.g:

`<ColorBlending color={[1,1,1,1]} blendMode={'blendOverlay'}

<LinearGradient colors={['rgba(13,105,255,0)', '#0069ff']} style={styles.contentContainer2} `

3. Then finally the image using blendmode of blendSoftLight, e.g.

`

` The original image looks like this:  While the desired effect is like this:  I have tried various ways of putting them together, but have not been able to successfully use the gradients with the ColorBlending & Image. Is this possible?

[robert-stevens]

Hi @miklosme

I did see something like this was mentioned in this issue:

https://github.com/miklosme/gl-react-color-blending/issues/1

But I couldn't find any working example or documentation about it. If you could point me in the right direction, I would really appreciate it.

Thanks.

[miklosme]

Hey @uppercase-army

Unfortunately I'm not very experienced with gl-react, I never used it in production. I think your use case is possible, gl-react supports composition well, but I can't tell you how.

I'd recommend you to ask this question where experienced gl-react users are. Maybe at Reactiflux? They had a gl-react channel at one point, but I can't find it right now.

[robert-stevens]

Hey @miklosme

Thanks for the feedback, I will ask around.